/* ============================================================================= Verde Optimal : homepage intro — "circuit-board flythrough" A one-time-per-session cinematic dive through layered circuit boards that pulls back to reveal the homepage. This file styles the overlay shell and the skip control only; the animation itself is painted to by assets/intro.js. Every rule here is scoped to `html.vo-intro-armed`, which the inline script adds before first paint only on a visitor's first homepage view of the session (and only when sessionStorage is reachable). Without that class nothing here applies — returning visitors and no-JS visitors see the page render normally. ========================================================================== */ .vo-intro { display: none; } html.vo-intro-armed { overflow: hidden; } html.vo-intro-armed .vo-intro { display: block; position: fixed; inset: 0; z-index: 1000; /* above the sticky site-header (z-index: 50) */ background-color: var(--vo-void, #0C0A07); opacity: 1; will-change: opacity; } /* The real page waits behind the overlay, then fades up as the overlay's black ground melts away and its circuit thins out — a slow, pure cross-dissolve, so the intro leads into the homepage with no cut and nothing lurching. The "easing to rest" comes from the camera decelerating in intro.js, not from a transform here (scaling a full-height #main just drifts the content). (.bg-particles / .grain sit behind the opaque overlay and need no handling.) */ html.vo-intro-armed #main, html.vo-intro-armed .site-header { opacity: 0; } html.vo-intro-armed.vo-revealing #main { opacity: 1; transition: opacity 1.5s cubic-bezier(0.4, 0, 0.4, 1); } html.vo-intro-armed.vo-revealing .site-header { opacity: 1; transition: opacity 1.3s cubic-bezier(0.4, 0, 0.4, 1) 0.15s; } .vo-intro__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } /* --- skip control ------------------------------------------------------- */ .vo-intro__skip { position: absolute; right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 4vw, 2.5rem); display: inline-flex; align-items: center; gap: 0.55em; margin: 0; padding: 0.62rem 1.15rem; font-family: "Roboto Mono", ui-monospace, Menlo, monospace; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vo-slate, #a19797); background: rgba(0, 0, 0, 0.42); border: 1px solid rgba(0, 237, 4, 0.28); border-radius: var(--radius-pill, 999px); cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .vo-intro__skip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vo-green, #00ed04); box-shadow: 0 0 8px rgba(0, 237, 4, 0.85); } .vo-intro__skip.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity 0.42s var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)), transform 0.42s var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)), color 0.2s ease, border-color 0.2s ease; } .vo-intro__skip:hover { color: var(--vo-green, #00ed04); border-color: var(--vo-green, #00ed04); } .vo-intro__skip:focus-visible { outline: 2px solid var(--vo-signal, #48ff00); outline-offset: 3px; color: var(--vo-green, #00ed04); border-color: var(--vo-green, #00ed04); } .vo-intro__skip:active { transform: translateY(1px); } /* --- exit: black ground melts first, then the circuit dissolves over the now-visible homepage — the intro leads into the page, no cut. NB: selector must out-specify `html.vo-intro-armed .vo-intro` above, or the overlay never actually fades and just gets removed (a hard cut). ---------- */ html.vo-intro-armed .vo-intro.is-leaving { opacity: 0; background-color: rgba(0, 0, 0, 0); pointer-events: none; /* black ground melts first so the page shows through, then the circuit canvas dissolves over it — no transform, nothing to lurch */ transition: background-color 1s cubic-bezier(0.4, 0, 0.5, 1), opacity 1.6s cubic-bezier(0.4, 0, 0.4, 1) 0.15s; } /* --- reduced motion: no dive, just a quick fade ---------------------- */ @media (prefers-reduced-motion: reduce) { html.vo-intro-armed .vo-intro.is-leaving { transition: background-color 0.3s linear, opacity 0.3s linear; } html.vo-intro-armed.vo-revealing #main, html.vo-intro-armed.vo-revealing .site-header { transition: opacity 0.3s linear; } .vo-intro__skip, .vo-intro__skip.is-shown { transition: none; } }