Invitation hero with an envelope, countdown and “add to calendar”

One file, zero dependencies, “use client” for the envelope, countdown and .ics. Layout from the block width: a column below 56rem, two columns from 56rem (text 1.15fr / photo .85fr, min-height 40rem). The envelope is [data-part=envelope] position:fixed over the whole screen above the header (z-index 60), a deep plum radial-gradient with grain and a pulsing accent ::after glow: paper with perspective, a clip-path polygon flap with rotateX(180deg), a pocket over the letter, the letter translateY(-55%), a radial-gradient seal with the initials and a pulsing box-shadow, an envelopeLabel caption and the names on the envelope; after opening the flap shows a striped lining; data-open runs an unhurried five-second transition chain: the seal (0.5 s), the flap (1.3 s from 0.35 s), the letter rising out of the pocket with its bottom behind the front folds (1.6 s from 1.3 s); z-index layers: back 0, open flap 0, letter 1, front folds 2, closed flap 3, seal 4, the envelope gliding down 7rem right after the click (1.3 s) to make room for the letter, fading from 3 s, the backdrop fading over 1.8 s from 3.1 s; the hero beneath fades in with a 3.2 s delay (data-intro), so the switch is a cross-fade, not a jump. envelope=false skips the intro; inside a nested frame (window.self !== window.top: scenario showcase, preview) the envelope is not rendered because it cannot be clicked there — read via useSyncExternalStore without hydration mismatch; reduced-motion hides the envelope and shows the letter at once. The countdown tiles and “Add to calendar” are glass: translucent cream with backdrop-filter and a light top edge; two ::before glows sit behind the sheet (accent top-left, sage bottom-right). The countdown is a 1-second setInterval, the first frame shows zeros (matches the server), days/hours/minutes/seconds from date (ISO). “Add to calendar” builds a text/calendar Blob with a 9-hour VEVENT and downloads it via a temporary link. The photo arch is border-radius 50%/38% on an inner layer, the sticker stamp floats via keyframes. Grain is an SVG feTurbulence in ::after with multiply. Palette --vibeui-hero-025-* is neutral: ink and paper via light-dark(), the site colours come through the accent, ink and background props; dark theme via .dark/[data-theme] or tone. Cormorant Garamond and Manrope come via <link precedence> from Google Fonts with Georgia and system fallbacks. accent and background override colours, prefers-reduced-motion disables animations.