/* Sarvang motion kit styles. Link after styles.css; works with assets/motion.js (build guide, section 8). */

/* Hide animated elements until motion.js takes over, but never for more than 2.5 seconds. */
html.motion-on:not(.motion-ready) [data-reveal],
html.motion-on:not(.motion-ready) [data-split],
html.motion-on:not(.motion-ready) [data-stagger] > *,
html.motion-on:not(.motion-ready) [data-pin-step],
html.motion-on:not(.motion-ready) [data-hero-media] {
  opacity: 0;
  animation: motion-failsafe 0s linear 2.5s forwards;
}
@keyframes motion-failsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.motion-on:not(.motion-ready) [data-reveal],
  html.motion-on:not(.motion-ready) [data-split],
  html.motion-on:not(.motion-ready) [data-stagger] > *,
  html.motion-on:not(.motion-ready) [data-pin-step],
  html.motion-on:not(.motion-ready) [data-hero-media] { opacity: 1; animation: none; }
}

/* Level 1: soft fade-up as things enter the screen. */
html.motion-l1 [data-reveal],
html.motion-l1 [data-split],
html.motion-l1 [data-stagger] > *,
html.motion-l1 [data-pin-step] {
  transition: opacity 0.8s ease, transform 0.8s ease;
}
html.motion-l1 [data-reveal]:not(.is-in),
html.motion-l1 [data-split]:not(.is-in),
html.motion-l1 [data-stagger] > *:not(.is-in),
html.motion-l1 [data-pin-step]:not(.is-in) {
  opacity: 0;
  transform: translateY(24px);
}

/* Words of a [data-split] heading, each inside a mask. */
.m-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.m-word-in { display: inline-block; will-change: transform; }

/* Parallax images drift inside their frame. */
[data-parallax] { will-change: transform; }

/* Sideways gallery: a normal swipeable row, pinned and driven by the scroll at level 3 on wide screens. */
[data-horizontal] { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; }
[data-horizontal-track] { display: flex; width: max-content; }
[data-horizontal-track] > * { flex: 0 0 auto; scroll-snap-align: start; }
html.motion-l3.motion-wide [data-horizontal] { overflow: hidden; scroll-snap-type: none; }

/* Endless text band. */
[data-marquee] { overflow: hidden; white-space: nowrap; }
.m-marquee-track { display: inline-flex; will-change: transform; }
.m-marquee-item { display: inline-flex; flex: 0 0 auto; }

/* Smooth scrolling (Lenis, level 3). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }