/* ==========================================================================
   MovieSport — ms-home.css (DA v2) : accueil et séquence signature.
   ========================================================================== */


/* ---------- Séquence Train / Explore / Progress / Repeat ---------- */
.ms-seq { position: relative; background: var(--ms-ink); color: var(--ms-bone); --fg: var(--ms-bone); --muted: rgb(242 237 228 / .78); --line: rgb(242 237 228 / .3); }
.ms-seq__stage { position: relative; }
.ms-act { position: relative; isolation: isolate; min-height: var(--ms-vh); display: grid; overflow: clip; }
.ms-act__media { position: absolute; inset: 0; z-index: -2; overflow: clip; }
.ms-act__media picture, .ms-act__media img { width: 100%; height: 100%; }
.ms-act__media img { object-fit: cover; object-position: var(--pos, 50% 50%); }
@media (max-width: 760px) { .ms-act__media img { object-position: var(--pos-m, var(--pos, 50% 50%)); } }
.ms-act__scrim {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(0deg, rgb(8 6 4 / .88) 0%, rgb(8 6 4 / .35) 46%, rgb(8 6 4 / .1) 70%),
		linear-gradient(90deg, rgb(8 6 4 / .45) 0%, rgb(8 6 4 / 0) 55%),
		linear-gradient(270deg, rgb(8 6 4 / .5) 0%, rgb(8 6 4 / 0) 45%),
		linear-gradient(180deg, rgb(8 6 4 / .45) 0%, rgb(8 6 4 / 0) 24%);
}
.ms-act__body {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
	grid-template-areas: ". text" "word word"; align-content: end; row-gap: clamp(20px, 4vh, 48px); column-gap: clamp(24px, 4vw, 72px);
	padding-top: calc(var(--ms-hh) + 12vh); padding-bottom: clamp(28px, 5vh, 64px);
}
.ms-act__num { font-family: var(--ms-f-mono); position: absolute; top: calc(var(--ms-hh) + clamp(16px, 6vh, 72px)); right: var(--ms-gut); font-size: .75rem; letter-spacing: .22em; }
.ms-act__word {
	grid-area: word; font-size: clamp(4.6rem, 19.5vw, 24rem); line-height: .78; letter-spacing: -.02em; white-space: nowrap;
	margin-bottom: -.06em; margin-left: -.03em; color: var(--ms-bone); overflow: clip; padding-top: .12em;
}
.ms-act__chars { display: inline-block; }
.ms-ch { display: inline-block; }
.ms-act__text { grid-area: text; display: grid; gap: 16px; }
.ms-act__title { font-size: clamp(1.8rem, 2.6vw, 2.6rem); line-height: 1.02; }
.ms-act__desc { color: var(--muted); }
.ms-act__text .ms-hudlink { margin-top: 10px; }
.ms-seq__index { display: none; font-family: var(--ms-f-mono); text-transform: uppercase; }
.ms-seq__count { display: none; font-family: var(--ms-f-mono); }

