/* ==========================================================================
   Utilities + motion system
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mb-6 { margin-bottom: var(--s-6); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.text-signal { color: var(--c-signal); }

/* --------------------------------------------------------------------------
   Motion: elements start hidden ONLY when JS has confirmed motion is allowed
   (html.motion-ok is set by animations.js). Without JS, or with reduced
   motion, everything is visible immediately.
   -------------------------------------------------------------------------- */

.motion-ok [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ok [data-reveal="fade"] {
  transform: none;
}

.motion-ok [data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1000ms var(--ease-in-out);
}

.motion-ok [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.motion-ok [data-reveal="mask"].is-visible {
  clip-path: inset(0 0 0 0);
}

/* Measurement line: draws from 0 to full width */
.motion-ok [data-draw-line] {
  --progress: 0;
}

.motion-ok [data-draw-line].is-visible {
  --progress: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}