Aurora Weather Dashboard

# Aurora Weather — Liquid-Glass Dashboard

## Goal
Recreate this exact weather dashboard UI as a single self-contained HTML page: inline CSS, an inline SVG icon sprite, no frameworks, no JS required. Pixel-faithful to the "Aurora Weather / Weather Forecast — Central Jakarta" liquid-glass reference.

Document title `Weather Forecast — Central Jakarta`, `lang="en"`, viewport `width=device-width, initial-scale=1, viewport-fit=cover`. Fallback page background `#04121b`, ink `#ffffff`, antialiased Inter stack, `font-feature-settings: "kern" 1`. `html`/`body` height 100% with `overflow:hidden` on desktop.

## Fonts
Inter + Inter Tight (SIL OFL), loaded from Google Fonts:
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500&display=swap" rel="stylesheet">
```
or embedded WOFF2 `@font-face` for Inter 400/500/600/700 and Inter Tight 500 only.

Body: `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`.
Headline: `'Inter Tight', 'Inter', sans-serif`, weight 500, size `calc(63*u)`, line-height `calc(78*u)`, letter-spacing `calc(.25*u)`.

## Assets
1. **Full-bleed background** — a 1600×1200 storm-landscape JPEG at `./assets/storm-background.jpg` (originally embedded as a `data:image/jpeg;base64` URI inside the CSS). Subject: dramatic dark cumulonimbus storm clouds with multiple lightning bolts over a green field; cool teal-green / deep blue-black atmosphere. `background-size: cover; background-position: center 25%; background-repeat: no-repeat`.
2. **Avatar** — the only remote image in the original: `https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&h=160&fit=crop&crop=faces&q=80&auto=format`, `alt="Calfin Danang"`, `loading="eager"`, `decoding="async"`, `onerror="this.remove()"` so it falls back to the inline SVG avatar `#i-avatar`. Circular crop 52×52 on desktop.
3. No other remote assets — every icon is an inline SVG `<symbol>`.

## Scaling System (critical)
Reference canvas 1357 × 871 CSS px.
```css
:root{
  --u: min(100vw / 1357, 100dvh / 871);
  --ink:#ffffff;
  --glass:rgba(255,255,255,.155);
  --glass-line:rgba(255,255,255,.20);
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.22,.61,.36,1);
  --e-pen:cubic-bezier(.37,.01,.2,1);
}
@supports not (height:100dvh){ :root{ --u: min(100vw / 1357, 100vh / 871); } }
```
Every size and spacing uses `calc(N * var(--u))`. The layout is absolute / edge-anchored so there is never a blank band.

## Liquid-Glass Language (exact recipes)
**Stage vignette** (`::after` on `.stage`, `pointer-events:none`):
```css
linear-gradient(105deg, rgba(4,16,24,.34) 0%, rgba(4,16,24,.20) 40%, rgba(4,16,24,.06) 78%, transparent 100%),
linear-gradient(180deg, rgba(4,16,24,.12) 0%, transparent 22%),
linear-gradient(0deg, rgba(4,16,24,.07), rgba(4,16,24,.07));
```
**Sidebar glass:** `linear-gradient(180deg, rgba(255,255,255,.125) 0%, rgba(255,255,255,.135) 13%, rgba(255,255,255,.098) 34%, rgba(255,255,255,.092) 100%)`, `backdrop-filter: blur(calc(18*var(--u))) saturate(115%)`, radius `calc(26*var(--u))`.

**Tool buttons / chip glass:** background `rgba(255,255,255,.15)` for tools and `rgba(255,255,255,.175)` for the chip, `backdrop-filter: blur(calc(16*var(--u))) saturate(115%)`. Tools are 52×52 circles; the chip is a pill of height 36, radius 18, padding-x 15.

**Right-rail cards** (the main liquid-glass panels): `linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.258) 24%, rgba(255,255,255,.252) 78%, rgba(255,255,255,.232) 100%)`, `backdrop-filter: blur(calc(26*var(--u))) saturate(118%)`, radius `calc(24*var(--u))` (big card 26).

