Aurora Background

Build a full-viewport hero section with an animated aurora background. Match my project's existing stack, conventions, and design tokens. If there are none, output a single HTML file with inline CSS and JavaScript and zero dependencies.

The goal: a slow curtain aurora rising behind a mountain ridge on a polar night. It must read as a real aurora, with vertical rays hanging from wavy ribbons, not as blurred gradient blobs. Light that drifts, never pulses.

COMPOSITION
- Headline block in the dark sky at the top left. The aurora rises from behind the ridge in the lower half. Text never sits on top of the bright part of the aurora.
- Back to front: sky gradient, star layer, aurora canvas, far ridge, near ridge, grain overlay, content.

LOOK
- Sky: CSS linear-gradient on the section, top to bottom: #02040A 0%, #050B14 45%, #08151F 75%, #0A1A24 100%.
- Aurora palette: green #3DF5A6, cyan #2CC6E0, rose #FF5FA2. Rose appears only at the top tips of rays, never at the base.
- Stars: exactly 160 points from a seeded PRNG (mulberry32, seed 7) so they never move between reloads. Radius 0.4 to 1.2 CSS px, white at 20% to 80% opacity, only in the top 65% of the hero. Drawn once per resize on their own canvas at devicePixelRatio (capped at 2).
- Ridges: two inline SVGs anchored to the bottom, width 100%, preserveAspectRatio="none", viewBox 0 0 1440 200.
  - Far ridge: height 26% of the hero, fill #06111A, path M0 200 L0 120 L90 96 L170 112 L260 70 L340 98 L430 82 L520 104 L610 64 L700 92 L780 78 L880 108 L960 74 L1050 96 L1150 58 L1240 90 L1330 76 L1440 100 L1440 200 Z
  - Near ridge: height 18% of the hero, fill #03070B, path M0 200 L0 132 L70 118 L140 140 L230 96 L300 124 L380 110 L470 142 L560 102 L650 134 L720 116 L820 150 L900 112 L990 138 L1080 90 L1170 128 L1250 116 L1340 140 L1440 120 L1440 200 Z
- Grain: a full-cover layer whose background is an inline SVG data URI with feTurbulence (type fractalNoise, baseFrequency 0.9, numOctaves 2, stitchTiles stitch) on a 160px tile, opacity 0.07, mix-blend-mode overlay.
- Content container: max-width 1120px, centered, horizontal padding clamp(24px, 6vw, 72px), top padding max(12vh, 72px).
  - Eyebrow: "Northlight". 12px, weight 600, uppercase, letter-spacing 0.18em, color #3DF5A6 at 90% opacity, preceded by a 6px green dot with a 0 0 12px #3DF5A6 glow. 20px below it, the headline.
  - Headline (h1): "Light that takes its time." Font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif. Size clamp(40px, 6vw, 84px), weight 400, line-height 1, letter-spacing -0.02em, color #EEF6F3, max-width 15ch, text-wrap: balance.
  - Body, 24px below: "A calm place to write at the end of the day. No streaks, no badges, just the page." System sans, 18px (16px under 600px wide), line-height 1.55, color rgba(238, 246, 243, 0.66), max-width 34ch.
  - Actions, 32px below, 20px gap, wrapping on small screens: a primary pill link "Start writing" (background #EEF6F3, text #04110D, 15px, weight 600, padding 14px 22px, radius 999px) and a text link "See how it works →" (15px, weight 500, rgba(238, 246, 243, 0.78), underline on hover with 4px offset).
- UI font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif. If the project has brand fonts, use them for the eyebrow, body, and buttons, but keep the serif headline.

MOTION: AURORA
- Draw on a <canvas> that extends 40px past every edge of the hero (so the blur never fades at the borders). Its drawing buffer is one third of its CSS size, rounded, minimum 1px, ignoring devicePixelRatio. CSS scales it up and applies filter: blur(14px) saturate(1.15) and mix-blend-mode: screen. Do not blur inside the canvas.
- Three ribbons. Each is a baseline waving across the buffer width W (buffer pixels) and height H:
  y(x, t) = H × (base + a1·sin(k1·x + w1·t + phase) + a2·sin(k2·x − w2·t)), where k = cycles × 2π / W.
  - Cyan ribbon (behind): base 0.70, a1 0.040, a2 0.018, cycles 0.9 and 2.4, w1 0.08, w2 0.05 rad/s, phase 2.1, ray height 0.24, alpha 0.6.
  - Green ribbon (main): base 0.76, a1 0.045, a2 0.020, cycles 1.3 and 3.1, w1 0.11, w2 0.07, phase 0, ray height 0.30, alpha 1.
  - Green ribbon (front, thin): base 0.82, a1 0.030, a2 0.015, cycles 1.8 and 4.2, w1 0.14, w2 0.09, phase 4.3, ray height 0.18, alpha 0.45.
- Rays: step x across the buffer every 2px. At each x compute a ray-density term n = 0.5 + 0.5 × sin(0.045·x + 0.6·t) × sin(0.017·x − 0.35·t). Ray length = H × rayHeight × (0.55 + 0.45·n). Ray alpha = ribbonAlpha × (0.10 + 0.32·n). Draw the ray 2px wide from the baseline upward.
- Pre-render one vertical gradient sprite per ribbon color (offscreen canvas, 1 × 256) and stretch it with drawImage. Never create gradients per frame. Sprite stops, bottom to top: ribbon color at alpha 1.0 at 0%, ribbon color at 0.55 at 18%, cyan at 0.25 at 55%, rose at 0.18 at 82%, rose at 0 at 100%.
- Below each baseline draw a short glow 6% of H tall from a second sprite (1 × 64): ribbon color at alpha 0.35 at the top fading to 0.
- Each frame: clear to transparent, then draw all rays with globalCompositeOperation "lighter". The sky is CSS, not canvas.
- Time is an elapsed clock in seconds that starts at 0. Advance it by the real frame delta, clamped to 0.1s. Nothing should cross more than about 20% of the width in 10 seconds.
- Pause the loop while document.hidden is true and resume without a time jump.

MOTION: ENTRANCE
- The aurora canvas fades from 0 to 1 over 1600ms ease-out.
- Eyebrow, headline, body, and actions fade in and rise 12px, 700ms cubic-bezier(0.2, 0.7, 0.2, 1), staggered 90ms in that order, starting 150ms after load.

STRUCTURE
<section class="aurora-hero"> with min-height 100vh and 100svh where supported, position relative, overflow hidden, isolation isolate. Every decorative layer is position absolute and pointer-events none. Content sits in normal flow above them (z-index 1).

BEHAVIOR
- Resize: debounce 150ms, resize both canvases, and redraw the stars. Do not reset the aurora clock.
- Primary button background goes to #D5E4DF on hover over 150ms.

ACCESSIBILITY
- Every decorative layer has aria-hidden="true". The headline is the h1.
- Visible focus rings on both links: 2px solid #3DF5A6, offset 4px.
- prefers-reduced-motion: render one still aurora frame at t = 12s, never start the animation loop, and skip the entrance animation.

NEVER
- Blurred radial blobs, a purple-to-blue gradient, or a CSS-only "aurora" made of moving gradients.
- Particles, shooting stars, parallax, or anything that reacts to the cursor.
- Centered text, a gradient-filled headline, glassmorphism cards, or a drop shadow on text.
- Rose at the base of the aurora, or aurora light behind the body copy.