/* ============================================================ dive.css — THE DIVE, as the homepage opening scene. Loads AFTER site.css and only adds the film's machinery; every token, button and heading style comes from site.css. html.dive3d (set inline in ) = desktop + motion OK: the film shows and the normal hero hides. Everyone else gets the standard homepage hero (styled by site.css) and never downloads the film's frames or scripts — only this small stylesheet loads for all. ============================================================ */ .dive { display: none; } html.dive3d .dive { display: block; position: relative; } html.dive3d .hero { display: none; } /* the film replaces the static hero */ html.dive3d { scroll-behavior: auto; } /* smooth-scrolling 6200px of film is not smooth */ html.dive3d .dive-stage { height: 100vh; overflow: hidden; position: relative; background: radial-gradient(1200px 800px at 50% 62%, rgba(62, 207, 142, .05), transparent 60%), var(--bg); } /* Minimal brand mark during the film — absolute inside the pinned stage, so it scrolls away with the film and hands over to the real header. */ .brandbar { position: absolute; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 16px 26px; pointer-events: none; } .brandname { font-weight: 600; font-size: 15px; letter-spacing: -.01em; } /* Scene 1 copy */ .dive-copy { position: absolute; top: 9vh; left: 0; right: 0; z-index: 6; text-align: center; padding: 0 24px; } .dive .h-hero { max-width: 17ch; margin: 0 auto 22px; } .dive .lead { margin: 0 auto 30px; } .scroll-hint { margin-top: 26px; color: var(--text-faint); font-size: 13px; letter-spacing: .1em; } .scroll-hint span { display: inline-block; animation: hint 1.6s ease-in-out infinite; } @keyframes hint { 50% { transform: translateY(4px); } } /* The zoom world */ .zoomwrap { position: absolute; inset: 0; z-index: 3; transform-origin: 50% 46%; will-change: transform, opacity; } .dive-canvas { position: absolute; /* sized & centred by dive.js (contain-fit) */ will-change: opacity; } /* DOM replica of the final video frame: the glass. Position synced by JS. */ .screenrep { position: absolute; overflow: hidden; border-radius: 10px; opacity: 0; /* revealed at the canvas→DOM handoff */ will-change: opacity, transform; /* bezel + ambience, scaled by JS via --bez */ box-shadow: 0 0 0 var(--bez, 14px) #101318, 0 0 0 calc(var(--bez, 14px) + 2px) rgba(255, 255, 255, .05), 0 0 90px rgba(62, 207, 142, .10), 0 30px 90px rgba(0, 0, 0, .7); background: var(--bg); } /* fly-through layers — all show the SAME dashboard image; each clips its own region and flies independently. Region geometry lives in dive.js (single source for clip + transform-origin). */ .screenrep .lay { position: absolute; inset: 0; background-image: url('dive-assets/ui-dashboard.png'); background-size: 100% 100%; will-change: transform, opacity, filter; } .screenrep .callsheet { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(.94); filter: blur(10px) brightness(.55); will-change: transform, filter; } /* Scene 6 landing — inside the stage, revealed last */ .dive-landing { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; text-align: center; padding: 0 24px; opacity: 0; pointer-events: none; } .dive-landing.live { pointer-events: auto; } /* the site's .h-sec is gradient-clipped text; text-fill wins over the transparent color so the accented word still reads green */ .dive-landing em { font-style: normal; color: var(--accent); -webkit-text-fill-color: var(--accent); }