/* ========================================================================== Scroll mechanics borrowed from the Framer build: a pinned "stage" whose captions swap as you scroll, and reveal-on-enter. ========================================================================== */ /* --- Reveal on enter ------------------------------------------------------ */ /* Gated on .has-reveal, which motion.js sets on before anything paints. Without JS the class never lands and the content is simply visible — content must never depend on a script running to be readable. */ .has-reveal [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.85s cubic-bezier(0.22, 0.68, 0.24, 1), transform 0.85s cubic-bezier(0.22, 0.68, 0.24, 1); } .has-reveal [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal-delay="1"] { transition-delay: 0.09s; } [data-reveal-delay="2"] { transition-delay: 0.18s; } [data-reveal-delay="3"] { transition-delay: 0.27s; } /* --- Sticky stage --------------------------------------------------------- Left column pins; right column scrolls its scenes past it. */ .stage__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .stage__pin { position: sticky; top: clamp(110px, 16vh, 190px); } .stage__count { margin-top: 30px; font-family: var(--font-display); font-size: 1.1rem; color: var(--sand-dim); font-variant-numeric: tabular-nums; } .scene { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(24px, 4vw, 48px); border-top: 1px solid rgba(196, 181, 161, 0.28); opacity: 0.3; transition: opacity 0.55s ease; } .scene.is-active { opacity: 1; } .scene__index { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe); } .scene__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.1vw, 2.5rem); line-height: 1.16; margin-top: 16px; } .scene__copy { max-width: 46ch; margin-top: 16px; color: var(--sand-dim); } @media (max-width: 900px) { .stage__grid { grid-template-columns: 1fr; gap: 34px; } .stage__pin { position: static; } .scene { min-height: 0; opacity: 1; } } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } /* The pin stays: sticky is layout, not motion. Only the dimming and its transition are dropped, so every scene reads at full strength. */ .scene { opacity: 1; transition: none; } }