:root {
    /* Design typography tokens: IBM Plex Mono only for tiny probability readouts; Space Grotesk** Grotesk* Grotes* Grotesk Grotes for large forecast words. */
    --cream: #FFF4D6;
    --pool: #076F9F;
    --sky: #7FCBFF;
    --violet: #8C7CFF;
    --lime: #9CFFB8;
    --ink: #173047;
    --mist: #DDF7FF;
    --glint: #FF9D4D;
    --glass: #F8FFFF;
    --mx: 50vw;
    --my: 50vh;
    --scroll: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Nunito Sans", sans-serif;
    color: var(--ink);
    background: linear-gradient(180deg, var(--mist) 0%, var(--sky) 45%, var(--pool) 100%);
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.weather-room {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(248,255,255,.92) 0 56px, rgba(248,255,255,.28) 57px 130px, transparent 132px),
        linear-gradient(180deg, #DDF7FF, #7FCBFF 36%, #076F9F 100%);
}

.atmosphere {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 18%, rgba(255,244,214,.86), transparent 18%),
        radial-gradient(circle at 78% 12%, rgba(156,255,184,.5), transparent 17%),
        radial-gradient(circle at 70% 72%, rgba(140,124,255,.34), transparent 23%),
        radial-gradient(circle at 28% 82%, rgba(255,157,77,.25), transparent 14%);
    filter: blur(10px) saturate(1.1);
    transform: translateY(calc(var(--scroll) * -8px));
}

.atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .2;
    background-image:
        linear-gradient(90deg, rgba(248,255,255,.38) 1px, transparent 1px),
        linear-gradient(180deg, rgba(248,255,255,.34) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 50% 45%, black, transparent 72%);
}

.cursor-lens {
    position: fixed;
    left: 0;
    top: 0;
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    z-index: 30;
    pointer-events: none;
    border-radius: 50%;
    border: 1px solid rgba(248,255,255,.74);
    background: radial-gradient(circle at 32% 24%, rgba(248,255,255,.95), rgba(221,247,255,.34) 34%, rgba(127,203,255,.12) 68%, transparent 70%);
    box-shadow: inset -18px -22px 34px rgba(7,111,159,.16), inset 12px 10px 16px rgba(255,255,255,.76), 0 18px 48px rgba(23,48,71,.12);
    backdrop-filter: blur(3px) saturate(1.24);
    transform: translate3d(var(--mx), var(--my), 0) scale(.75);
    transition: transform .18s ease-out, opacity .3s ease;
    opacity: .72;
}

.bubble-nav {
    position: fixed;
    right: 22px;
    top: 50%;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateY(-50%);
}

.nav-bubble {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(248,255,255,.72);
    background: radial-gradient(circle at 32% 26%, var(--glass), rgba(221,247,255,.54) 38%, rgba(127,203,255,.22));
    box-shadow: inset 0 0 16px rgba(248,255,255,.75), 0 12px 24px rgba(7,111,159,.14);
    position: relative;
    transition: transform .4s ease, background .4s ease;
}

.nav-bubble span {
    position: absolute;
    right: 52px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    opacity: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--pool);
    transition: opacity .28s ease, transform .28s ease;
}

