/* V3 cleanup: cinematic pacing without visible implementation mechanics. Pins kept lighter (shorter holds) and all per-frame CSS filters removed so browser + mobile scroll continuously without stutter. */ /* clip (not hidden) so the document — not — stays the scroll container: smoother momentum scrolling, and ScrollTrigger measures against the viewport. */ html, body { overflow-x: clip; } .hero { height: 145svh; overflow: visible; } .hero__stage { position: sticky; top: 0; height: 100svh; min-height: 680px; overflow: hidden; isolation: isolate; } .hero__content, .hero h1 { overflow: visible; } .hero__content { bottom: max(9vh, 4.75rem); } .hero h1 { max-width: 100%; } /* Beneath: a normal section now — no pin, no per-frame filter. The cross-section eases up gently as it scrolls past (transform only); the caption fades in once. */ .earth-reveal { height: auto; min-height: 100svh; background: #050504; } .earth-reveal__stage { position: relative; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; background: #050504; } .earth-cross-section { position: absolute; inset: 0; transform: scale(1.06); /* JS eases to 1 on scroll — transform only */ filter: brightness(.64) saturate(.82); /* static, rastered once */ } .earth-cross-section__shade { z-index: 1; background: radial-gradient(125% 78% at 50% 36%, transparent 26%, rgba(5,5,4,.6) 100%), linear-gradient(0deg, rgba(5,5,4,.92), transparent 46%); } .earth-reveal__caption { z-index: 5; left: 50%; right: auto; bottom: 12vh; width: min(46rem, 88vw); transform: translateX(-50%); text-align: center; opacity: 1; /* JS owns the fade-in; visible if JS/GSAP fails */ } .earth-reveal__caption strong { margin-top: .55rem; } .earth-reveal__caption small { margin-top: .7rem; } /* The black "DISCOVER" threshold — a full-bleed word card between the beneath scene and the Discover chapter. A normal section you scroll straight past (no pin); the word just eases up as it enters. */ .discover-threshold { min-height: 92svh; display: grid; place-items: center; background: var(--ink); overflow: hidden; } .discover-threshold span { font-size: clamp(4rem, 13vw, 13rem); font-weight: 700; line-height: 1; letter-spacing: -.07em; text-transform: uppercase; color: var(--paper); } .chapter-heading, .chapter-heading h2, .material h3, .scale h2, .transform h2, .finished-material h3, .people h2, .closing h2, .cta h2 { overflow: visible; } .resource { background: #080706; } .material { height: 112svh; min-height: 760px; clip-path: none; margin: 0; } .material + .material { border-top: 1px solid rgba(238,234,225,.16); } .material__copy { z-index: 2; } /* Scale: no pin. A full-bleed scene the page scrolls straight past, with a gentle image drift (transform only). */ .scale { height: 118svh; min-height: 760px; background: #090806; overflow: hidden; } .scale__stage { position: relative; top: 0; height: 100%; min-height: 720px; overflow: hidden; } .scale__stage > img, .scale__stage > .scale__shade { position: absolute; inset: 0; } .scale__stage > img { transform: scale(1.06); } .scale__copy { position: relative; z-index: 2; } .transform { height: 300vh; } .transform__detail { clip-path: none; opacity: 0; transform: scale(.92); box-shadow: none; } .transform__detail::after { display: none; } .transform__detail img { transform: scale(1.1); } .transform__shade { background: linear-gradient(0deg, rgba(5,5,4,.9) 0%, rgba(5,5,4,.56) 30%, transparent 64%), linear-gradient(90deg, rgba(5,5,4,.58), transparent 62%); } .transform h2 { text-shadow: 0 2px 28px rgba(0,0,0,.52); } .finished { padding-bottom: 8rem; background: #11100e; } .finished .chapter-heading { min-height: 78svh; align-content: center; } .finished-material, .finished-material--copper { display: block; width: min(1480px, 94vw); height: auto; min-height: 118svh; padding: 11vh 0; text-align: left; } .finished-material__stage { position: relative; min-height: 96svh; overflow: hidden; background: transparent; } .finished-material figure, .finished-material--copper figure { position: absolute; inset: 7vh auto auto -2vw; width: min(74vw, 1120px); height: 76vh; margin: 0; aspect-ratio: auto; } .finished-material--copper figure { inset: 7vh -2vw auto auto; } .finished-material figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 62%, #11100e 100%), linear-gradient(180deg, transparent 68%, rgba(5,5,4,.36)); } .finished-material--copper figure::after { background: linear-gradient(270deg, transparent 62%, #11100e 100%), linear-gradient(180deg, transparent 68%, rgba(5,5,4,.36)); } .finished-material__copy, .finished-material--copper .finished-material__copy { position: absolute; z-index: 2; right: 1vw; left: auto; bottom: 7vh; width: min(36rem, 36vw); opacity: 0; } .finished-material--copper .finished-material__copy { right: auto; left: 1vw; } .finished-material h3 { font-size: clamp(3.2rem, 6vw, 7rem); } .closing { height: 125svh; } .cta { min-height: 88svh; display: flex; align-items: center; } @media (max-width: 900px) { .hero { height: 130svh; min-height: 820px; } .hero__stage { min-height: 640px; } .hero__content { bottom: max(12vh, 5.5rem); } .hero h1 { font-size: clamp(2.65rem, 9.2vw, 5rem); line-height: .94; } .earth-reveal { height: auto; } .earth-reveal__stage { min-height: 560px; } .discover-threshold { min-height: 82svh; } .discover-threshold span { font-size: 20vw; } .material { height: 98svh; min-height: 650px; } .scale { height: 114svh; min-height: 700px; } .scale__stage { min-height: 640px; } .transform { height: 230vh; } .finished .chapter-heading { min-height: 68svh; } .finished-material, .finished-material--copper { width: 100%; min-height: 106svh; padding: 5vh 0; } .finished-material__stage { min-height: 96svh; } .finished-material figure, .finished-material--copper figure { inset: 6vh 0 auto; width: 100%; height: 58vh; } .finished-material figure::after, .finished-material--copper figure::after { background: linear-gradient(180deg, transparent 62%, #11100e 100%); } .finished-material__copy, .finished-material--copper .finished-material__copy { left: 1.25rem; right: 1.25rem; bottom: 5vh; width: auto; } .finished-material h3 { font-size: clamp(3rem, 11vw, 5.5rem); } .closing { height: 108svh; } .cta { min-height: 80svh; } } @media (max-width: 540px) { .hero { height: 128svh; min-height: 780px; } .hero__content { bottom: max(13vh, 5.75rem); } .hero h1 { font-size: clamp(2.55rem, 11.2vw, 3.25rem); line-height: .95; letter-spacing: -.045em; } .earth-reveal { height: auto; } .material { height: 92svh; } .scale { height: 110svh; min-height: 680px; } .transform { height: 205vh; } .finished-material figure, .finished-material--copper figure { height: 54vh; } } @media (prefers-reduced-motion: reduce) { .hero, .earth-reveal, .scale, .transform, .closing { height: auto; min-height: 100svh; } .hero__stage { position: relative; } .scale__stage { position: relative; } .earth-cross-section { transform: none; } .earth-reveal__caption { opacity: 1; } .transform__detail { clip-path: none; opacity: .65; transform: none; } .finished-material__copy { opacity: 1; transform: none; } .transform h2 span, .closing h2 span, .transform h2 span:last-child, .closing h2 span:last-child { position: static; opacity: 1; transform: none; } .transform h2 span + span, .closing h2 span + span { margin-top: .22em; } }