/**
 * YEP'S apparition au scroll (feature flag « scroll-reveal »).
 *
 * Joué UNIQUEMENT sur la première section de chaque page (Video Hero d'accueil,
 * .yeps-single d'article, 1er .yeps-scroll-section sinon). Le JS gère le
 * scoping : tout ce qui est hors de cette première section reçoit `.is-revealed`
 * immédiatement (avec `animation: none` inline) pour ne pas rester caché.
 *
 * Fondu montant discret, joué une seule fois à la première entrée dans le
 * viewport (la classe .is-revealed est posée par yeps-reveal-frontend.js puis
 * l'élément n'est plus observé : pas de rejeu).
 *
 * Tout est gaté par la classe body `yeps-feat-scroll-reveal` (posée côté serveur
 * quand le flag est actif, donc état caché appliqué dès le premier paint : pas
 * de flash) et par `prefers-reduced-motion: no-preference` (RGAA / sobriété).
 *
 * On anime via @keyframes + `animation` (et non `transition`) pour ne PAS
 * écraser la propriété `transition` propre de certaines cibles (ex. les cartes
 * d'article, qui s'en servent pour leur survol). `animation-fill-mode: backwards`
 * maintient l'état initial pendant le délai d'attente, mais laisse l'élément
 * reprendre son style naturel une fois l'animation finie : aucun `transform`
 * figé qui bloquerait un hover ultérieur.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes yeps-reveal-rise {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	/* Variante opacité seule (sans transform) pour les éléments qui ont déjà
	   leur propre transform de positionnement. */
	@keyframes yeps-reveal-fade {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	/* ---- État caché (tant que l'élément n'est pas révélé) ---- */
	body.yeps-feat-scroll-reveal .yeps-scroll-section__inner
		> :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote):not(.is-revealed),
	body.yeps-feat-scroll-reveal .yeps-scroll-section__inner
		> .wp-block-term-description:not(.is-revealed),
	body.yeps-feat-scroll-reveal .yeps-single__hero:not(.is-revealed),
	body.yeps-feat-scroll-reveal .yeps-single__meta:not(.is-revealed),
	body.yeps-feat-scroll-reveal .yeps-single__main
		> :not(.yeps-single__meta):not(.is-revealed),
	body.yeps-feat-scroll-reveal .yeps-single__aside:not(.is-revealed),
	body.yeps-feat-scroll-reveal .yeps-hero-video__content
		> :is(h1, h2, h3, h4, h5, h6, p):not(.is-revealed),
	body.yeps-feat-scroll-reveal .yeps-hero-video__content
		> .yeps-scribble:not(.is-revealed),
	body.yeps-feat-scroll-reveal .yeps-hero-video .yeps-hero-search__form:not(.is-revealed),
	body.yeps-feat-scroll-reveal .yeps-hero-video .yeps-hero-search__chip:not(.is-revealed),
	body.yeps-feat-scroll-reveal .yeps-hero-video__caption:not(.is-revealed),
	body.yeps-feat-scroll-reveal .yeps-carte-fs-title
		> :is(h1, h2, h6):not(.is-revealed) {
		opacity: 0;
	}

	/* ---- Révélation : fondu montant, joué une seule fois ----
	   Le délai (base + cascade par étapes) est posé par yeps-reveal-frontend.js
	   via --yeps-reveal-delay. */
	body.yeps-feat-scroll-reveal .yeps-scroll-section__inner > .is-revealed,
	body.yeps-feat-scroll-reveal .yeps-single__hero.is-revealed,
	body.yeps-feat-scroll-reveal .yeps-single__meta.is-revealed,
	body.yeps-feat-scroll-reveal .yeps-single__main > .is-revealed,
	body.yeps-feat-scroll-reveal .yeps-single__aside.is-revealed,
	body.yeps-feat-scroll-reveal .yeps-hero-video__content
		> :not(.yeps-scribble).is-revealed,
	body.yeps-feat-scroll-reveal .yeps-hero-video .yeps-hero-search__form.is-revealed,
	body.yeps-feat-scroll-reveal .yeps-hero-video .yeps-hero-search__chip.is-revealed,
	body.yeps-feat-scroll-reveal .yeps-carte-fs-title > .is-revealed {
		animation: yeps-reveal-rise
			var(--yeps-reveal-duration, 720ms)
			var(--yeps-reveal-easing, cubic-bezier(0.16, 1, 0.3, 1))
			var(--yeps-reveal-delay, 0ms) backwards;
	}

	/* Cibles avec un transform de positionnement propre (légende CTA centrée par
	   translate(-50%…), flèche scribble « pull-right ») : on anime UNIQUEMENT
	   l'opacité, sinon la keyframe rise écraserait leur transform (départ décalé
	   puis recalage en fin d'animation). */
	body.yeps-feat-scroll-reveal .yeps-hero-video__caption.is-revealed,
	body.yeps-feat-scroll-reveal .yeps-hero-video__content
		> .yeps-scribble.is-revealed {
		animation: yeps-reveal-fade
			var(--yeps-reveal-duration, 720ms)
			var(--yeps-reveal-easing, cubic-bezier(0.16, 1, 0.3, 1))
			var(--yeps-reveal-delay, 0ms) backwards;
	}

	/* Élément hors « première section » : on lui retire l'animation de reveal
	   (le JS pose la classe en plus de .is-revealed). Passe par une classe
	   plutôt qu'un inline style.animation pour rester déclassable côté CSS
	   si on lui ajoute plus tard une animation indépendante (hover, etc.). */
	body.yeps-feat-scroll-reveal .yeps-reveal-instant {
		animation: none !important;
	}
}