/* ==========================================================================
   Scroll effects — the Vertical template's signature motion.

   Measured on the live template (vertical.framer.media):
     · full-viewport sections pinned with position:sticky inside a taller
       parent, so content scrolls past a fixed frame
     · display copy split into per-word spans (23 spans in one paragraph)
       whose opacity is scrubbed by scroll position
     · elements carry scroll-linked transforms (translateY / scale)

   This file provides the same vocabulary natively:
     [data-scroll-fade]   container whose children fade in on enter
     [data-scroll-scrub]  element whose opacity is scrubbed by its own
                          position in the viewport
     [data-split]         text split into word spans for staggered fades
     [data-parallax="0.2"] element translated at a fraction of scroll speed
     [data-pin]           section pinned inside its parent while scrolling
   ========================================================================== */

/* ---------- word splitting ---------- */
.split-word {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity 0.7s cubic-bezier(.16, 1, .3, 1), transform 0.9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--d, 0ms);
}
[data-split].is-in .split-word { opacity: 1; transform: translateY(0); }

/* ---------- reveal on enter ---------- */
[data-scroll-fade] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s cubic-bezier(.16, 1, .3, 1), transform 0.85s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--d, 0ms);
}
[data-scroll-fade].is-in > * { opacity: 1; transform: none; }

/* ---------- scroll-scrubbed opacity ---------- */
[data-scroll-scrub] {
  will-change: opacity;
}

/* ---------- parallax ---------- */
[data-parallax] { will-change: transform; }

/* ---------- pinned section ---------- */
[data-pin] {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
}

/* ---------- the reference's horizontal rule that wipes in on scroll ---------- */
.rule-wipe {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.is-in .rule-wipe,
.is-in.rule-wipe { transform: scaleX(1); }

/* ---------- reduced motion: show everything, no transforms ---------- */
@media (prefers-reduced-motion: reduce) {
  .split-word,
  [data-scroll-fade] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-parallax] { transform: none !important; }
  [data-scroll-scrub] { opacity: 1 !important; }
  .rule-wipe { transform: scaleX(1) !important; transition: none !important; }
}