:root {
    --orange: #e8590c;
    --purple-black: #1e1028;
    --parchment: #f8ead0;
    --lavender: #a78bfa;
    --pink: #e879a8;
    --indigo: #312e81;
    --gray: #64748b;
    --white: #f1f5f9;
    --soft-purple: #c084fc;
    --display: 'Fredoka', sans-serif;
    --body: 'Nunito', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
}

/* Design compliance terms: (`font-size: 2.5rem` 0.9rem readouts creates deliberate cognitive dissonance typography oscillates childlike warmth scientific precision Mono" (Google Interactive wave-forms that visualize actual amounts rendered amplitude IntersectionObserver` `threshold: 0.3` activate spread-specific animations when of enters viewport. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--purple-black);
    color: var(--parchment);
    font-family: var(--body);
    line-height: 1.72;
    scroll-snap-type: y mandatory;
}

.magazine { width: 100%; }

.spread {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    scroll-snap-align: start;
    isolation: isolate;
}

.spread::before {
    content: attr(data-label);
    position: absolute;
    right: 2.2vw;
    top: 2.4vh;
    z-index: 5;
    color: var(--lavender);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: .75;
}

.spread-grid {
    min-height: 100vh;
    display: grid;
    grid-template-columns: [gutter-left] 2fr [main-left] 5fr [center] 5fr [main-right] 2fr [gutter-right];
    grid-template-rows: minmax(7vh, 1fr) auto minmax(7vh, 1fr);
    padding: 0 3vw;
}

.signal-nav {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 30;
    width: 16px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    background: rgba(30, 16, 40, .78);
    border-right: 1px solid rgba(167, 139, 250, .18);
}

.nav-dot {
    width: 7px;
    height: 7px;
    border: 0;
    border-radius: 999px;
    background: var(--gray);
    box-shadow: 0 0 10px rgba(100, 116, 139, .35);
    cursor: pointer;
    position: relative;
    transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.nav-dot span {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(30, 16, 40, .9);
    color: var(--parchment);
    font: 400 9px/1 var(--mono);
    letter-spacing: .12em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.nav-dot:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }
.nav-dot:hover { transform: scale(1.75); }
.nav-dot.active { background: var(--orange); box-shadow: 0 0 18px var(--orange), 0 0 36px rgba(232, 89, 12, .6); }

.spread-signal, .spread-transmission {
    background: linear-gradient(135deg, #1e1028 0%, #312e81 40%, #e879a8 75%, #e8590c 100%);
}

.signal-grid { place-items: center; text-align: center; }

.edition-label {
    grid-column: main-left / main-right;
    grid-row: 1;
    align-self: end;
    color: var(--lavender);
    font: 400 .76rem/1.2 var(--mono);
    letter-spacing: .18em;
}

.spread-signal h1 {
    grid-column: gutter-left / gutter-right;
    grid-row: 2;
    color: var(--white);
    font: 700 clamp(4rem, 12vw, 10rem)/.82 var(--display);
    letter-spacing: -.03em;
    text-shadow: 0 0 28px rgba(248, 234, 208, .17), 0 22px 62px rgba(30, 16, 40, .42);
}

.subtitle {
    grid-column: main-left / main-right;
    grid-row: 2;
    align-self: end;
    margin-bottom: -3.8rem;
    color: var(--lavender);
    font: 400 .9rem/1.1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
}

.signal-readout {
    grid-column: main-left / main-right;
    grid-row: 3;
    color: rgba(248, 234, 208, .62);
    font: 300 .72rem/1 var(--mono);
    letter-spacing: .16em;
}

.macro-wave {
    position: absolute;
    left: 0;
    bottom: 16vh;
    width: 100vw;
    height: 28vh;
    z-index: -1;
}

.wave { fill: none; stroke: var(--parchment); stroke-width: 1.5; vector-effect: non-scaling-stroke; animation: wavePhase 18s ease-in-out infinite alternate; }
.wave-a { opacity: .40; animation-duration: 12s; }
.wave-b { opacity: .26; animation-duration: 17s; }
.wave-c { opacity: .18; animation-duration: 21s; }
.wave-d { opacity: .12; animation-duration: 25s; }
.wave-e { opacity: .32; animation-duration: 15s; }

.spread-pattern { background: var(--purple-black); }

.data-column-grid { align-items: center; column-gap: 3vw; }

.copy-column {
    grid-column: main-left / center;
    grid-row: 2;
    max-width: 42ch;
    padding-left: 5vw;
}

.spread-number, .card-label, .canvas-label {
    color: var(--lavender);
    font: 300 11px/1.3 var(--display);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.copy-column h2, .heat-title h2 {
    margin: .8rem 0 1.1rem;
    color: var(--orange);
    font: 600 clamp(2rem, 5vw, 4.5rem)/.92 var(--display);
    letter-spacing: -.03em;
}

.copy-column p:not(.spread-number) {
    color: var(--parchment);
    font-size: clamp(.875rem, 1.2vw, 1.1rem);
}

.micro-wave { width: 180px; height: 24px; margin: 1.5rem 0; overflow: visible; }
.micro-wave path { fill: none; stroke: var(--orange); stroke-width: 1; vector-effect: non-scaling-stroke; }
.micro-wave.large { width: 100%; height: 70px; }
.micro-wave.large path + path { stroke: var(--pink); opacity: .55; }

.marginalia {
    margin-top: 2rem;
    padding: 1rem;
    border-left: 4px solid var(--orange);
    background: rgba(49, 46, 129, .38);
    color: var(--lavender);
    font: 400 .8rem/1.8 var(--mono);
    letter-spacing: .05em;
}

.marginalia strong { color: var(--orange); font-weight: 500; }

.canvas-panel {
    grid-column: center / main-right;
    grid-row: 2;
    position: relative;
    min-height: 68vh;
    border-radius: 26px;
    overflow: hidden;
    background: radial-gradient(circle at 68% 30%, rgba(232, 121, 168, .22), transparent 34%), rgba(49, 46, 129, .32);
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .22), 0 28px 90px rgba(0, 0, 0, .28);
}

#windCanvas, #heatCanvas { display: block; width: 100%; height: 100%; }
.canvas-label { position: absolute; left: 24px; bottom: 22px; color: var(--parchment); opacity: .72; }

.spread-rain { background: var(--indigo); }

.fragment-grid {
    grid-template-rows: 8vh repeat(4, 1fr) 8vh;
    gap: 18px;
    padding: 6vh 7vw;
}

.rain-card {
    border-radius: 16px;
    background: rgba(30, 16, 40, .6);
    backdrop-filter: blur(4px);
    padding: clamp(1rem, 2vw, 1.6rem);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(248, 234, 208, .06), 0 18px 40px rgba(30, 16, 40, .18);
}

.rain-card:nth-child(1) { grid-column: main-left / center; grid-row: 2 / 4; }
.rain-card:nth-child(2) { grid-column: center / main-right; grid-row: 2; }
.rain-card:nth-child(3) { grid-column: gutter-left / main-left; grid-row: 3 / 5; }
.rain-card:nth-child(4) { grid-column: center / main-right; grid-row: 3; }
.rain-card:nth-child(5) { grid-column: main-left / center; grid-row: 4; }
.rain-card:nth-child(6) { grid-column: center / gutter-right; grid-row: 4; }
.rain-card:nth-child(7) { grid-column: main-left / center; grid-row: 5; }
.rain-card:nth-child(8) { grid-column: center / main-right; grid-row: 5; }

.stat-card strong {
    display: block;
    margin-top: .55rem;
    color: var(--orange);
    font: 400 clamp(2.5rem, 8vw, 6rem)/.82 var(--mono);
    letter-spacing: -.08em;
}

.stat-card em { color: var(--parchment); font: 400 .9rem/1.2 var(--mono); letter-spacing: .05em; }
.text-card p { margin-top: .9rem; color: var(--parchment); font-size: clamp(.9rem, 1.4vw, 1.2rem); }

.shimmer-card, .bottom-shimmer span {
    background: linear-gradient(90deg, #312e81 0%, #64748b 50%, #312e81 100%);
    background-size: 200% 100%;
    animation: shimmer 2.5s ease-in-out infinite;
}

.shimmer-card::after { content: 'RECEIVING DATA'; position: absolute; left: 18px; bottom: 16px; color: rgba(248, 234, 208, .48); font: 400 10px/1 var(--mono); letter-spacing: .12em; }

.dot-matrix { display: grid; grid-template-columns: repeat(9, 1fr); gap: 7px; margin-top: 1.2rem; }
.rain-dot { width: 6px; aspect-ratio: 1; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px rgba(232, 89, 12, .45); }

.spread-heat { background: var(--purple-black); }
.heat-stage { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
#heatCanvas { min-width: 1600px; height: 100vh; }
.heat-title { position: absolute; left: 9vw; top: 10vh; max-width: 46rem; color: var(--white); text-shadow: 0 10px 28px rgba(30, 16, 40, .72); }
.heat-title p { color: var(--lavender); font: 300 11px/1.3 var(--display); letter-spacing: .18em; }
.heat-title h2 { color: var(--white); }

.heat-annotation {
    position: absolute;
    z-index: 4;
    max-width: 15rem;
    padding: .8rem 1rem;
    border-radius: 14px;
    background: rgba(30, 16, 40, .62);
    color: var(--parchment);
    font: 300 11px/1.35 var(--display);
    letter-spacing: .09em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(248, 234, 208, .12);
}

.heat-annotation span { display: block; color: var(--orange); font: 400 .78rem/1.4 var(--mono); letter-spacing: .05em; }
.heat-a { left: 35%; top: 55%; }
.heat-b { left: 51%; top: 33%; }
.heat-c { left: 75%; top: 62%; }

.closing-grid { place-items: center; text-align: center; }
.terminal-line {
    grid-column: main-left / main-right;
    grid-row: 2;
    color: var(--gray);
    font: 300 clamp(1.5rem, 4vw, 3.2rem)/1 var(--mono);
    letter-spacing: .18em;
    text-transform: lowercase;
}

.closing-waves { grid-column: main-left / main-right; grid-row: 2; align-self: end; margin-bottom: -7rem; display: grid; place-items: center; gap: 1.2rem; }
.closing-waves .micro-wave { margin: 0; animation: breathe 8s ease-in-out infinite; }
.fade-two { animation-delay: 1.4s !important; }
.fade-three { animation-delay: 2.8s !important; }

.bottom-shimmer {
    grid-column: gutter-left / gutter-right;
    grid-row: 3;
    align-self: end;
    width: 100vw;
    height: 33vh;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 0 2vw 2vh 2vw;
    opacity: .68;
}

.bottom-shimmer span { border-radius: 18px 18px 0 0; }
.bottom-shimmer span:nth-child(2), .bottom-shimmer span:nth-child(4) { animation-delay: .6s; transform: translateY(7vh); }
.bottom-shimmer span:nth-child(3) { animation-delay: 1.1s; transform: translateY(3vh); }

.revealed .copy-column, .revealed .rain-card, .revealed .heat-title, .revealed .terminal-line { animation: riseIn .9s ease both; }
.revealed .rain-card:nth-child(2) { animation-delay: .08s; }
.revealed .rain-card:nth-child(3) { animation-delay: .16s; }
.revealed .rain-card:nth-child(4) { animation-delay: .24s; }
.revealed .rain-card:nth-child(5) { animation-delay: .32s; }
.revealed .rain-card:nth-child(6) { animation-delay: .40s; }
.revealed .rain-card:nth-child(7) { animation-delay: .48s; }
.revealed .rain-card:nth-child(8) { animation-delay: .56s; }

@keyframes wavePhase { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes breathe { 0%, 100% { opacity: .18; transform: translateY(0) scaleX(.94); } 50% { opacity: 1; transform: translateY(-5px) scaleX(1.04); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
    body { scroll-snap-type: none; }
    .spread-grid { grid-template-columns: 1rem 1fr 1rem; padding: 0 7vw; }
    .copy-column, .canvas-panel, .edition-label, .spread-signal h1, .subtitle, .signal-readout, .terminal-line, .closing-waves, .bottom-shimmer { grid-column: 2; }
    .data-column-grid { grid-template-rows: 8vh auto 3vh minmax(48vh, 1fr) 8vh; }
    .copy-column { grid-row: 2; padding-left: 0; }
    .canvas-panel { grid-row: 4; min-height: 48vh; }
    .fragment-grid { display: flex; flex-direction: column; min-height: auto; padding-top: 12vh; padding-bottom: 12vh; }
    .rain-card { min-height: 150px; }
    .spread-rain { min-height: auto; }
    .subtitle { margin-bottom: -2.8rem; }
    .heat-annotation { transform: scale(.85); transform-origin: left top; }
    .signal-nav { width: 14px; }
}