/* Studio motion kit: shared by every page. Content is visible by default; motion only enhances.
   Reveals use CSS scroll-driven animations (no JS needed, correct in full-page captures).
   Browsers without animation-timeline get an IntersectionObserver fallback from motion.js.
   Everything is disabled under prefers-reduced-motion. */

:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); }

@keyframes kit-rise { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } }
@keyframes kit-unclip { from { clip-path: inset(18% 8% 18% 8% round 18px); transform: scale(1.04); } }
@keyframes kit-marquee { to { transform: translateX(-50%); } }
@keyframes kit-draw { from { stroke-dashoffset: var(--kit-len, 1200); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] { animation: kit-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    [data-reveal="clip"] { animation-name: kit-unclip; animation-range: entry 0% cover 35%; }
    [data-reveal-stagger] > * { animation: kit-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    [data-draw] { stroke-dasharray: var(--kit-len, 1200); animation: kit-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  }
  /* Fallback driven by motion.js: only applied once the script has proven it can reveal. */
  .kit-io [data-reveal]:not(.kit-in), .kit-io [data-reveal-stagger] > :not(.kit-in) { opacity: 0; transform: translateY(28px); }
  .kit-io [data-reveal], .kit-io [data-reveal-stagger] > * { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }

  .marquee__track { animation: kit-marquee var(--kit-speed, 38s) linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  [data-magnetic] { transition: transform .45s var(--ease-out); }
}

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
           mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; }

/* Pinned scenes: motion.js writes --p (0..1) on [data-scene]; pages map it to their own steps. */
[data-scene] { position: relative; }
[data-scene] > .scene__pin { position: sticky; top: var(--scene-top, 12vh); }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }