/* intro.css — tap-to-open envelope video intro overlay. * * A full-viewport overlay that shows the sealed-envelope poster instantly (true first * paint), invites a tap, plays the 3.04s silent open clip inline, then dissolves to the * invitation. It sits ABOVE the preloader (z 10000 in css/preloader.css) so it masks the * loading field while the hero art decodes behind it. js/intro.js drives the lifecycle; * this file only styles. Motion is transform/opacity-only (GPU); the looping pulse lives * on inner nodes so fading the outer hint wrapper never converts a keyframe -> transition. * * INTRO_BG (#ccb9b0) is the clip's solid final-frame colour — the overlay background, the * video's own letterbox, and the desktop side columns all use it, so at fade time the * whole viewport is one uniform mauve the last frame melts into seamlessly. */ :root { --intro-bg: #ccb9b0; --intro-gold: #a97c3f; --intro-ink: #5f4223; --intro-fade: 900ms; --intro-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Scroll lock while the intro owns the screen. The `intro-active` class is set inline in alongside `js`/`is-preloading` (no content flash) and removed by js/intro.js at fade start. Guarded on html.js so a no-JS visitor (class absent) is never locked. */ html.js.intro-active, html.js.intro-active body { overflow: hidden; overscroll-behavior: none; touch-action: none; } .pp-intro { position: fixed; inset: 0; z-index: 11000; /* above the preloader overlay (z-index 10000) */ display: flex; align-items: center; justify-content: center; background: var(--intro-bg); overflow: hidden; isolation: isolate; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* The preloader gate (css/preloader.css) only hides `.page` / `.scene-toggle`; the intro is neither, so it already stays visible while `is-preloading` holds — but state it. */ html.js.is-preloading .pp-intro { visibility: visible; } /* Video stage. Mobile portrait (viewport narrower than 9:16): the clip fills the viewport height and overflows/clips the width — a cover crop kept centred on the seal (flex-shrink:0 stops the flex item collapsing to width). Desktop / wide (viewport wider than 9:16): the 9:16 clip is centred at viewport height and INTRO_BG shows in the side columns — no stretch, no crop — so the solid final frame sits inside a uniform full-viewport field. */ .pp-intro__video { height: 100vh; /* fallback for browsers without dvh */ height: 100dvh; width: auto; aspect-ratio: 1080 / 1920; max-width: none; flex: 0 0 auto; object-fit: cover; background: var(--intro-bg); display: block; } /* Tap-to-open affordance: a pulsing gold ring + "Tap to open", low on the stage. The OUTER wrapper carries only the fade-out transition; the pulse keyframes live on the inner dot/label, so js/intro.js adding `.is-hidden` never snaps a keyframe. */ .pp-intro__hint { position: absolute; left: 50%; bottom: max(15vh, calc(env(safe-area-inset-bottom, 0px) + 42px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; pointer-events: none; /* taps fall through to the overlay's own handler */ transition: opacity 360ms ease, transform 360ms ease; } .pp-intro__hint.is-hidden { opacity: 0; transform: translateX(-50%) translateY(12px); } .pp-intro__dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--intro-gold); box-shadow: 0 0 6px rgba(169, 124, 63, 0.55); } /* expanding pulse ring — transform + opacity only */ .pp-intro__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 1.5px solid var(--intro-gold); transform: scale(1); opacity: 0.7; animation: pp-intro-ring 2200ms ease-out infinite; will-change: transform, opacity; } @keyframes pp-intro-ring { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(3.2); opacity: 0; } 100% { transform: scale(3.2); opacity: 0; } } .pp-intro__label { font: 600 clamp(12px, 3.3vw, 15px) / 1 "Cinzel", "Times New Roman", serif; letter-spacing: 0.3em; padding-left: 0.3em; /* balance the trailing letter-spacing so the run stays centred */ text-transform: uppercase; color: var(--intro-ink); text-shadow: 0 1px 0 rgba(255, 248, 238, 0.4); animation: pp-intro-breathe 2600ms ease-in-out infinite; will-change: opacity; } @keyframes pp-intro-breathe { 0%, 100% { opacity: 0.68; } 50% { opacity: 1; } } /* Once playback starts, the affordance retires (fade handled via .is-hidden on the hint). */ .pp-intro.is-playing { cursor: default; } /* Keyboard focus: a framed inset ring (a full-bleed outline round the viewport reads badly). */ .pp-intro:focus-visible { outline: 2px solid var(--intro-gold); outline-offset: -10px; } /* Exit: dissolve (+ a whisper of scale). js/intro.js removes the node on transitionend. */ .pp-intro.is-done { opacity: 0; transform: scale(1.03); pointer-events: none; transition: opacity var(--intro-fade) var(--intro-ease), transform var(--intro-fade) var(--intro-ease); will-change: transform, opacity; } @media (prefers-reduced-motion: reduce) { .pp-intro__dot::before { animation: none; transform: scale(1); opacity: 0.55; } .pp-intro__label { animation: none; opacity: 1; } .pp-intro__hint { transition-duration: 0.001ms; } .pp-intro.is-done { transform: none; transition: opacity 250ms ease; } }