/* ==========================================================================
   MOTION
   Scroll reveals, text masks and counters. Every effect is additive: the page
   is fully readable with animations disabled or JavaScript unavailable.
   ========================================================================== */

/* Base reveal — elements start hidden only once JS confirms it can observe. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--d-reveal) var(--ease-out),
    transform var(--d-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Staggered children */
html.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--d-reveal) var(--ease-out),
    transform var(--d-reveal) var(--ease-out);
}
html.js [data-reveal-group].is-revealed > * {
  opacity: 1;
  transform: none;
}
html.js [data-reveal-group].is-revealed > *:nth-child(1)  { transition-delay: 0ms; }
html.js [data-reveal-group].is-revealed > *:nth-child(2)  { transition-delay: 70ms; }
html.js [data-reveal-group].is-revealed > *:nth-child(3)  { transition-delay: 140ms; }
html.js [data-reveal-group].is-revealed > *:nth-child(4)  { transition-delay: 210ms; }
html.js [data-reveal-group].is-revealed > *:nth-child(5)  { transition-delay: 280ms; }
html.js [data-reveal-group].is-revealed > *:nth-child(6)  { transition-delay: 350ms; }
html.js [data-reveal-group].is-revealed > *:nth-child(7)  { transition-delay: 420ms; }
html.js [data-reveal-group].is-revealed > *:nth-child(8)  { transition-delay: 490ms; }

/* Text mask reveal — headline lines slide up from behind a clip edge. */
.mask-line {
  display: block;
  overflow: hidden;
}
.mask-line > span {
  display: block;
  transform: translateY(100%);
  transition: transform 1s var(--ease-tech);
  transition-delay: var(--mask-delay, 0ms);
}
html:not(.js) .mask-line > span { transform: none; }
.is-revealed .mask-line > span,
.mask-line.is-revealed > span { transform: none; }

/* Line-drawing utility for SVG technical graphics */
.draw-line {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.6s var(--ease-tech);
  transition-delay: var(--draw-delay, 0ms);
}
.is-revealed .draw-line { stroke-dashoffset: 0; }
html:not(.js) .draw-line { stroke-dashoffset: 0; }

/* Numeric counters hold their layout while counting */
.counter { font-variant-numeric: tabular-nums; }

/* Scan sweep across technical scene illustrations */
.scene__scan {
  animation: scene-scan 9s var(--ease-in-out) infinite;
  transform-box: fill-box;
}
@keyframes scene-scan {
  0%, 100% { transform: translateY(40px); opacity: 0; }
  10%      { opacity: 0.5; }
  50%      { transform: translateY(410px); opacity: 0.5; }
  90%      { opacity: 0; }
}

/* Subtle parallax layer — translated by main.js on scroll */
.parallax { will-change: transform; }

/* Nothing moves when the visitor asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .mask-line > span { transform: none !important; transition: none !important; }
  .draw-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .parallax { transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}