/* ==========================================================================
   NEON STRATA — mouvement
   Animations CSS courtes. Le défilement 3D est piloté par js/scroll-3d.js,
   qui pose la classe .ns-motion sur <html> quand il est actif : sans JS ou
   avec prefers-reduced-motion, tout reste dans son état final.
   ========================================================================== */

/* --- Glitch du logo au survol (seul glitch autorisé, 250 ms — §6) ------- */

@keyframes ns-glitch {
  0%   { filter: none; transform: none; clip-path: inset(0 0 0 0); }
  20%  { filter: drop-shadow(2px 0 var(--c-alert)) drop-shadow(-2px 0 var(--c-cyan-glow)); transform: translateX(-2px); clip-path: inset(10% 0 55% 0); }
  40%  { filter: drop-shadow(-2px 0 var(--c-alert)) drop-shadow(2px 0 var(--c-cyan-glow)); transform: translateX(2px);  clip-path: inset(60% 0 5% 0); }
  60%  { filter: drop-shadow(2px 0 var(--c-alert)) drop-shadow(-2px 0 var(--c-cyan-glow)); transform: translateX(-1px); clip-path: inset(30% 0 30% 0); }
  80%  { filter: drop-shadow(1px 0 var(--c-alert)) drop-shadow(-1px 0 var(--c-cyan-glow)); transform: none; clip-path: inset(0 0 0 0); }
  100% { filter: none; transform: none; clip-path: inset(0 0 0 0); }
}

.ns-logo:hover img,
.ns-logo:focus-visible img {
  animation: ns-glitch 250ms steps(1, end) 1;
}

/* --- Statut système : pulsation lente ---------------------------------- */

@keyframes ns-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.ns-dot {
  animation: ns-pulse 2.4s ease-in-out infinite;
}

/* --- Indicateur de défilement ------------------------------------------ */

@keyframes ns-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

.ns-hero__scroll svg {
  animation: ns-nudge 2s var(--ease-out) infinite;
}

/* --- États initiaux, uniquement quand le JS de mouvement tourne -------- */

.ns-motion .ns-hero__index,
.ns-motion .ns-hero__content p,
.ns-motion .ns-hero__actions {
  opacity: 0;
}

/* --- Lenis -------------------------------------------------------------- */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* --- Mouvement réduit --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ns-dot,
  .ns-hero__scroll svg,
  .ns-logo:hover img {
    animation: none;
  }
}