**Specular sheen coda** (cards + chip): an `::after` of width 38% carrying `linear-gradient(100deg, transparent 0%, rgba(255,255,255,.17) 50%, transparent 100%)`, `skewX(-18deg)`, `animation: sheen 1.15s var(--e-soft) 2.55s 1 both`, where `@keyframes sheen { from { transform: translate3d(-150%,0,0) skewX(-18deg) } to { transform: translate3d(260%,0,0) skewX(-18deg) } }`.

Do NOT use opaque white cards, heavy drop shadows, or purple gradients. The glass must read as frosted over the storm photo.

## Layout (desktop absolute positions)
`.stage { position:fixed; inset:0; overflow:hidden }`

**1. Left sidebar** — `left:16u; top:14u; bottom:7u; width:72u`, flex column centred, padding-top 22u, padding-bottom 52u.
- Active white pip: `left:-2u; top:131u; width:5u; height:29u; radius:3u; box-shadow: 0 0 10u rgba(255,255,255,.55)`.
- Logo SVG 40×40 — a wave-circle mark: rounded square rx=12 with white stroked waves.
- Nav: margin-top 57.5u, gap 43u, icons 23×23 white. `aria-label`s: Dashboard (`aria-current="page"`), Reports, Explore regions, Calendar, Settings.
- Logout pinned at the bottom: Sign out.

**2. Header** — `top:22u; left:126u; right:37u; height:52u`. Left: "Welcome" at 16u / weight 400 / `rgba(255,255,255,.93)`, then "Calfin Danang" at 19.5u / weight 700 / letter-spacing −0.35u / margin-top 13u. Right: tools with gap 16u — Add location (+), Search, Notifications, avatar.

**3. Hero** — `left:126u; top:136u; max-width:560u`. Chip text exactly "Weather Forecast". H1 keeps the reference typo, split into two mask-revealed lines, each wrapped as `<span class="ln"><span>…</span></span>`: line 1 "Strom", line 2 "with Heavy Rain". Blurb copy, with the soft line breaks of the original: "Partly cloudy with occasional snow showers. High around 50°F. / Wind from the east 11 to 21 mph. Snow chance is 40%, with / rainfall expected to be less than an inch." Blurb width 480u, 15.2u / line-height 24u / weight 500 / tracking −0.3u / `rgba(255,255,255,.95)`.

**4. Forecast strip** — `left:126u; right:396u; bottom:99u`. Temps row (space-between): 11° cloud | 13° cloud2 | 14° cloud2 | 10° hail | 19° sun | 12° cloud, temperature type 37u weight 400 tracking −0.7u.
SVG wave chart `viewBox="0 0 835 230"` `preserveAspectRatio="none"`, height 230u, margin-top 43u, width 100%. A fill path plus three stroked outline paths (stroke-width 6.2 at opacity .17, 4.6 at .26, 3.4 at 1). The stroke uses a horizontal white opacity gradient `#wg`; the fill uses `#wf` with a vertical fade mask `#wfade` and clip paths `#wclip` / `#wclipr` for the wipe-in. Use `pathLength="1"` with `stroke-dasharray:1` for the draw animation. The cubic path starts `M0,79` and ends `L835,86`, after which the fill closes to the bottom.
Days under the chart (margin-top −31u): Sunday Monday Tuesday Wednesday(active, weight 600) Thursday Friday — 18u weight 500 `rgba(255,255,255,.88)`, `.on` is `#fff` weight 600.

**5. Right rail** — `right:38u; top:134u; bottom:95u; width:310u`, flex column gap 20u.
- Card A (`.card.big`): "Central Jakarta" with a pin icon; `10° C` (big-temp 92u weight 500 tracking −4.4u, the "C" in an `<i>`); metrics 19 mph (wind) | 40% (drop) | 15km/h (gust).
- Card B (`.card.row`, height 120u): Indonesia / North Jakarta / Mostly Sunny — 12° cloud.
- Card C: Indonesia / Bandung / Cloudy — 10° cloud.
- Card D: Indonesia / South Jakarta / Sunny — 14° cloud2.

