TITLE: Aurora Glass — Polar Night Observatory

PROMPT: Build a single self-contained HTML page: a full-screen hero for a fictional aurora research observatory. Canvas-painted polar night sky (vertical gradient #03070f -> #050b1a -> #08152f -> #0e2a4d with a deep-blue horizon halo) plus ~200 twinkling stars. Four sine-warped aurora ribbons drift on requestAnimationFrame, each a closed path filled with a vertical linear gradient (transparent -> teal #5eead4 / violet #a78bfa / mint -> transparent) composited with globalCompositeOperation 'lighter', plus a soft bloom stroke pass and thin vertical curtain rays. Floating frosted glass hero panel: 26-64px padding, 16-26px radius, background linear-gradient(160deg, rgba(248,250,252,.12), rgba(248,250,252,.055), rgba(14,42,77,.20)), 1px rgba(248,250,252,.15) border, backdrop-filter blur(22px) saturate(150%) with an @supports solid fallback. Content: small-caps teal eyebrow "Aurora research observatory · 78.9°N" with a trailing gradient rule, ultra-light system-ui headline clamp(2.6rem,7vw,6rem) with a 220%-wide animated gradient background-clip:text sweep, a 46ch light-grey subline, and two pill CTAs (primary teal/violet tint, ghost) that lift -3px on hover with a teal glow bloom. Anchored bottom frosted 3-stat bar (Kp index 7.4, solar wind 612 km/s, dome temp -38 °C) with tabular-nums gradient numerals counting up on load via rAF ease-out-cubic. Fixed CSS grain overlay (three repeating-linear-gradients, mix-blend-mode overlay) and a vignette veil. Palette: #050b1a, #0e2a4d, #5eead4, #a78bfa, #f8fafc. System font stacks only, clamp() type, 100dvh shell, 360px-1920px responsive, prefers-reduced-motion renders one static frame and skips count-up.

DESCRIPTION: A cold, luminous hero where slow additive aurora ribbons drift behind a single frosted glass panel. The panel eases in with a soft rise while a light sheen crosses it, the headline carries a slow iridescent gradient, and a frosted stat bar at the foot of the viewport counts three live-looking readings up from zero. The whole piece reads as scientific instrument rather than web page: small-caps labels, wide tracking, tabular numerals, and a fine grain over everything.

TECHNIQUES: DPR-aware canvas with setTransform; sine-warped ribbon paths filled with multi-stop vertical gradients; 'lighter' additive compositing; soft bloom stroke pass; vertical curtain rays; twinkling starfield regenerated on resize; backdrop-filter glass with @supports fallback; background-clip:text animated gradient; CSS-only grain via repeating-linear-gradients; staggered keyframe entrance; rAF count-up with ease-out-cubic; pointer parallax with smoothing; dirty visibility gating (stop rAF when hidden); prefers-reduced-motion static render.

INTERACTION: Moving the pointer drifts and offsets the aurora layers and the additive glow via smoothed parallax. Hovering or focusing a CTA lifts it 3px, brightens its border and intensifies a teal outer glow while the arrow slides right. The three stat numbers count up from 0 to their targets on load. Tab visibility pauses the animation loop; prefers-reduced-motion freezes the aurora to one composed frame and sets the stats instantly.