/***************************************************************************/
/* Animations                                                              */
/***************************************************************************/

.realisations__wrapper article{
    opacity: 0;
    transition: opacity calc(3 * var(--transition-basic-duration));
}

.realisations__wrapper.on-screen article{
    transform : translateX(100vw);
    animation-name : stargate-rings;
	animation-duration : calc(3 * var(--transition-basic-duration));
	animation-fill-mode : forwards;
	animation-iteration-count: 1;
	opacity: 1;
}

.realisations__wrapper.on-screen.animation-reverse article{
    transform : translateX(-100vw);
    animation-name : stargate-rings-reverse;
	animation-duration : calc(3 * var(--transition-basic-duration));
	animation-fill-mode : forwards;
	animation-iteration-count: 1;
}

.realisations__wrapper.on-screen article:nth-child(1){
	animation-delay: calc(1 * var(--transition-basic-duration));
	transition-delay: calc(2 * var(--transition-basic-duration));
}

.realisations__wrapper.on-screen article:nth-child(2){
	animation-delay: calc(2 * var(--transition-basic-duration));
	transition-delay: calc(3 * var(--transition-basic-duration));
}

.realisations__wrapper.on-screen article:nth-child(3){
	animation-delay: calc(3 * var(--transition-basic-duration));
	transition-delay: calc(4 * var(--transition-basic-duration));
}

.realisations__wrapper.on-screen article:nth-child(4){
	animation-delay: calc(4 * var(--transition-basic-duration));
	transition-delay: calc(5 * var(--transition-basic-duration));
}

.realisations__wrapper.on-screen.animation-reverse article:nth-child(1){
	animation-delay: calc(4 * var(--transition-basic-duration));
	transition-delay: calc(5 * var(--transition-basic-duration));
}

.realisations__wrapper.on-screen.animation-reverse article:nth-child(2){
	animation-delay: calc(3 * var(--transition-basic-duration));
	transition-delay: calc(4 * var(--transition-basic-duration));
}

.realisations__wrapper.on-screen.animation-reverse article:nth-child(3){
	animation-delay: calc(2 * var(--transition-basic-duration));
	transition-delay: calc(3 * var(--transition-basic-duration));
}

.realisations__wrapper.on-screen.animation-reverse article:nth-child(4){
	animation-delay: calc(1 * var(--transition-basic-duration));
	transition-delay: calc(2 * var(--transition-basic-duration));
}

@keyframes stargate-rings{
    0%{
		transform : translateX(100vw);
    }

    100%{
		transform : translateX(0vw);
    }
}

@keyframes stargate-rings-reverse{
    0%{
		transform : translateX(-100vw);
    }

    100%{
		transform : translateX(0vw);
    }
}

/***********citation*************/

figure.wp-block-pullquote.inview blockquote p{
	opacity: 0;
	transform: translateX(30rem);
	transition: opacity calc(4 * var(--transition-basic-duration)), transform calc(2 * var(--transition-basic-duration));
}

figure.wp-block-pullquote.inview-frozen blockquote p{
	opacity: 1;
	transform: translateX(0rem);
}


/*********bouton**************/

:root{
	--button-blink-duration: .6s
}

.wp-block-button:hover a.wp-block-button__link::before{
	animation: blink-1 var(--button-blink-duration) infinite;
}

.wp-block-button:hover a.wp-block-button__link::after{
	animation: blink-2 var(--button-blink-duration) infinite;
}

.wp-block-button:hover::after{
	animation: blink-3 var(--button-blink-duration) infinite;
}

@keyframes blink-1 {
	0%{
		opacity: 1;
	}

	25%{
		opacity: .25;
	}

	50%{
		opacity: 1;
	}

	75%{
		opacity: 1;
	}

	100%{
		opacity: 1;
	}
}

@keyframes blink-2 {
	0%{
		opacity: 1;
	}

	25%{
		opacity: 1;
	}

	50%{
		opacity: .25;
	}

	75%{
		opacity: 1;
	}

	100%{
		opacity: 1;
	}
}

@keyframes blink-3 {
	0%{
		opacity: 1;
	}

	25%{
		opacity: 1;
	}

	50%{
		opacity: 1;
	}

	75%{
		opacity: .25;
	}

	100%{
		opacity: 1;
	}
}

:root{
	--banner-speed : 8s;
}

body.home .main-banner img{
	animation: zoom-in ease calc(3 * var(--banner-speed)) 1 forwards;
}

@keyframes zoom-in {
	0%{
		transform: scale(1);
	}

	100%{
		transform: scale(1.1);
	}
}

body.home .main-banner .banner__logo{
	animation: zoom-out ease var(--banner-speed) 1 forwards;
}

@keyframes zoom-out {
	0%{
		transform: translateY(-50%) scale(1.05);
		opacity: 0;
	}

	100%{
		transform: translateY(-50%) scale(1);
		opacity: 1;
	}
}

body.home .main-banner .banner__logo path.slogan{
	opacity: 0;
	animation: fade-in ease var(--banner-speed) 1 forwards;
}

@keyframes fade-in {
	0%{
		opacity: 0;
	}

	25%{
		opacity: 0;
	}

	50%{
		opacity: 0;
	}	

	75%{
		opacity: 1;
	}	

	100%{
		opacity: 1;
	}	

}


body.home .main-banner .banner__title{
	animation: from-right-2 linear var(--banner-speed) 1 forwards;	
}

@keyframes from-right-2 {

	0%{
		transform: translateX(4vw);
		opacity: 0;
	}

	25%{
		transform: translateX(3vw);
		opacity: 0;
	}

	50%{
		transform: translateX(2vw);
		opacity: 1;
	}

	100%{
		transform: translateX(0);
		opacity: 1;
	}	
}



/**********effets from---**********/

:root{
	--inview-shiftX : 5vw;
	--inview-shiftY : 5vh;
}

.inview.from-right,
.inview.from-left,
.inview.from-bottom,
.inview.from-top
{
	opacity : 0;
    transition: transform 1.5s, opacity 1s;
}

.inview.from-right{
	transform: translateX(calc(1 * var(--inview-shiftX)));
}

.inview.from-left{
	transform: translateX(calc(-1 * var(--inview-shiftX)));
}

.inview.from-bottom{
	transform: translateY(var(--inview-shiftY));
  	padding-top : 0;
}

.inview.from-top{
  	transform: translateY(calc(-1 * var(--inview-shiftY)));
	padding-top : 0;
}

.inview.inview-frozen{
  	transform: translateY(0);
	opacity : 1;
}



/**********divers**********/

.arrow-right{
	position: absolute;
	top: 1rem;
	right: 10vw;
	width: 10px;
	height: 50px;
	background-image: url('../images/pictos/fleche-triangle.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	animation: horizontal-oscillation ease-in-out 1s infinite;
}

@keyframes horizontal-oscillation {
	0%{
		transform: translateX(0%);
	}

	50%{
		transform: translateX(100%);
	}

	100%{
		transform: translateX(0%);
	}

}