## Icon Sprite
Inline SVG symbols in white / `currentColor`: `i-grid`, `i-chart`, `i-globe`, `i-cal`, `i-gear`, `i-out`, `i-plus`, `i-search`, `i-bell`, `i-pin`, `i-wind`, `i-drop`, `i-gust`, `i-cloud`, `i-cloud2`, `i-hail`, `i-sun`, `i-avatar` (vector fallback portrait). The logo is a circular clip holding seven horizontal wavy polyline strokes inside a soft square.

## Entry Choreography (must match the timings)
Keyframes: `riseIn` (opacity 0 → 1, `translateY(var(--ry,14px))` → none); `slideL` (from −26px X); `slideR` (from +30px X plus `scale(.985)`); `popIn` (scale .7 → 1); `growY` (scaleY 0 → 1, for the pip); `lineUp` (`translateY(115%)` → none, headline mask); `wipeDown` / `wipeRight` (clip-path); `drawLine` (stroke-dashoffset 1 → 0); `wipeX` (scaleX 0 → 1 on `#wclipr`, so the fill follows the pen); `sheen` as above. All use `animation-fill-mode: both`.

1. Sidebar `slideL .92s` delay .05s; logo `popIn .70s` @.26s; nav items `riseIn .60s` at .36 / .41 / .46 / .51 / .56s; logout @.70s; pip `growY .50s` @.68s.
2. hello `riseIn .70s` @.14s; who .80s @.22s; tools `popIn .58s` at .30 / .365 / .43 / .495s.
3. chip `wipeRight .80s` @.44s; h1 line 1 `lineUp 1.05s` @.56s, line 2 @.67s; blurb `wipeDown .90s` @.90s with `--e-soft`.
4. cards `slideR .95s` at .80 / .92 / 1.03 / 1.14s; place, big-temp, metrics and the row children staggered across ~1.04–1.36s.
5. temps `riseIn` from 1.26s in ~.07s steps.
6. Signature: `.wline` `drawLine 1.60s --e-pen` @1.50s, then `#wclipr` `wipeX 1.42s --e-pen` @1.72s so the fill trails the pen by ~220ms.
7. days `riseIn` from 2.10s in .055s steps.
8. Coda: `sheen` @2.55s.

Under `prefers-reduced-motion: reduce`, kill every animation and transition, hide the sheen `::after`, and show the chart fully drawn.

## Responsive
**≤860px** — reflow to a single scrolling column; `--u: min(100vw/430, 1.22px)`; the sidebar becomes a fixed bottom dock of height 64u; cards and forecast change order; the pip is hidden; sidebar and cards use `riseIn` instead of `slideL` / `slideR`.
**≤420px** — `--u: calc(100vw / 430)`.

## Interaction Microstates
`.nav a:hover` → opacity 1 plus `translateY(-1u)`. `.tool:hover` → background `rgba(255,255,255,.24)`. `:focus-visible` → a 2u white outline at offset 2u.

## Hard Constraints
- Keep the typo "Strom" (not "Storm").
- Keep all copy, temperatures, cities and metrics exactly as listed.
- Absolute desktop composition on the 1357×871 unit grid — not a generic CSS Grid dashboard.
- Liquid glass via `backdrop-filter` plus translucent white gradients and a final specular sheen — not solid frosted panels.
- The chart must DRAW itself (stroke dash) and then FILL by wiping left to right.
- No purple theme, no Inter-default marketing look-alikes beyond the specified Inter / Inter Tight, no stacked card shadows, no emoji.
- A single HTML file is preferred; the background may live at `./assets/storm-background.jpg` and the avatar at the Unsplash URL above.