/* ============================================================
   ANIMATIONS — keyframes, reveal states, reduced-motion policy
   ============================================================ */

/* ------------------------------------------------------------
   Keyframes
   ------------------------------------------------------------ */
@keyframes grain-shift {
  0%,100% { transform: translate(0, 0); }
  10%  { transform: translate(-4%, -3%); }
  30%  { transform: translate(3%, -5%); }
  50%  { transform: translate(-2%, 4%); }
  70%  { transform: translate(5%, 2%); }
  90%  { transform: translate(-3%, 3%); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.25; transform: scale(0.72); }
}

@keyframes scroll-hint {
  0%   { transform: translateY(-100%); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------
   Split-text line reveal
   Markup: <span class="line"><span data-split>Text</span></span>
   JS adds .is-in on the section; CSS handles the mask slide.
   ------------------------------------------------------------ */
[data-split] {
  display: inline-block;
  transform: translateY(110%) rotate(4deg);
  opacity: 0;
  transition:
    transform 1.05s var(--e-out),
    opacity 0.7s var(--e-out);
  will-change: transform;
}
.is-in [data-split],
[data-split].is-in {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
}
/* Stagger consecutive split lines within one heading */
.is-in .line:nth-child(2) [data-split] { transition-delay: 0.09s; }
.is-in .line:nth-child(3) [data-split] { transition-delay: 0.18s; }
.sec-head__title.is-in span:nth-child(2) { transition-delay: 0.1s; }

/* ------------------------------------------------------------
   Generic reveal
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.85s var(--e-out),
    transform 0.85s var(--e-out);
  will-change: transform, opacity;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Stagger children within a revealed container */
[data-reveal].is-in .stat:nth-child(1) { transition-delay: 0.00s; }
[data-reveal].is-in .stat:nth-child(2) { transition-delay: 0.08s; }
[data-reveal].is-in .stat:nth-child(3) { transition-delay: 0.16s; }
[data-reveal].is-in .stat:nth-child(4) { transition-delay: 0.24s; }

/* ------------------------------------------------------------
   Project schematic line-draw
   ------------------------------------------------------------ */
.proj__svg [data-draw] {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}
.proj.is-drawn .proj__svg [data-draw] {
  animation: draw-line 1.4s var(--e-out) forwards;
  animation-delay: calc(var(--i, 0) * 0.045s);
}

/* Process sheet redraw */
.sheet__draw [data-draw] {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  animation: draw-line 0.9s var(--e-out) forwards;
  animation-delay: calc(var(--i, 0) * 0.05s);
}

/* ------------------------------------------------------------
   Hero entrance — staged by JS after preloader completes
   ------------------------------------------------------------ */
.hero__eyebrow,
.hero__hud,
.hero__scroll {
  opacity: 0;
  transition: opacity 1s var(--e-out) 0.5s;
}
body.is-ready .hero__eyebrow,
body.is-ready .hero__hud,
body.is-ready .hero__scroll { opacity: 1; }

body.is-ready .hero__title [data-split] { transform: none; opacity: 1; }
.hero__title .line:nth-child(1) [data-split] { transition-delay: 0.15s; }
.hero__title .line:nth-child(2) [data-split] { transition-delay: 0.27s; }
.hero__title .line:nth-child(3) [data-split] { transition-delay: 0.39s; }

/* ------------------------------------------------------------
   REDUCED MOTION
   Everything decorative stops; content becomes immediately
   visible so nothing is stuck at opacity:0.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .grain { animation: none; }

  [data-reveal],
  [data-split] {
    opacity: 1 !important;
    transform: none !important;
  }

  .proj__svg [data-draw],
  .sheet__draw [data-draw] {
    stroke-dashoffset: 0 !important;
  }

  .step { opacity: 1; }
  .cursor { display: none !important; }
  body.has-cursor, body.has-cursor * { cursor: auto !important; }
}