/* Shared motion layer for all five concepts.
   Every start-state here is gated behind .motion, which is only added when the
   visitor has not asked for reduced motion AND the scripts actually arrived.
   Without JavaScript, or with prefers-reduced-motion, nothing below applies and
   the page renders complete and static. */

/* Lenis is the site's only smooth-scroll engine. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* --- start states --- */

.motion [data-reveal] { opacity: 0; }
.motion [data-reveal-group] > * { opacity: 0; }
.motion [data-split] .w { opacity: 0; }
.motion [data-wipe] { clip-path: inset(100% 0 0 0); }

/* Split words. No overflow clipping: five themes with five very different
   type treatments, and a clip mask eats descenders and raised italics. */
.motion [data-split] .w { display: inline-block; will-change: transform, opacity; }

/* --- the pinned photo reel (Grove) --- */

.reel-frame { position: relative; margin: 0; }
.motion .reel { height: 320vh; }
.motion .reel-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #0d110b; }
.motion .reel-frame { position: absolute; inset: 0; }

/* --- reading progress down the index (Almanac) --- */

.index-progress { display: none; }
.motion .index-progress {
  display: block; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px;
  background: currentColor; opacity: .8;
  transform: scaleY(0); transform-origin: top;
}

@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal],
  .motion [data-reveal-group] > *,
  .motion [data-split] .w { opacity: 1 !important; }
  .motion [data-wipe] { clip-path: none !important; }
}