/* Motion. Everything that moves is gated on prefers-reduced-motion; without JS
   nothing is hidden. Ambient loops are slow, short-lived and paused off screen. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Micro-interactions */
  a, .nav-toggle { transition: color .3s ease, border-color .3s ease, box-shadow .3s ease, text-shadow .3s ease; }
  nav a::after { transition: transform .45s var(--ease); }
  .site-header::before { transition: opacity .45s ease; }
  .card::after, .card-icon { transition: opacity .45s ease, filter .45s ease; }
  .contact-link > span:last-child, .nav-contact span[aria-hidden] { transition: transform .35s var(--ease); }
  .contact-link:hover > span:last-child, .nav-contact:hover span[aria-hidden] { transform: translate(2px, -2px); }
  .js .media img { transition: opacity 1.2s ease; }
  .js-enabled nav.is-open { animation: menu-in .28s var(--ease); }

  /* Hero entrance (pure CSS, so the first paint never flashes) */
  .hud-readout, .hero-copy, .scroll-cue { animation: rise 1s var(--ease) both; }
  .hero-copy { animation-delay: .1s; }
  .scroll-cue { animation-delay: .5s; }
  .tagline { animation: neon-on 1.6s linear .5s both; }

  /* Hero ambience */
  .wm-cyan, .wm-magenta, .wm-base { animation: glitch-layer 7s steps(1, end) 2.4s infinite; }
  .wm-cyan { --gx: -7px; --gy: -1px; }
  .wm-magenta { --gx: 6px; --gy: 2px; animation-name: glitch-layer-alt; }
  .wm-base { animation-name: glitch-base; }
  .led { animation: flicker 5s linear infinite; }
  .hero-floor::before { animation: floor-scroll 12s linear infinite; }
  .cue-line::after { animation: cue-run 2.8s var(--ease) infinite; }
  .hero.is-offscreen *, .hero.is-offscreen *::before, .hero.is-offscreen *::after { animation-play-state: paused; }

  /* Neon section indices hum on and off very rarely. */
  .section-index { animation: flicker 9s linear infinite; }

  /* Scroll reveal (class added by main.js, only below the first screen) */
  .reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .9s var(--ease) var(--reveal-delay, 0ms), transform .9s var(--ease) var(--reveal-delay, 0ms);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
  .glitch.reveal.is-visible { animation: glitch-text .55s steps(1, end) calc(var(--reveal-delay, 0ms) + .25s) 1; }
}

@keyframes rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

/* Neon tube powering on: a few uneven blinks, then steady. */
@keyframes neon-on {
  0%, 8%, 14%, 26% { opacity: .15; text-shadow: none; }
  6%, 11%, 20%, 34%, 100% { opacity: 1; }
}
@keyframes flicker {
  0%, 91%, 93.5%, 96%, 100% { opacity: 1; }
  92%, 95% { opacity: .35; }
}

/* Wordmark glitch: ~0.3s burst every 7s. Colour layers slice and slip, base jitters. */
@keyframes glitch-layer {
  0%, 92%, 100% { transform: translate(-2px, 0); clip-path: none; opacity: .75; }
  93% { transform: translate(var(--gx), var(--gy)); clip-path: inset(12% 0 58% 0); opacity: 1; }
  94.5% { transform: translate(calc(var(--gx) * -.6), 0); clip-path: inset(62% 0 8% 0); }
  96% { transform: translate(var(--gx), 0); clip-path: inset(34% 0 40% 0); }
}
@keyframes glitch-layer-alt {
  0%, 92%, 100% { transform: translate(2px, 1px); clip-path: none; opacity: .75; }
  93% { transform: translate(var(--gx), var(--gy)); clip-path: inset(48% 0 22% 0); opacity: 1; }
  94.5% { transform: translate(calc(var(--gx) * -.8), 0); clip-path: inset(6% 0 70% 0); }
  96% { transform: translate(var(--gx), 0); clip-path: inset(72% 0 4% 0); }
}
@keyframes glitch-base {
  0%, 92.5%, 97%, 100% { transform: none; }
  93.5% { transform: translateX(2px) skewX(-4deg); }
  95% { transform: translateX(-2px); }
}

/* Heading glitch on reveal: an RGB split and two slices, then still. */
@keyframes glitch-text {
  0% { text-shadow: -3px 0 var(--magenta), 3px 0 var(--cyan); clip-path: inset(0 0 55% 0); transform: translateX(-3px); }
  20% { text-shadow: 3px 0 var(--magenta), -3px 0 var(--cyan); clip-path: inset(45% 0 0 0); transform: translateX(3px); }
  40% { text-shadow: -2px 0 var(--magenta), 2px 0 var(--cyan); clip-path: none; transform: none; }
  60%, 100% { text-shadow: none; clip-path: none; transform: none; }
}

@keyframes floor-scroll { to { background-position: 0 64px, 0 0; } }
@keyframes cue-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Safety net for anything that slips through. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}