.nav-bubble:hover span, .nav-bubble.is-current span { opacity: 1; transform: translateY(-50%); }
.nav-bubble.is-current { transform: scale(1.18); background: radial-gradient(circle at 32% 24%, #F8FFFF, #9CFFB8 48%, rgba(127,203,255,.35)); }

.scene {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    padding: 8vh 9vw;
    overflow: hidden;
}

.depth { position: absolute; pointer-events: none; }
.back { inset: 0; z-index: 0; }
.mid { z-index: 2; }
.fore { z-index: 5; }

.glass-pane {
    border: 1px solid rgba(248,255,255,.72);
    background: linear-gradient(135deg, rgba(248,255,255,.5), rgba(221,247,255,.2) 45%, rgba(127,203,255,.16));
    box-shadow: inset 12px 14px 22px rgba(248,255,255,.68), inset -18px -18px 36px rgba(7,111,159,.13), 0 34px 80px rgba(23,48,71,.14);
    backdrop-filter: blur(18px) saturate(1.35);
}

.scene-copy {
    max-width: 680px;
    left: 9vw;
    top: 18vh;
    filter: drop-shadow(0 12px 26px rgba(248,255,255,.34));
}

.right-copy { left: auto; right: 9vw; top: 20vh; max-width: 610px; }
.final-copy { text-align: center; left: 50%; top: auto; bottom: 9vh; transform: translateX(-50%); width: min(820px, 82vw); }

.sensor-label {
    margin: 0 0 16px;
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    letter-spacing: .13em;
    color: var(--pool);
    background: rgba(248,255,255,.48);
    border: 1px solid rgba(248,255,255,.62);
    backdrop-filter: blur(8px);
}

h1, h2 {
    font-family: "Space Grotesk", sans-serif;
    margin: 0;
    line-height: .92;
    letter-spacing: -.06em;
    color: var(--ink);
}

h1 { font-size: clamp(58px, 11vw, 156px); max-width: 980px; }
h2 { font-size: clamp(46px, 8vw, 118px); max-width: 900px; }

.fraunces-note {
    font-family: "Fraunces", serif;
    font-size: clamp(18px, 2.2vw, 31px);
    line-height: 1.25;
    color: rgba(23,48,71,.78);
    max-width: 650px;
}

.mist-one { background: radial-gradient(circle at 50% 45%, rgba(248,255,255,.72), transparent 30%), linear-gradient(180deg, #DDF7FF, rgba(127,203,255,.45)); }
.gate-pane { width: min(78vw, 980px); height: min(62vh, 590px); border-radius: 52% 48% 60% 40% / 42% 56% 44% 58%; transform: rotate(-4deg); }
.word-lens { position: absolute; left: 50%; top: 44%; width: clamp(220px, 34vw, 480px); height: clamp(220px, 34vw, 480px); border-radius: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; font-family: "Space Grotesk", sans-serif; font-size: clamp(42px, 7vw, 92px); font-weight: 700; letter-spacing: -.08em; color: var(--ink); background: radial-gradient(circle at 30% 24%, #F8FFFF 0 10%, rgba(248,255,255,.5) 20%, rgba(127,203,255,.28) 56%, rgba(7,111,159,.08) 72%); box-shadow: inset 18px 20px 22px rgba(248,255,255,.76), inset -26px -30px 46px rgba(7,111,159,.2), 0 30px 70px rgba(7,111,159,.18); animation: bubbleRise 7s ease-in-out infinite; }
.word-part { display: inline-block; }
.ye { transform: scale(1.12) translateX(7px); color: var(--pool); }
.sang { filter: blur(.55px); opacity: .86; }
.xyz { position: absolute; right: 68px; bottom: 82px; font-size: .24em; letter-spacing: .04em; color: var(--glint); }
.dew-writing { position: absolute; right: 9%; bottom: 12%; font-family: "Fraunces", serif; font-size: clamp(18px, 2vw, 28px); color: rgba(7,111,159,.7); padding: 16px 24px; border-radius: 50px; background: rgba(248,255,255,.25); }

.pond-rings { background: radial-gradient(ellipse at 30% 60%, transparent 0 16%, rgba(248,255,255,.4) 17% 18%, transparent 19% 28%, rgba(156,255,184,.28) 29% 30%, transparent 31%), linear-gradient(180deg, rgba(221,247,255,.8), rgba(127,203,255,.72)); }
.pond-surface { left: 7vw; bottom: 12vh; width: min(62vw, 820px); height: 58vh; border-radius: 48% 52% 44% 56% / 58% 40% 60% 42%; transform: rotate(5deg); }
.probability-orbit { position: absolute; inset: 12%; animation: slowSpin 24s linear infinite; }
.probability-orbit span { position: absolute; font-family: "Space Grotesk", sans-serif; font-size: clamp(28px, 5vw, 76px); color: rgba(23,48,71,.2); }
.probability-orbit span:nth-child(1) { left: 12%; top: 5%; color: var(--violet); }
.probability-orbit span:nth-child(2) { right: 6%; top: 33%; color: var(--pool); }
.probability-orbit span:nth-child(3) { left: 24%; bottom: 4%; color: var(--glint); }
.probability-orbit span:nth-child(4) { right: 26%; bottom: 18%; color: var(--lime); }
.thermometer { position: absolute; left: 16%; bottom: 14%; width: 72px; height: 330px; border-radius: 44px; background: rgba(248,255,255,.38); }
.thermometer i { position: absolute; left: 14px; right: 14px; bottom: 16px; height: 58%; border-radius: 999px; background: linear-gradient(180deg, var(--lime), var(--sky), var(--pool)); animation: liquidLevel 5.6s ease-in-out infinite; }
.thermometer b { position: absolute; left: 50%; bottom: -26px; width: 110px; height: 110px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 33% 25%, #F8FFFF, var(--lime) 40%, rgba(7,111,159,.4)); }
.bubble-note { position: absolute; right: 12%; top: 18%; width: 190px; height: 190px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 28px; font-family: "Fraunces", serif; background: radial-gradient(circle at 34% 26%, #F8FFFF, rgba(221,247,255,.6) 42%, rgba(127,203,255,.22)); color: rgba(23,48,71,.7); }
.bubble-note.second { left: 41%; top: 58%; width: 150px; height: 150px; }

.checker-light { background: linear-gradient(180deg, rgba(127,203,255,.36), rgba(221,247,255,.65)), repeating-conic-gradient(from 45deg, rgba(248,255,255,.22) 0 25%, transparent 0 50%) 0 0 / 80px 80px; }
.aquarium-tank { right: 8vw; width: min(72vw, 920px); height: 64vh; border-radius: 70px 34px 90px 44px; transform: rotate(-2deg); }
.calendar-current { position: absolute; left: 8%; top: 10%; font-family: "Space Grotesk", sans-serif; font-size: clamp(54px, 10vw, 140px); color: rgba(7,111,159,.15); letter-spacing: -.08em; }
.calendar-tiles span { position: absolute; width: 118px; height: 118px; border-radius: 28px; display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; font-size: 24px; color: var(--pool); background: rgba(248,255,255,.46); box-shadow: inset 8px 8px 18px rgba(248,255,255,.7), 0 18px 34px rgba(23,48,71,.1); animation: tileFloat 8s ease-in-out infinite; }
.calendar-tiles span:nth-child(1) { left: 16%; top: 34%; }
.calendar-tiles span:nth-child(2) { left: 34%; top: 18%; animation-delay: -1s; }
.calendar-tiles span:nth-child(3) { right: 26%; top: 30%; animation-delay: -2s; }
.calendar-tiles span:nth-child(4) { right: 10%; top: 50%; animation-delay: -3s; }
.calendar-tiles span:nth-child(5) { left: 28%; bottom: 13%; animation-delay: -4s; }
.calendar-tiles span:nth-child(6) { right: 39%; bottom: 22%; animation-delay: -5s; }
.calendar-tiles span:nth-child(7) { left: 7%; bottom: 18%; color: var(--glint); animation-delay: -6s; }
.calendar-tiles span:nth-child(8) { right: 15%; top: 14%; color: var(--violet); animation-delay: -7s; }

.elevator-shaft { background: linear-gradient(90deg, rgba(7,111,159,.08), rgba(248,255,255,.4), rgba(7,111,159,.08)), linear-gradient(180deg, rgba(221,247,255,.8), rgba(7,111,159,.64)); }
.elevator-doors { left: 10vw; width: min(56vw, 680px); height: 72vh; border-radius: 40px; overflow: hidden; }
.door { position: absolute; top: 0; bottom: 0; width: 51%; background: linear-gradient(120deg, rgba(248,255,255,.42), rgba(127,203,255,.1)); border: 1px solid rgba(248,255,255,.48); transition: transform 1.2s ease; }
.left-door { left: 0; }
.right-door { right: 0; }
.scene.in-view .left-door { transform: translateX(-16%); }
.scene.in-view .right-door { transform: translateX(16%); }
.floor-readout { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-family: "IBM Plex Mono", monospace; color: var(--lime); background: rgba(23,48,71,.58); padding: 10px 18px; border-radius: 999px; }
.rising-pane { position: absolute; left: 50%; bottom: 8%; width: 320px; height: 320px; transform: translateX(-50%); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 31% 20%, #F8FFFF, rgba(156,255,184,.56), rgba(7,111,159,.18)); animation: elevatorRise 6s ease-in-out infinite; }
.rising-pane span { font-family: "Space Grotesk", sans-serif; font-size: 54px; letter-spacing: -.06em; }
.rising-pane em { position: absolute; bottom: 80px; font-family: "Fraunces", serif; color: var(--pool); }

.violet-halo { background: radial-gradient(circle at 56% 38%, rgba(140,124,255,.44), transparent 28%), linear-gradient(180deg, rgba(127,203,255,.85), rgba(221,247,255,.62)); }
.chamber-cloud { right: 8vw; width: min(68vw, 880px); height: 58vh; border-radius: 42% 58% 36% 64% / 56% 38% 62% 44%; }
.soft-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 0; border-radius: 999px; padding: 20px 34px; font-family: "Nunito Sans", sans-serif; font-weight: 800; font-size: 17px; color: var(--ink); background: radial-gradient(circle at 35% 20%, #F8FFFF, #FFF4D6 42%, #FF9D4D); box-shadow: inset 8px 10px 16px rgba(248,255,255,.86), 0 22px 44px rgba(23,48,71,.16); cursor: pointer; }
.maybe-beads span { position: absolute; min-width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font-family: "Space Grotesk", sans-serif; font-weight: 700; color: rgba(23,48,71,.74); background: radial-gradient(circle at 30% 22%, #F8FFFF, rgba(221,247,255,.62), rgba(140,124,255,.2)); animation: beadDrift 7s ease-in-out infinite; }
.maybe-beads span:nth-child(1) { left: 12%; top: 16%; }
.maybe-beads span:nth-child(2) { right: 16%; top: 12%; animation-delay: -1.2s; }
.maybe-beads span:nth-child(3) { left: 22%; bottom: 15%; animation-delay: -2.4s; }
.maybe-beads span:nth-child(4) { right: 22%; bottom: 18%; animation-delay: -3.6s; }
.maybe-beads span:nth-child(5) { left: 46%; top: 9%; animation-delay: -4.8s; }
.revealed-line { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); width: min(540px, 76%); text-align: center; font-family: "Fraunces", serif; font-size: clamp(20px, 2.4vw, 34px); opacity: 0; filter: blur(14px); transition: opacity 1s ease, filter 1s ease, transform 1s ease; }
.revealed-line.is-clear { opacity: 1; filter: blur(0); transform: translateX(-50%) translateY(-18px); }

.clear-sky { background: radial-gradient(circle at 50% 38%, rgba(255,244,214,.82), transparent 22%), linear-gradient(180deg, #DDF7FF, #7FCBFF); }
.bell-orb { width: min(68vw, 620px); height: min(68vw, 620px); border-radius: 50%; display: grid; place-items: center; }
.orb-core { width: 55%; height: 55%; border-radius: 50%; background: radial-gradient(circle at 34% 24%, #F8FFFF, #FFF4D6 22%, #9CFFB8 48%, rgba(7,111,159,.28)); box-shadow: 0 0 70px rgba(255,244,214,.8), inset -30px -34px 54px rgba(7,111,159,.18); animation: bellPulse 5s ease-in-out infinite; }
.orb-rim { position: absolute; inset: 8%; border-radius: 50%; border: 1px solid rgba(248,255,255,.8); box-shadow: inset 0 0 55px rgba(248,255,255,.68); }
.bell-caption { position: absolute; bottom: 18%; font-family: "Space Grotesk", sans-serif; font-size: clamp(28px, 5vw, 74px); font-weight: 700; letter-spacing: -.07em; color: rgba(23,48,71,.72); }

.bubble-field { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bubble { position: absolute; width: var(--size); height: var(--size); left: var(--left); bottom: -12vh; border-radius: 50%; background: radial-gradient(circle at 30% 22%, rgba(248,255,255,.95), rgba(221,247,255,.38) 38%, rgba(127,203,255,.18) 68%, transparent 70%); box-shadow: inset 8px 8px 14px rgba(248,255,255,.68), inset -10px -12px 22px rgba(7,111,159,.12); animation: floatBubble var(--dur) linear infinite; animation-delay: var(--delay); opacity: .74; }

@keyframes bubbleRise { 0%,100% { transform: translate(-50%, -49%) scale(.96); } 50% { transform: translate(-50%, -56%) scale(1.04); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes liquidLevel { 0%,100% { height: 48%; } 50% { height: 74%; } }
@keyframes tileFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-28px) rotate(5deg); } }
@keyframes elevatorRise { 0%,100% { transform: translateX(-50%) translateY(24px) scale(.95); } 50% { transform: translateX(-50%) translateY(-38px) scale(1.04); } }
@keyframes beadDrift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(16px,-24px,0); } }
@keyframes bellPulse { 0%,100% { transform: scale(.96); filter: saturate(1); } 50% { transform: scale(1.05); filter: saturate(1.26); } }
@keyframes floatBubble { from { transform: translate3d(0, 0, 0) scale(.75); } to { transform: translate3d(var(--drift), -122vh, 0) scale(1.08); } }

@media (max-width: 760px) {
    .cursor-lens { display: none; }
    .bubble-nav { right: 10px; gap: 8px; }
    .nav-bubble { width: 30px; height: 30px; }
    .scene { padding: 9vh 6vw; }
    .scene-copy, .right-copy { left: 6vw; right: 6vw; top: 12vh; max-width: 86vw; }
    .gate-pane, .pond-surface, .aquarium-tank, .elevator-doors, .chamber-cloud { width: 88vw; left: 6vw; right: auto; height: 56vh; bottom: 7vh; }
    .final-copy { bottom: 6vh; }
    .calendar-tiles span { width: 82px; height: 82px; font-size: 18px; }
}