/* ==========================================================================
   MovieSport — ms-motion.css (DA v2)
   Règles : tout état initial caché n'existe que sous html.js ET
   prefers-reduced-motion: no-preference ; failsafe ms-safety ;
   uniquement transform / opacity / clip-path / filter.
   ========================================================================== */

@keyframes ms-safety { to { opacity: 1; transform: none; clip-path: none; filter: none; } }
@keyframes ms-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ms-kenburns { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes ms-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes ms-bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ms-loader-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---------- Réduction du mouvement : kill-switch global ---------- */
@media (prefers-reduced-motion: reduce) {
	:root { --ms-d-fast: .001s; --ms-d: .001s; --ms-d-reveal: .001s; --ms-d-scene: .001s; --ms-d-hero: .001s; }
	*, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
	html.ms-first .ms-loader { display: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }

	/* ---------- Révélations génériques ---------- */
	html.js [data-reveal] {
		opacity: 0; transform: translateY(26px);
		transition: opacity var(--ms-d-reveal) var(--ms-ease), transform var(--ms-d-reveal) var(--ms-ease);
		transition-delay: calc(var(--rd, 0) * 80ms);
		animation: ms-safety 0s linear 3.2s forwards;
	}
	html.js [data-reveal].is-in { opacity: 1; transform: none; animation: none; }

	html.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(12% 8% 12% 8%); transition: clip-path 1.2s var(--ms-ease-expo); }
	html.js [data-reveal="clip"] img { transform: scale(1.14); transition: transform 1.6s var(--ms-ease-expo); }
	html.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
	html.js [data-reveal="clip"].is-in img { transform: scale(1); }

	/* Titres ligne par ligne + mise au point « calque » */
	html.js [data-lines] .ms-line > span {
		transform: translateY(108%);
		transition: transform 1s var(--ms-ease-expo);
		transition-delay: calc(var(--i, 0) * 90ms + var(--lines-delay, 0ms));
		animation: ms-safety 0s linear 3.2s forwards;
	}
	html.js [data-lines].is-in .ms-line > span { transform: none; animation: none; }
	html.js .ms-hud__title[data-lines] { filter: blur(8px); transition: filter 1.3s var(--ms-ease); animation: ms-safety 0s linear 3.4s forwards; }
	html.js .ms-hud__title[data-lines].is-in { filter: none; animation: none; }

	/* Contenu du premier hero : caché jusqu'à la fin de l'ouverture (JS pose .is-in), failsafe 3,4 s */
	html.js :is(.wp-block-post-content, main) > .ms-hud:first-child:not(.is-in) :is(.ms-hud__head > :not(.ms-hud__title), .ms-hud__links, .ms-hud__list, .ms-hud__index, .ms-hud__corner) {
		opacity: 0; transform: translateY(18px);
		animation: ms-safety 0s linear 3.4s forwards;
	}
	html.js :is(.wp-block-post-content, main) > .ms-hud:first-child.is-in :is(.ms-hud__head > :not(.ms-hud__title), .ms-hud__links, .ms-hud__list, .ms-hud__index, .ms-hud__corner) {
		transition: opacity 1s var(--ms-ease), transform 1s var(--ms-ease);
	}
	html.js :is(.wp-block-post-content, main) > .ms-hud:first-child.is-in .ms-hud__head > :nth-child(2) { transition-delay: .35s; }
	html.js :is(.wp-block-post-content, main) > .ms-hud:first-child.is-in .ms-hud__head > :nth-child(3) { transition-delay: .45s; }
	html.js :is(.wp-block-post-content, main) > .ms-hud:first-child.is-in .ms-hud__head > :nth-child(4) { transition-delay: .55s; }
	html.js :is(.wp-block-post-content, main) > .ms-hud:first-child.is-in .ms-hud__head > :nth-child(n+5) { transition-delay: .65s; }
	html.js :is(.wp-block-post-content, main) > .ms-hud:first-child.is-in :is(.ms-hud__links, .ms-hud__list) { transition-delay: .8s; }
	html.js :is(.wp-block-post-content, main) > .ms-hud:first-child.is-in :is(.ms-hud__index, .ms-hud__corner) { transition-delay: 1s; }

	/* Ken Burns à l'arrivée du hero */
	html.js :is(.wp-block-post-content, main) > .ms-hud:first-child.is-in > .ms-hud__media img, html.js .ms-stories.is-ready .ms-story.is-active .ms-hud__media img { animation: ms-kenburns 2.4s var(--ms-ease-expo) both; }

	/* Filets qui se tracent (hero : après l'ouverture ; ailleurs : au reveal) */
	html.js :is(.wp-block-post-content, main) > .ms-hud:first-child:not(.is-in) .ms-hudlink__rule::before { transform: scaleX(0); animation: ms-safety 0s linear 3.4s forwards; }
	html.js :is(.wp-block-post-content, main) > .ms-hud:first-child.is-in .ms-hudlink__rule::before { transition: transform 1.1s var(--ms-ease-expo) .9s, opacity var(--ms-d) var(--ms-ease); }

	/* Parallaxe hero + intensification du voile (scroll-driven) */
	@supports (animation-timeline: scroll()) {
		:is(.wp-block-post-content, main) > .ms-hud:first-child > .ms-hud__media[data-parallax] { animation: ms-parallax linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
		@keyframes ms-parallax { from { transform: translateY(0); } to { transform: translateY(14%); } }
		:is(.wp-block-post-content, main) > .ms-hud:first-child > .ms-hud__inner { animation: ms-hud-out linear both; animation-timeline: view(); animation-range: exit 10% exit 80%; }
		@keyframes ms-hud-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6%); } }
	}

	/* Bandeau lié au scroll */
	@supports (animation-timeline: view()) {
		.ms-marquee__track { animation: ms-marquee linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
		@keyframes ms-marquee { from { transform: translateX(4%); } to { transform: translateX(-38%); } }
		.ms-footer__word { animation: ms-word-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
		@keyframes ms-word-rise { from { transform: translateY(36%); opacity: .2; } to { transform: none; opacity: 1; } }
	}

	/* Stories : fondu enchaîné */
	html.js .ms-stories .ms-story { transition: opacity 1.1s var(--ms-ease), visibility 1.1s; }
	html.js .ms-stories .ms-story:not(.is-active) { transition-delay: .15s; }
	html.js .ms-stories.is-ready .ms-story.is-active .ms-hud__head > * { animation: ms-fade-up 1s var(--ms-ease) both; }
	html.js .ms-stories.is-ready .ms-story.is-active .ms-hud__head > :nth-child(2) { animation-delay: .1s; }
	html.js .ms-stories.is-ready .ms-story.is-active .ms-hud__head > :nth-child(3) { animation-delay: .2s; }
	html.js .ms-stories.is-ready .ms-story.is-active .ms-hud__head > :nth-child(n+4) { animation-delay: .3s; }
	html.js .ms-stories__bars i.is-on::after { animation: ms-bar-fill var(--dur, 7000ms) linear both; }
	html.js .ms-stories.is-paused .ms-stories__bars i.is-on::after { animation-play-state: paused; }

	/* Menu : rideau + cascade */
	.ms-menu[open] { animation: ms-menu-in .8s var(--ms-ease-expo) both; }
	@keyframes ms-menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
	.ms-menu[open] .ms-menu__list a { animation: ms-menu-link .9s var(--ms-ease-expo) both; animation-delay: calc(var(--mi, 0) * 60ms + 180ms); }
	@keyframes ms-menu-link { from { transform: translateY(110%); } to { transform: none; } }
	.ms-menu.is-closing { animation: ms-menu-out .5s var(--ms-ease-io) both; }
	@keyframes ms-menu-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }

	/* Barre mobile, header */
	.ms-header.is-scrolled { transition: transform .55s var(--ms-ease), color .4s var(--ms-ease); }

	/* ---------- Transitions de page (cross-document) ---------- */
	@view-transition { navigation: auto; }
	::view-transition-old(root) { animation: ms-vt-out .6s var(--ms-ease-io) both; }
	::view-transition-new(root) { animation: ms-vt-in .8s var(--ms-ease-expo) both; }
	::view-transition-group(ms-header) { animation-duration: .6s; }
	@keyframes ms-vt-out { to { opacity: 0; transform: translateY(-2.5%); } }
	@keyframes ms-vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
	body.ms-no-vt { view-transition-name: none; }

	/* ---------- Ouverture « à travers le logo » (chorégraphie pilotée par site.js) ---------- */
	html.ms-first .ms-loader { animation: ms-loader-out .5s ease 7s forwards; }
	html.ms-first .ms-loader__hud { opacity: 0; transition: opacity .9s var(--ms-ease) .2s; }
	html.ms-first .ms-loader:is(.has-svg, .is-plain) .ms-loader__hud { opacity: 1; }
	html.ms-first .ms-loader.is-zoom .ms-loader__hud, html.ms-first .ms-loader.is-lift .ms-loader__hud { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ms-ease), transform .7s var(--ms-ease); }
	html.ms-first .ms-loader.has-svg .ms-loader__word { display: none; }
	/* Repli sans photo : le mot monte, puis le rideau se lève */
	html.ms-first .ms-loader:not(.has-svg) .ms-loader__word { opacity: 0; transform: translateY(18%); }
	html.ms-first .ms-loader.is-plain.is-rise .ms-loader__word { opacity: 1; transform: none; transition: opacity .8s var(--ms-ease), transform 1.1s var(--ms-ease-expo); }
	html.ms-first .ms-loader.is-lift { clip-path: inset(0 0 100% 0); transition: clip-path .85s var(--ms-ease-io); }
	html.ms-first .ms-loader.is-done { display: none; }

	/* Photo du hero : légèrement avancée pendant l'ouverture, contre-zoom pendant le travelling */
	html.ms-first :is(.wp-block-post-content, main) > .ms-hud:first-child > .ms-hud__media picture { display: block; transform: scale(1.16); filter: brightness(1.32) saturate(1.06); }
	html.ms-intro-open :is(.wp-block-post-content, main) > .ms-hud:first-child > .ms-hud__media picture { display: block; transform: none; filter: none; transition: transform 2.8s var(--ms-ease-expo), filter 1.6s var(--ms-ease) .2s; }
	html.ms-intro-open :is(.wp-block-post-content, main) > .ms-hud:first-child.is-in > .ms-hud__media img { animation: none; }
	/* Voile du hero retiré pendant l'ouverture : la photo reste lumineuse dans les lettres */
	html.ms-first :is(.wp-block-post-content, main) > .ms-hud:first-child > .ms-hud__scrim { opacity: 0; }
	html.ms-intro-open :is(.wp-block-post-content, main) > .ms-hud:first-child > .ms-hud__scrim { opacity: 1; transition: opacity 1.4s var(--ms-ease) .45s; }

	/* Header : entre avec le contenu du hero */
	html.ms-first:not(.ms-lift) .ms-header { opacity: 0; transform: translateY(-14px); }
	html.ms-first.ms-lift .ms-header { transition: opacity .9s var(--ms-ease) .3s, transform 1s var(--ms-ease-expo) .3s, color .4s var(--ms-ease); }

	/* Failsafes du hero repoussés tant que l'ouverture joue (JS : fin au plus tard à 6,5 s) */
	html.ms-first:not(.ms-lift) :is(.wp-block-post-content, main) > .ms-hud:first-child :is(.ms-hud__title[data-lines], [data-lines] .ms-line > span, .ms-hud__head > :not(.ms-hud__title), .ms-hud__links, .ms-hud__list, .ms-hud__index, .ms-hud__corner) { animation-delay: 6.8s; }
	html.ms-first:not(.ms-lift) :is(.wp-block-post-content, main) > .ms-hud:first-child .ms-hudlink__rule::before { animation-delay: 6.8s; }
}

/* Sans JS : rien ne doit rester caché. */
html:not(.js) .ms-loader { display: none !important; }