/* ==========================================================================
   Extra Time — couche motion.
   Le système de base gère la couleur, la typo et la mise en page.
   Ce fichier ne gère que le mouvement : révélation typographique, scroll-telling,
   curseur, aimantation, défilé. Tout se désactive sous prefers-reduced-motion.
   ========================================================================== */

/* --- Courbes d'accélération partagées ------------------------------------ */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* --- Horloge de match ------------------------------------------------------ */
/* Le concept du site : le scroll est le match. La page démarre au coup d'envoi
   et se termine en temps additionnel, qui est le reste de la carrière du membre.
   Rendu façon panneau LED de stade, sans police supplémentaire : la trame de
   points est un dégradé répété posé par-dessus les chiffres. */
.matchclock {
  position: fixed; left: 1.6rem; bottom: 1.6rem; z-index: 45;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem .8rem;
  background: var(--ink-3);
  border: 2px solid var(--ink);
  font: 500 .74rem/1 var(--mono); letter-spacing: .06em;
  color: var(--led); font-variant-numeric: tabular-nums;
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), color .4s var(--ease-out);
}
/* Trame LED : de fins points sombres par-dessus le panneau. */
.matchclock::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(0, 0, 0, .55) 32%, transparent 33%);
  background-size: 3px 3px;
}
.mc-live { width: 6px; height: 6px; border-radius: 50%; background: var(--led); animation: mcBlink 2s steps(1, end) infinite; }
@keyframes mcBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .18; } }
.mc-extra { display: none; padding-left: .55rem; margin-left: .1rem; border-left: 1px solid rgba(255, 176, 0, .35); }

/* Temps additionnel : le panneau bascule en tableau du 4e arbitre. */
.matchclock.extra { background: var(--led); border-color: var(--ink); color: var(--ink); }
.matchclock.extra .mc-live { background: var(--ink); }
.matchclock.extra .mc-extra { display: inline-block; border-left-color: rgba(18, 18, 18, .35); font-weight: 700; }

/* L'horloge est un affichage, jamais une cible : elle ne doit pas intercepter
   un tap sur le contenu qu'elle survole. */
.matchclock { pointer-events: none; }

/* Dès que la mise en page s'empile, le bas de l'écran est occupé par le tableau
   de résultat : l'horloge remonte sous l'en-tête, qui est aussi la position
   d'une horloge de retransmission. */
@media (max-width: 1050px) {
  .matchclock { top: 88px; bottom: auto; left: 1rem; }
}

@media (max-width: 700px) {
  .matchclock { top: 74px; left: 1rem; padding: .4rem .65rem; font-size: .62rem; }
}

/* --- Barre de progression de lecture ------------------------------------- */
.scroll-progress { position: fixed; inset: 0 0 auto; z-index: 40; height: 3px; background: rgba(18, 18, 18, .12); pointer-events: none; }
.scroll-progress i { display: block; height: 100%; width: 0; background: var(--accent); transform-origin: left; transition: width .12s linear; }

/* --- Curseur personnalisé (pointeur fin uniquement) ----------------------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid var(--accent); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s, width .28s var(--ease-out), height .28s var(--ease-out), margin .28s var(--ease-out), background .28s, border-color .28s; }
.cursor.visible { opacity: 1; }
.cursor.hot { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(232, 72, 31, .14); border-color: var(--accent); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* --- Révélation typographique au mot ------------------------------------- */
/* Chaque mot est masqué par son conteneur puis remonte : la ligne se construit
   au lieu d'apparaître d'un bloc. */
[data-split] { visibility: hidden; }
[data-split].split-ready { visibility: visible; }
.line-mask { display: block; overflow: hidden; padding-bottom: .04em; }
.word { display: inline-block; transform: translateY(105%) rotate(2.5deg); opacity: 0; transition: transform .95s var(--ease-out), opacity .7s ease; will-change: transform; }
.split-in .word { transform: none; opacity: 1; }

/* --- Défilé de mots-clés -------------------------------------------------- */
.marquee { overflow: hidden; padding: 1.1rem 0; background: var(--ink); color: var(--paper); user-select: none; }
.marquee-track { display: flex; width: max-content; animation: marqueeSlide 38s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; padding-right: 2.5rem; font: 400 clamp(1.3rem, 2.4vw, 2.2rem)/1 var(--display); text-transform: uppercase; color: rgba(241, 238, 231, .82); white-space: nowrap; }
.marquee-track i { display: inline-block; width: 9px; height: 9px; margin: 0 2.2rem; background: var(--accent); }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeSlide { to { transform: translateX(-50%); } }

/* --- Scroll-telling du programme ------------------------------------------ */
.pillars-stage { margin-top: 5.5rem; display: grid; grid-template-columns: .34fr 1fr; gap: 4vw; align-items: start; }
.pillars-sticky { position: sticky; top: 26vh; display: flex; flex-direction: column; gap: 2.5rem; }
.giant-rank { display: flex; flex-direction: column; gap: .4rem; }
.giant-num { font: 400 clamp(6rem, 12vw, 13rem)/.85 var(--display); color: var(--accent); letter-spacing: -.02em; transition: transform .5s var(--ease-out), opacity .35s ease, filter .5s ease; }
.giant-label { font: 400 .62rem/1 var(--mono); letter-spacing: .18em; color: var(--t-low); transition: opacity .35s ease, transform .5s var(--ease-out); }
.giant-rank.swapping .giant-num { transform: translateY(-28px) scale(.94); opacity: 0; filter: blur(6px); }
.giant-rank.swapping .giant-label { transform: translateY(-10px); opacity: 0; }
.rank-track { display: flex; gap: .5rem; }
.rank-track i { width: 42px; height: 3px; background: var(--line-light); transition: background .45s var(--ease-out); }
.rank-track i.active { background: var(--accent); }

/* Le pilier hors focus s'efface : le regard suit le scroll. */
.pillar { transition: opacity .55s var(--ease-out), background .3s; }
.pillars-stage .pillar { opacity: .32; }
.pillars-stage .pillar.in-focus { opacity: 1; }
.pillars-stage .pillar .pillar-rank { opacity: 0; pointer-events: none; }

/* --- Aimantation des boutons ---------------------------------------------- */
[data-magnetic] { transition: transform .35s var(--ease-out), background .25s, color .25s; }
[data-magnetic].pulled { transition: transform .12s linear, background .25s, color .25s; }
[data-magnetic]:hover { transform: none; }


/* --- Cartes : élévation au survol ------------------------------------------ */
.value-card, .redline-grid article { transition: background .25s var(--ease-out), color .25s var(--ease-out); }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1050px) {
  .pillars-stage { grid-template-columns: 1fr; gap: 0; }
  .pillars-sticky { display: none; }
  .pillars-stage .pillar { opacity: 1; }
  .pillars-stage .pillar .pillar-rank { opacity: 1; }
}

@media (max-width: 700px) {
  .marquee { padding: 1rem 0; }
  .marquee-track i { margin: 0 1.4rem; }
  .marquee-track span { padding-right: 1.4rem; }
}

/* --- Accessibilité : tout le mouvement tombe -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .word { transform: none; opacity: 1; transition: none; }
  [data-split] { visibility: visible; }
  .marquee-track { animation: none; }
  .pillars-stage .pillar { opacity: 1; }
  .giant-num, .giant-label { transition: none; }
  .cursor { display: none; }
}