/********************************/
/*
/* ANIMATIONS
/* Les états "cachés" ne s'appliquent que si html.js-anim est présent
/* (ajouté dans _head.php, absent si le visiteur a demandé moins d'animations)
/*
/********************************/

:root{
	--anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--anim-duree: 1.1s;
}


/*******************/
/*  FADE / FADE-UP
/*******************/

.js-anim [data-anim="fade"],
.js-anim [data-anim="fade-up"]{
	opacity: 0;
	transition: opacity var(--anim-duree) var(--anim-ease),
	            transform var(--anim-duree) var(--anim-ease);
}

.js-anim [data-anim="fade-up"]{
	transform: translateY(30px);
}

.js-anim [data-anim].is-visible{
	opacity: 1;
	transform: none;
}


/*******************/
/*  REVEAL (photos)
/*  Rideau qui se lève + léger dézoom de l'image
/*  (rideau en pseudo-élément : un clip-path sur l'élément lui-même
/*  l'empêcherait d'être détecté par l'IntersectionObserver)
/*******************/

[data-anim="reveal"]{
	position: relative;
	overflow: hidden;
}

.js-anim [data-anim="reveal"]::after{
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--anim-rideau, #fff);
	transform-origin: top;
	transition: transform 1.4s var(--anim-ease);
	transition-delay: inherit;
	pointer-events: none;
}

.js-anim [data-anim="reveal"] img{
	transform: scale(1.12);
	transition: transform 1.8s var(--anim-ease);
	transition-delay: inherit;
}

.js-anim [data-anim="reveal"].is-visible::after{
	transform: scaleY(0);
}

.js-anim [data-anim="reveal"].is-visible img{
	transform: scale(1);
}


/*******************/
/*  SURVOL DES PHOTOS
/*  Zoom lent dans le cadre
/*******************/

.anim-zoom{
	overflow: hidden;
}

.anim-zoom img{
	transition: transform 1.8s var(--anim-ease);
}

.anim-zoom:hover img,
.js-anim .anim-zoom.is-visible:hover img{
	transform: scale(1.04);
}


/*******************/
/*  HEADER
/*  Le header fixe glisse depuis le haut au lieu d'apparaître d'un coup
/*******************/

#header.header_fixed{
	animation: header_slide 0.6s var(--anim-ease);
}

@keyframes header_slide{
	from{ transform: translateY(-100%); }
	to{ transform: translateY(0); }
}


/*******************/
/*  ACCESSIBILITÉ
/*******************/

@media (prefers-reduced-motion: reduce){
	*, ::before, ::after{
		animation: none !important;
		transition: none !important;
	}
}