/* motion.css — all animation. Animate only transform & opacity. */

/* View Transitions (page navigation) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out var(--dur-2) var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in var(--dur-3) var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* Scroll reveal (JS toggles .is-in). Default hidden state kept subtle to protect LCP. */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); will-change: transform, opacity; }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-reveal="fade"] { transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-delay="4"] { transition-delay: 320ms; }
[data-reveal][data-delay="5"] { transition-delay: 400ms; }

/* Hero line reveal (cascade) */
.reveal-lines { }
.reveal-lines .line { display: block; overflow: hidden; }
.reveal-lines .line > span { display: block; transform: translateY(110%); transition: transform var(--dur-4) var(--ease); }
.reveal-lines.is-in .line > span { transform: none; }
.reveal-lines.is-in .line:nth-child(2) > span { transition-delay: 70ms; }
.reveal-lines.is-in .line:nth-child(3) > span { transition-delay: 140ms; }
.reveal-lines.is-in .line:nth-child(4) > span { transition-delay: 210ms; }

/* Parallax layers (JS sets --py) */
[data-parallax] { transform: translate3d(0, var(--py, 0), 0); will-change: transform; }

/* Magnetic button spring feel handled in JS via transform */

/* Counter shell */
.counter { font-variant-numeric: tabular-nums; }

/* Marquee (optional) */
.marquee { overflow: hidden; }
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: marquee 32s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Image clip reveal */
.clip-reveal { clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-5) var(--ease); }
.clip-reveal.is-in { clip-path: inset(0 0 0 0); }

/* SVG stroke draw */
.stroke-draw path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-5) var(--ease); }
.stroke-draw.is-in path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal], .reveal-lines .line > span { opacity: 1 !important; transform: none !important; }
  .clip-reveal { clip-path: none !important; }
  [data-parallax] { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}