@media (max-width: 900px) {
	.ms-act__body { grid-template-columns: 1fr; grid-template-areas: "word" "text"; row-gap: 18px; padding-top: calc(var(--ms-hh) + 14vh); }
	.ms-act__word { font-size: clamp(4rem, 21vw, 12rem); margin-bottom: 0; }
}
@media (max-width: 760px) {
	/* Dégager la barre d'actions collante (.ms-dock) */
	.ms-act__body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* Mode épinglé (home.js) */
.ms-seq.is-pinned { height: calc(var(--ms-vh) * 4); }
.ms-seq.is-pinned .ms-seq__stage { position: sticky; top: 0; height: var(--ms-vh); overflow: clip; }
.ms-seq.is-pinned .ms-act { position: absolute; inset: 0; min-height: 0; z-index: 1; }
.ms-seq.is-pinned .ms-act.is-leaving { z-index: 2; }
.ms-seq.is-pinned .ms-act.is-active { z-index: 3; }
.ms-seq.is-pinned .ms-act:not(.is-active) .ms-act__body { pointer-events: none; }

.ms-seq.is-pinned .ms-act__media { clip-path: inset(100% 0 0 0); transition: clip-path 1.05s var(--ms-ease-expo); }
.ms-seq.is-pinned.is-reverse .ms-act__media { clip-path: inset(0 0 100% 0); }
.ms-seq.is-pinned .ms-act.is-active .ms-act__media,
.ms-seq.is-pinned .ms-act.is-leaving .ms-act__media { clip-path: inset(0 0 0 0); }
.ms-seq.is-pinned .ms-act.is-leaving .ms-act__media { transition: none; }
.ms-seq.is-pinned .ms-act__media img { transform: scale(1.16); transition: transform 1.5s var(--ms-ease-expo), filter 1s var(--ms-ease); }
.ms-seq.is-pinned .ms-act.is-active .ms-act__media img { transform: scale(1); }
.ms-seq.is-pinned .ms-act.is-leaving .ms-act__media img { transform: scale(.95); filter: brightness(.45); }

.ms-seq.is-pinned .ms-ch { transform: translateY(104%); transition: transform .95s var(--ms-ease-expo), opacity .6s var(--ms-ease); transition-delay: calc(var(--c, 0) * 28ms); }
.ms-seq.is-pinned .ms-act.is-active .ms-ch { transform: none; transition-delay: calc(var(--c, 0) * 48ms + 240ms); }
.ms-seq.is-pinned .ms-act.is-leaving .ms-ch { transform: translateY(-104%); opacity: 0; }
.ms-seq.is-pinned .ms-act.is-active .ms-act__word { animation: ms-halo 1.8s var(--ms-ease) .2s both; }
@keyframes ms-halo {
	from { text-shadow: 0 0 70px rgb(255 255 255 / .7), 0 0 18px rgb(255 255 255 / .5); }
	to { text-shadow: 0 0 0 rgb(255 255 255 / 0); }
}
.ms-seq.is-pinned .ms-act__text, .ms-seq.is-pinned .ms-act__num { opacity: 0; transform: translateY(22px); transition: opacity .5s var(--ms-ease), transform .7s var(--ms-ease); }
.ms-seq.is-pinned .ms-act.is-active .ms-act__text, .ms-seq.is-pinned .ms-act.is-active .ms-act__num { opacity: 1; transform: none; transition-delay: .5s; }

.ms-seq.is-pinned .ms-seq__index {
	display: block; position: absolute; z-index: 5; left: max(var(--ms-gut), calc((100% - var(--ms-max)) / 2 + var(--ms-gut)));
	top: calc(var(--ms-hh) + clamp(16px, 6vh, 72px)); list-style: none; padding: 4px 0 4px 28px;
	font-size: clamp(.7rem, .85vw, .82rem); letter-spacing: .22em; line-height: 2.05;
}
.ms-seq.is-pinned .ms-seq__index::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgb(242 237 228 / .25); }
.ms-seq.is-pinned .ms-seq__index::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ms-bone); transform-origin: top; transform: scaleY(var(--p, 0)); }
.ms-seq.is-pinned .ms-seq__index li { opacity: .35; transition: opacity .5s var(--ms-ease), transform .5s var(--ms-ease); }
.ms-seq.is-pinned .ms-seq__index li.is-on { opacity: 1; transform: translateX(6px); }
.ms-seq.is-pinned .ms-seq__count { display: block; position: absolute; z-index: 5; right: max(var(--ms-gut), calc((100% - var(--ms-max)) / 2 + var(--ms-gut))); bottom: clamp(24px, 4.4vh, 48px); font-size: .75rem; letter-spacing: .22em; }
.ms-seq.is-pinned .ms-act__num { display: none; }
@media (max-width: 760px) {
	.ms-seq.is-pinned .ms-seq__index { display: none; font-family: var(--ms-f-mono); text-transform: uppercase; }
	.ms-seq.is-pinned .ms-seq__count { top: calc(var(--ms-hh) + 20px); bottom: auto; }
}

/* Séquence : le mot géant et le texte gardent la même place d'un acte à l'autre */
.ms-act__title { min-height: 2lh; }
.ms-act__desc { min-height: 3lh; }
@media (max-width: 760px) { .ms-act__desc { min-height: 4lh; } }