/* ============================================================ WSOOL — MOTION Cinematic Clarity: motion carries the story, never competes with it. Budget: the homepage is the only page with a sticky sequence. Inner pages get reveals and at most one image transition. RULE THAT MUST NEVER BE RELAXED — every rule that hides content is scoped under `.js`. The class is set by an inline script in . If JavaScript fails to run for any reason, none of these rules match and the page renders fully visible. An earlier build shipped a bare `.reveal{opacity:0}` and a single script error blanked the whole page. ============================================================ */ /* ── Reveal on scroll ────────────────────────────────────── */ .js .reveal{ opacity:0;transform:translateY(28px); transition:opacity var(--dur-slow) ease,transform .9s var(--ease); } .js .reveal.in{opacity:1;transform:none} /* Stagger children of a revealed group without needing per-item classes. */ .js .reveal-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .7s var(--ease)} .js .reveal-stagger.in>*{opacity:1;transform:none} .js .reveal-stagger.in>*:nth-child(2){transition-delay:.07s} .js .reveal-stagger.in>*:nth-child(3){transition-delay:.14s} .js .reveal-stagger.in>*:nth-child(4){transition-delay:.21s} .js .reveal-stagger.in>*:nth-child(5){transition-delay:.28s} .js .reveal-stagger.in>*:nth-child(6){transition-delay:.35s} /* Line-by-line heading reveal. The spans are authored in the markup, so the heading is a complete, readable sentence with JS off. */ .js .reveal-lines .line{display:block;overflow:hidden} .js .reveal-lines .line>span{display:block;transform:translateY(105%);transition:transform .85s var(--ease)} .js .reveal-lines.in .line>span{transform:none} .js .reveal-lines.in .line:nth-child(2)>span{transition-delay:.09s} .js .reveal-lines.in .line:nth-child(3)>span{transition-delay:.18s} /* ── Hero aperture — the signature opening move ──────────── */ .js .hero-media{ clip-path:inset(0 100% 0 0 round var(--radius)); animation:aperture 1.2s .1s var(--ease) forwards; } .js .hero-media img{transform:scale(1.08);animation:image-settle 1.7s .1s var(--ease) forwards} @keyframes aperture{to{clip-path:inset(0 0 0 0 round var(--radius))}} @keyframes image-settle{to{transform:scale(1)}} /* Quieter version for inner-page heroes: fade + settle, no clip sweep. */ .js .page-hero-media img{transform:scale(1.05);animation:image-settle 1.5s .1s var(--ease) forwards} /* ── The one dark cinematic chapter (homepage only) ────── Staging is driven by IntersectionObserver over .story-trigger blocks, not by scroll-position arithmetic. Same code path at every width, which is why the sequence now runs on mobile too, and it survives resize, zoom, and browser chrome collapsing on iOS. */ .story-image{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1.1);filter:saturate(.66) contrast(1.06); transition:opacity .7s ease,transform 1.05s var(--ease); } .story-image.is-active{opacity:1;transform:scale(1)} .story-copy article{display:none} .story-copy article.is-active{display:block} .js .story-copy article.is-active{animation:copy-in .62s var(--ease) both} @keyframes copy-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} /* ── Micro-interactions ──────────────────────────────────── */ .hover-lift{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .hover-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} /* ── Reduced motion ────────────────────────────────────── Everything resolves to its final state instantly. Content must never depend on an animation having played. */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } .js .reveal,.js .reveal-stagger>*{opacity:1;transform:none} .js .reveal-lines .line>span{transform:none} .js .hero-media{clip-path:none;animation:none} .js .hero-media img,.js .page-hero-media img,.story-image{transform:none;animation:none} }