/* Toisé — mouvement : états d’entrée au scroll, curseur, réduction de mouvement.
   Règle d’or : rien n’est masqué si le JS échoue (.js absent) ou si l’utilisateur demande moins de mouvement. */

@keyframes rv { from { opacity: 0; transform: translateY(28px); } }
@keyframes wi { from { transform: translateY(125%); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes letter { from { opacity: 0; transform: translateY(60%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes navin { from { transform: translateY(-100%); } }

/* structure du découpage en mots (masque de révélation) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .04em .18em; margin: -.1em -.04em -.18em; }
.wi { display: inline-block; will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  .js:not(.no-anim) [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }
  .js:not(.no-anim) [data-reveal].is-in { animation: rv 1s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms); }

  .js:not(.no-anim) [data-split]:not(.is-in) .wi { transform: translateY(125%); }
  .js:not(.no-anim) [data-split].is-in .wi { animation: wi 1.1s var(--ease-out) backwards; animation-delay: calc(var(--d, 0ms) + var(--wi, 0) * 45ms); }

  .js:not(.no-anim) .rule:not(.is-in) { transform: scaleX(0); }
  .js:not(.no-anim) .rule.is-in { animation: draw 1.6s var(--ease-out) backwards; }

  .js:not(.no-anim) [data-wordmark]:not(.is-in) span { opacity: 0; transform: translateY(60%); }
  .js:not(.no-anim) [data-wordmark].is-in span { animation: letter 1.3s var(--ease-out) backwards; animation-delay: calc(var(--k, 0) * 60ms); }

  .js:not(.no-anim) .nav { animation: navin .9s var(--ease-out) .05s backwards; }
  .js:not(.no-anim) .hero__bg { animation: fade 1.8s ease .1s backwards; }
}

/* ── Curseur : anneau qui suit avec inertie, se gonfle sur les éléments interactifs ── */
.cursor { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cursor.is-on { opacity: 1; }
.cursor__pos { position: absolute; left: 0; top: 0; will-change: transform; }
.cursor__pos i { display: block; border-radius: 50%; }
[data-ring] i {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid var(--indigo);
  transition: transform .45s var(--ease-out), background-color .3s, border-color .3s;
}
[data-dot] i { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--indigo); transition: transform .3s var(--ease-out), background-color .3s; }
.cursor.is-hover [data-ring] i { transform: scale(1.7); background: rgba(83, 58, 253, .08); border-color: var(--lavender); }
.cursor.is-hover [data-dot] i { transform: scale(0); }
.cursor.is-down [data-ring] i { transform: scale(.78); }
.cursor.is-hover.is-down [data-ring] i { transform: scale(1.35); }
.cursor.is-inv [data-ring] i { border-color: rgba(255, 255, 255, .9); }
.cursor.is-inv [data-dot] i { background: #fff; }
.cursor.is-inv.is-hover [data-ring] i { background: rgba(255, 255, 255, .14); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  .marquee__track { transform: none !important; }
  .cursor { display: none; }
}