/* Motion/interaction layer. Depends only on tokens.css. Everything here is driven by two inherited custom properties that js/interactions.js publishes on :root from a single damped rAF loop: --scroll-progress 0 -> 1, document scroll position --scroll-velocity -1 -> 1, damped scroll speed (negative = upward) Both default to 0 in every calc() below, so the whole file is inert if the JS never runs. Nothing here is required for the page to be usable. */ :root { --scroll-progress: 0; --scroll-velocity: 0; /* Signature curves. --ease (tokens) is the site's long editorial settle; these two are the short-interaction variants. ease-in is deliberately absent — it delays the first frame, which is the frame the user is watching hardest. */ --ease-out-strong: cubic-bezier(.23, 1, .32, 1); --ease-in-out-strong: cubic-bezier(.77, 0, .175, 1); } /* ---------- scroll progress line ---------- */ .scroll-progress { position: fixed; inset: 0 0 auto 0; z-index: 200; height: 2px; background: var(--primary); transform-origin: left center; transform: scaleX(var(--scroll-progress)); pointer-events: none; } /* Only promoted while the scroll loop is actually running — a permanent will-change would keep a layer alive for the whole session. */ .is-scrolling .scroll-progress, .is-scrolling .marquee, .is-scrolling .marquee__track { will-change: transform; } /* ---------- page intro ---------- */ .intro { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--black); /* Never traps: the overlay cannot swallow a click, and overflow is never touched, so a JS failure mid-intro cannot lock the page. */ pointer-events: none; clip-path: inset(0 0 0 0); transition: clip-path .62s var(--ease); } .intro__inner { display: grid; justify-items: center; gap: 22px; transition: opacity .38s var(--ease-out-strong), transform .62s var(--ease); } .intro__word { font-family: var(--font-body); font-weight: var(--w-medium); font-size: clamp(34px, 1.4rem + 6vw, 96px); line-height: var(--lh-s); /* Large display type reads too loose at default tracking. */ letter-spacing: -.03em; color: var(--white); opacity: 0; transform: translate3d(0, 10px, 0); animation: intro-word .5s var(--ease-out-strong) forwards; } @keyframes intro-word { to { opacity: 1; transform: none; } } .intro__bar { position: relative; width: min(220px, 42vw); height: 1px; overflow: hidden; background: var(--white-100); } .intro__bar-fill { position: absolute; inset: 0; background: var(--primary); transform-origin: left center; transform: scaleX(var(--intro-progress, 0)); /* Long-ish so a load that finishes instantly still reads as a fill and not as a flash of a full bar. */ transition: transform .45s var(--ease); } /* Wipe upward: the hero is revealed from below, matching the direction the page itself moves next. */ .intro.is-out { clip-path: inset(0 0 100% 0); } .intro.is-out .intro__inner { opacity: 0; transform: translate3d(0, -14px, 0); } /* ---------- custom cursor ---------- */ /* Additive only — the native cursor is never hidden, so pointer accuracy and OS cursor settings are untouched. difference blending keeps it legible over both the black page and the red/photographic sections. */ .cursor { position: fixed; inset: 0; z-index: 9998; pointer-events: none; mix-blend-mode: difference; } .cursor__dot, .cursor__ring { position: absolute; top: 0; left: 0; border-radius: 50%; /* -50% centres on the point; JS only ever writes the translate3d part. */ will-change: transform; } .cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--white); } .cursor__ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid var(--white-400); /* Only the scale/background transition here — position is written every frame by the lerp, so transitioning transform would fight it. */ transition: width .28s var(--ease-out-strong), height .28s var(--ease-out-strong), margin .28s var(--ease-out-strong), border-color .28s var(--ease-out-strong), background-color .28s var(--ease-out-strong); } .cursor__ring.is-active { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--primary); background: rgba(229, 25, 42, .16); } /* ---------- velocity skew on marquees ---------- */ /* The keyframe in layout.css owns .marquee__track's `transform`, so the skew goes on the container and the nudge uses the standalone `translate` property, which composes instead of colliding. Both are capped by the clamp on --scroll-velocity in JS (|v| <= 1), so max skew is 4deg. */ .marquee { transform: skewX(calc(var(--scroll-velocity) * 4deg)); } .marquee__track { translate: calc(var(--scroll-velocity) * -22px); } /* ---------- cursor-following glow on cards ---------- */ /* isolation makes each card its own stacking context so the z-index:-1 layer paints above the card's own background but below its text — no tint on the copy, no extra wrapper element. */ .step, .quote, .award { position: relative; isolation: isolate; } .step::before, .quote::before, .award::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient( 260px circle at var(--mx, 50%) var(--my, 50%), rgba(229, 25, 42, .22), rgba(229, 25, 42, .06) 45%, transparent 70% ); opacity: 0; /* Asymmetric: arrives while the user is deciding, leaves slowly enough that crossing between two cards doesn't strobe. */ transition: opacity .7s var(--ease); } .step.is-glowing::before, .quote.is-glowing::before, .award.is-glowing::before { opacity: 1; transition-duration: .4s; } /* ---------- section divider draw ---------- */ /* Reusable: put (or data-line="primary") anywhere a border-top would otherwise sit. Repeatable in both directions, matching the existing [data-reveal] system. */ [data-line] { display: block; width: 100%; height: 1px; background: var(--white-100); transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease); } [data-line="primary"] { background: var(--primary); } [data-line].is-drawn { transform: scaleX(1); } @media (hover: none), (pointer: coarse) { /* Velocity skew is a pointer-driven flourish; touch scrolling already has its own momentum and the skew only reads as jitter there. */ .marquee { transform: none; } .marquee__track { translate: none; } } @media (prefers-reduced-motion: reduce) { /* The intro and cursor are never built under reduced motion (JS bails), so only the always-present pieces need neutralising here. */ .marquee { transform: none !important; } .marquee__track { translate: none !important; } .step::before, .quote::before, .award::before { transition: opacity .2s linear; } [data-line] { transform: none !important; transition: none !important; } /* Kept: it's a static position indicator, not motion in the visual field. */ .scroll-progress { transition: none !important; } }