/*
Theme Name: Spiral Screen Job
Author: Spiral
Author URI: https://spiral-communication.fr/
Description: Theme de base pour l'affichage dynamique
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: spiral-screen
*/


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');/*


* css du front du slideshow
*/


/*slideshow*/
.spss_slideshow {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   overflow: hidden;
}


/* slides */
.spss_slideshow .spss_slide {
   position: absolute;
   width: 100vw;
   height: 100vh;
   top: 0;
   left: 100vw;
   overflow : hidden;
   background-size : cover;
}

.spss_slideshow .spss_slide.on {
   left: 0;
   animation: slidein 800ms forwards;
}

.spss_slideshow .spss_slide.off {
   left: -100vw;
   animation: slideout 800ms;
}

@keyframes slidein {
   from{ left: 100vw}
   to {left : 0}
}

@keyframes slideout {
   from{left: 0}
   to{left: -100vw}
}


/* inside */
.spss_slideshow {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: var(--spb-color-accent1);
	font-size: 24px;
}
		
.spss_slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	padding: 50px;
	box-sizing: border-box;
}

.spss_slide p {
	margin: 0;
}

.spss_slide .action {
	font-weight: 900;
	font-size: 3em;
}

.spss_slide .title {
	background-color: var(--spb-color-accent2);
	color: var(--spb-color-accent3);
	padding: .5em;
	font-size: 3em;
	font-weight: 700;
	letter-spacing: 2px;
}

.spss_slide .metas {
	list-style-type: none;
}

.spss_slide .metas li {
	line-height: 1.2em;
	font-size: 2em;
	font-weight: 700;
}

.spss_slide .metas li .meta-label {
	font-weight: 400;
	text-transform: capitalize;
}
		
.spss_slide .metas li .word {
	display: inline-block;
}

/*anims*/
.spss_slide { 
	--startDelay: 800ms;
	--animationSpeed: 400ms;
	--iterationDelay: 400ms;
}
.spss_slide.on .logo {
	animation: slideLeft var(--animationSpeed) ease-in 0ms 1 both;
}
.spss_slide.on .title {
	animation: fadeIn var(--animationSpeed) ease-in 0ms 1 both;
}
.spss_slide.on .action, 
.spss_slide.on .metas li .word {
	animation: slideUp var(--animationSpeed) ease-in 0ms 1 both;
}
		

.spss_slide.on .logo { animation-delay: var(--startDelay);}
.spss_slide.on .action { animation-delay: calc(var(--startDelay) + var(--iterationDelay));}
.spss_slide.on .title { animation-delay: calc(var(--startDelay) + 2 * var(--iterationDelay));}
.spss_slide.on .metas li .word { animation-delay: calc(var(--startDelay) + 3 * var(--iterationDelay));}

/* keyframes */
@keyframes slideLeft {
	0% {
		transform : translate(-100px, 0);
		opacity: 0;
	}

	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes slideUp {
	0% {
		transform : translate(0, 20px);
		opacity: 0;
	}

	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}