/* ==========================================================================
   RFE — mouvement
   À charger après rfe-ui.css. Trois règles :
   1. rien ne bouge sans raison (un chiffre qui monte, une barre qui se remplit…) ;
   2. tout est coupé pour les personnes qui ont demandé « réduire les animations » ;
   3. pas de flou, jamais.
   Le script rfe-motion.js ajoute les classes .in, .is-split, .has-indicator, .rows-in.
   ========================================================================== */

:root { --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ── Passage d'une page à l'autre : fondu net, la barre du haut reste en place ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: var(--ease-out); }
  .navbar, .header { view-transition-name: rfe-nav; }
}

/* ── Barre du haut : le trait fin n'apparaît qu'une fois la page défilée ── */
html.js-motion .navbar, html.js-motion .header { border-bottom-color: transparent; transition: border-color 0.3s; }
html.js-motion .navbar.is-scrolled, html.js-motion .header.is-scrolled { border-bottom-color: var(--border); }

/* ── Titres : les mots montent un à un derrière un masque ── */
html.js-motion [data-split]:not(.is-split) { visibility: hidden; }
/* Filet de sécurité : si le script ne charge pas, le titre se montre quand même au bout de 2,5 s */
html.js-motion:not(.rv-ready) [data-split]:not(.is-split) { animation: splitFail 0s 2.5s forwards; }
@keyframes splitFail { to { visibility: visible; } }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.12em 0.05em 0.2em; margin: -0.12em -0.05em -0.2em; }
.wi { display: inline-block; animation: wordUp 0.95s cubic-bezier(0.2, 0.85, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 75ms + 60ms); }
@keyframes wordUp { from { transform: translateY(108%); } to { transform: none; } }

/* ── Le reste du haut de page suit, dans l'ordre de lecture ── */
html.js-motion [data-enter] { animation: enterUp 0.9s var(--ease-out) both; animation-delay: var(--hd, 0.5s); }
[data-enter="1"] { --hd: 0.55s; }
[data-enter="2"] { --hd: 0.7s; }
[data-enter="3"] { --hd: 0.85s; }
@keyframes enterUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Révélation au défilement : réservée aux contenus qui comptent (cartes, tuiles, lignes) ── */
html.js-motion [data-reveal]:not(.in) { opacity: 0; transform: translateY(24px); }
html.js-motion [data-reveal="left"]:not(.in)  { transform: translateX(-40px); }
html.js-motion [data-reveal="right"]:not(.in) { transform: translateX(40px); }
html.js-motion [data-reveal="row"]:not(.in)   { transform: translateY(10px); }
/* Sur petit écran les tuiles sont empilées : un décalage latéral ferait déborder la page, on monte depuis le bas */
@media (max-width: 720px) {
  html.js-motion [data-reveal="left"]:not(.in), html.js-motion [data-reveal="right"]:not(.in) { transform: translateY(24px); }
}
html.js-motion [data-reveal] { transition: opacity 0.8s var(--ease-out) var(--d, 0ms), transform 0.8s var(--ease-out) var(--d, 0ms); }
html.js-motion [data-reveal="row"] { transition-duration: 0.55s; }
/* Filet de sécurité : si le script ne charge pas, tout se montre tout seul */
html.js-motion:not(.rv-ready) [data-reveal]:not(.in) { animation: rvFail 0s 2.5s forwards; }
@keyframes rvFail { to { opacity: 1; transform: none; } }

/* ── Coches des tuiles : elles se dessinent l'une après l'autre ── */
html.js-motion.rv-ready .split-features li svg * { stroke-dasharray: 40; stroke-dashoffset: 40; }
html.js-motion .split-panel.in .split-features li svg * { animation: drawStroke 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: calc(var(--d, 0ms) + 0.55s + var(--k, 0) * 0.12s); }
.split-features li:nth-child(1) { --k: 0; } .split-features li:nth-child(2) { --k: 1; } .split-features li:nth-child(3) { --k: 2; }
.split-features li:nth-child(4) { --k: 3; } .split-features li:nth-child(5) { --k: 4; }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }

/* ── Barres de places : elles se remplissent quand la carte apparaît ── */
/* L'état final est écrit explicitement (inset(0)) : un navigateur n'anime pas entre « aucun masque » et un masque. */
html.js-motion.rv-ready .tournoi-card .places-fill { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-out) 0.45s; }
html.js-motion.rv-ready .tournoi-card:not(.in) .places-fill { clip-path: inset(0 100% 0 0); }

/* ── Compteurs : la largeur finale est réservée, les chiffres ne font pas bouger la page ── */
.count { display: inline-block; position: relative; font-variant-numeric: tabular-nums; }
.count-ghost { opacity: 0; }
.count-live { position: absolute; left: 0; right: 0; top: 0; text-align: inherit; white-space: nowrap; }

/* ── Onglets : une pastille noire glisse de l'un à l'autre ── */
.has-indicator { position: relative; }
.has-indicator > .tab-btn, .has-indicator > .ea-tab { position: relative; z-index: 1; }
.has-indicator > .tab-btn.active, .has-indicator > .ea-tab.active { background: transparent; }
.tab-indicator {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; pointer-events: none;
  border-radius: var(--r-pill); background: var(--ink);
  transition: transform 0.5s cubic-bezier(0.3, 0.9, 0.3, 1), width 0.5s cubic-bezier(0.3, 0.9, 0.3, 1), height 0.3s;
}
.tab-indicator.no-anim { transition: none; }

/* ── Tableau : les lignes arrivent en cascade (au chargement et au changement d'onglet, pas à chaque lettre tapée) ── */
@keyframes rowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rows-in > tr { animation: rowIn 0.5s var(--ease-out) both; }
.rows-in > tr:nth-child(1) { animation-delay: 0s; }      .rows-in > tr:nth-child(2) { animation-delay: 0.03s; }
.rows-in > tr:nth-child(3) { animation-delay: 0.06s; }   .rows-in > tr:nth-child(4) { animation-delay: 0.09s; }
.rows-in > tr:nth-child(5) { animation-delay: 0.12s; }   .rows-in > tr:nth-child(6) { animation-delay: 0.15s; }
.rows-in > tr:nth-child(7) { animation-delay: 0.18s; }   .rows-in > tr:nth-child(8) { animation-delay: 0.21s; }
.rows-in > tr:nth-child(9) { animation-delay: 0.24s; }   .rows-in > tr:nth-child(10) { animation-delay: 0.27s; }
.rows-in > tr:nth-child(n+11) { animation-delay: 0.3s; }

/* ── Boutons : un petit enfoncement au clic, une flèche qui avance au survol ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-btn, .discord-btn, .btn-discord-big, .btn-discord, .btn-submit, .hero-btn-secondary, .btn-soft,
  .nav-discord, .nav-back, .nav-profile, .jeu-btn, .tab-btn, .ea-tab {
    transition: background-color 0.15s, color 0.15s, transform 0.22s var(--ease-out);
  }
  .hero-btn:active, .discord-btn:active, .btn-discord-big:active, .btn-discord:active, .btn-submit:active,
  .hero-btn-secondary:active, .btn-soft:active, .nav-discord:active, .nav-back:active, .nav-profile:active,
  .jeu-btn:active, .tab-btn:active, .ea-tab:active { transform: scale(0.96); }
  .hero-btn-secondary svg, .link-more svg, .nav-back svg { transition: transform 0.25s var(--ease-out); }
  .hero-btn-secondary:hover svg, .link-more:hover svg { transform: translateX(3px); }
  .nav-back:hover svg { transform: translateX(-3px); }
}