/* ============================================================================
   motion-tokens.css — tokens de mouvement canoniques (séquence site-storyboard)
   Projet : Le Capital Client / Sillage — brandé depuis MARQUE.md + storyboard.
   Noms de variables NON négociables.
   ============================================================================ */

:root {
  /* ---- EASINGS — la "patte caméra" ---- */
  --ease-out-expo: cubic-bezier(.22, 1, .36, 1);    /* DÉFAUT : entrées, reveals, stagger, split-text */
  --ease-in-out-cine: cubic-bezier(.83, 0, .17, 1); /* transitions de scène, morphs, pins symétriques */

  /* ---- DURÉES ---- */
  --dur-instant: 120ms;
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 500ms;
  --dur-cine: 900ms;

  /* ---- RYTHME & PROFONDEUR ---- */
  --stagger: 60ms;
  --depth-perspective: 1200px;
  --blur-dissipate: 12px;      /* la traîne du sillage qui s'efface — SIGNATURE */

  /* ---- SIGNATURE & PALETTE PAR ACTE (brandé Sillage) ---- */
  --accent: #b0703a;           /* cuivre — l'éveil */
  --accent-clair: #d9a26b;
  --accent-profond: #8f5a2c;

  --ink: #1b2a41;              /* encre marine — le capital qui dort */
  --ink-nuit: #121c2c;         /* marine plus froid (S2, le creux) */
  --ivoire: #faf8f4;           /* la pleine lumière (Acte III) */
  --ivoire-doux: #f1ece2;

  --bg-acte-I: #1b2a41;
  --bg-acte-II: #121c2c;
  --bg-acte-III: #faf8f4;

  /* Couleur de fond courante — animée d'acte en acte (color-shift). */
  --bg-courant: var(--bg-acte-I);
  --texte-courant: var(--ivoire);

  /* Pointe vive de la comète : ivoire sur les actes sombres, cuivre profond sur
     l'ivoire de l'Acte III (sinon elle disparaîtrait dans le fond). */
  --fil-vif: #f5ecdc;
}

/* ============================================================================
   PRESET D'INTENSITÉ — premium (DÉFAUT « 25k »)
   Lenis + split-text + draw-svg + parallax, 1 pin/scrub PAR ACTE.
   GSAP+ScrollTrigger(+Lenis) en lazy. Pas de WebGL, pas d'horizontal-scroll.
   ============================================================================ */

/* ---- ÉTATS DE REVEAL (progressive enhancement) ----
   Le contenu critique n'est JAMAIS caché sans fallback no-JS. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not([data-critical]) {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* prefers-reduced-motion : tout reste visible et statique, quoi qu'il arrive. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }

  /* Le fil est dessiné d'emblée, sans tracé animé, et tout est déjà réveillé. */
  #fil-path { stroke-dashoffset: 0 !important; }
  #fil-pointe { opacity: 0 !important; }
  [data-sillage-wake] { --eveil: 1 !important; }
}

/* Filet de sécurité : si le JS n'a pas pu révéler un bloc (erreur, IO manqué),
   le contenu redevient visible au bout d'une seconde plutôt que de rester un
   trou blanc dans la page. Le mouvement est un bonus, jamais une condition
   d'affichage. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not([data-critical]) {
    animation: filet-visibilite 1ms linear 1.6s forwards;
  }
}
@keyframes filet-visibilite { to { opacity: 1; transform: none; } }