/* Motion layer support styles. Pairs with motion.js. */
.motion-on html, .motion-on body { overscroll-behavior: none; }
.motion-on { scroll-behavior: auto; } /* Lenis handles smoothing */

/* Split headlines: clip each word so it can rise in */
.split-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-word > span { display: inline-block; will-change: transform; }
/* Gradient headlines (background-clip: text) must repaint per word, or the words render transparent
   once GSAP promotes them to their own layer. */
.split-word, .split-word > span { background: inherit; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: inherit; }

/* Marquee */
[data-marquee] { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: inline-flex; gap: var(--space-5, 3rem); will-change: transform; }
.marquee-track > * { flex: none; }

/* Reading progress bar */
[data-progress] { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--color-accent, #0066ff); z-index: 1000; pointer-events: none; }

/* Nav after scrolling past the hero */
.nav.is-scrolled { backdrop-filter: blur(12px); background: color-mix(in srgb, var(--color-bg, #0a0e1a) 80%, transparent); box-shadow: 0 1px 0 var(--color-border, rgba(255,255,255,.08)); }

/* Parallax children must be allowed to move without clipping the layout */
[data-parallax] { will-change: transform; }

/* Reduced motion: nothing hidden, nothing moving */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .split-word > span { transform: none !important; }
}