/* ============================================================ VYNE REALTOR ยท MOTION BASE CSS ------------------------------------------------------------ Shared motion primitives used by every page. Loaded alongside motion.js. Transform/opacity ONLY (Emil Kowalski bar). Two pieces live here: 1. Brand-reveal intro loader overlay. 2. [data-reveal] scroll-reveal base + .is-in target state. FAILSAFE PHILOSOPHY: content is authored visible by default in the cascade where it matters. The hidden state for reveals is only applied once JS has confirmed it can observe + reveal them (html.js-motion). If JS never runs, nothing is hidden. ============================================================ */ /* ---- Lenis smooth scroll plumbing ---------------------------- Lenis controls scroll position via transform on . These are Lenis's documented required styles. Only active once the class is present (added by motion.js, never under reduced motion). ------------------------------------------------------ */ 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: clip; } /* ============================================================ BRAND-REVEAL INTRO LOADER ============================================================ */ .v-loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--bg, #0a0a0b); /* Animated out via opacity only. */ opacity: 1; transition: opacity 520ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)); will-change: opacity; } .v-loader[hidden] { display: none; } /* When dismissing: fade the whole overlay. */ .v-loader.is-leaving { opacity: 0; pointer-events: none; } /* The wordmark: a clip-reveal that rises into place. */ .v-loader__mark { font-family: var(--font-display, Georgia, serif); font-weight: 500; font-size: clamp(2.2rem, 7vw, 4.5rem); letter-spacing: var(--tracking-display, -0.02em); line-height: 1; color: var(--text, #f4f1ea); /* clip the rising line */ overflow: hidden; padding: 0.12em 0.04em; display: inline-block; } .v-loader__line { display: inline-block; transform: translate3d(0, 110%, 0); opacity: 0; } /* Underline accent sweeps in after the word lands. */ .v-loader__rule { display: block; height: 2px; width: 0; margin: 0.5em auto 0; background: var(--accent, #e0102b); transform-origin: left center; } /* Played state (added by JS once fonts/first paint are ready). */ .v-loader.is-playing .v-loader__line { transform: translate3d(0, 0, 0); opacity: 1; transition: transform 760ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)), opacity 520ms ease; } .v-loader.is-playing .v-loader__rule { width: 100%; transition: width 620ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)) 480ms; } /* ============================================================ SCROLL REVEAL ([data-reveal]) ------------------------------------------------------------ Hidden state is gated behind html.js-motion so that without JS (or on error) content is never stuck invisible. ============================================================ */ html.js-motion [data-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 600ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)), transform 600ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)); will-change: opacity, transform; } /* Optional per-element stagger via inline --reveal-delay. */ html.js-motion [data-reveal][style*="--reveal-delay"] { transition-delay: var(--reveal-delay); } html.js-motion [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); } /* ============================================================ REDUCED MOTION - kill every transition + transform offset. Loader is instant, reveals are immediately visible. ============================================================ */ @media (prefers-reduced-motion: reduce) { .v-loader { transition: none; } .v-loader__line { transform: none; opacity: 1; } .v-loader__rule { width: 100%; } html.js-motion [data-reveal] { opacity: 1; transform: none; transition: none; } }