/* =============================================================================
   motion.css — reveal, hairline draw, count-up hooks, hover transitions.
   Principle: an instrument settling. Straight paths, decelerate, stop dead.
   No bounce, no overshoot, no parallax, nothing moves that is not a state change.
   ============================================================================= */
/* Only when JS is present (site.js adds .js to <html>); without it everything is simply visible. */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; } .reveal[data-delay="2"] { transition-delay: 160ms; } .reveal[data-delay="3"] { transition-delay: 240ms; }

/* A hairline that draws left to right when it enters the viewport */
.draw { position: relative; }
.js .draw::after { content: ""; position: absolute; left: 0; bottom: 0; height: var(--rule); width: 0; background: var(--color-border-strong); transition: width var(--dur-4) var(--ease-out); }
.js .draw.is-in::after { width: 100%; }

/* Count-up: JS sets textContent from data-to; CSS only ensures tabular figures so width is stable */
[data-count] { font-variant-numeric: tabular-nums; }

/* Loading state: the split core separates along its kerf by one offset unit and returns, once */
.loader { width: 42px; height: 49px; }
.loader .half { transition: transform var(--dur-3) var(--ease-in-out); }
.loader.is-loading .half--l { animation: kerf-l 1.2s var(--ease-in-out) 1; }
.loader.is-loading .half--r { animation: kerf-r 1.2s var(--ease-in-out) 1; }
@keyframes kerf-l { 0%,100% { transform: none } 50% { transform: translate(-3px, -3px) } }
@keyframes kerf-r { 0%,100% { transform: none } 50% { transform: translate(3px, 3px) } }

/* Image/video: hard cuts only. No cross-dissolve longer than 8 frames (≈130 ms at 60 fps). */
.crossfade { transition: opacity 130ms linear; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .draw::after { width: 100%; transition: none; }
}