:root {
  /* Space Mono only for frequency numbers */
  --navy: #07111F;
  --blue: #5BE7FF;
  --violet: #7B5CFF;
  --plum: #2A1235;
  --milk: #F6F0DC;
  --coral: #FF6F91;
  --gold: #C7933E;
  --title: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --body: "DM Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Space Mono", "SFMono-Regular", Consolas, monospace;
  --hand: Caveat, "Bradley Hand", "Segoe Print", cursive;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--navy); color: var(--milk); font-family: var(--body); }
body { cursor: crosshair; }

.grain { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .22; background-image: radial-gradient(circle at 20% 10%, rgba(246,240,220,.12) 0 1px, transparent 1.8px), radial-gradient(circle at 80% 70%, rgba(91,231,255,.1) 0 1px, transparent 1.6px), linear-gradient(115deg, transparent 0 48%, rgba(246,240,220,.035) 50%, transparent 52%); background-size: 29px 31px, 41px 37px, 100% 100%; mix-blend-mode: screen; }
#signalCanvas { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

.gallery { height: 100vh; width: 100vw; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; position: relative; z-index: 3; }
.gallery::-webkit-scrollbar { display: none; }
.panel { position: relative; flex: 0 0 100vw; height: 100vh; scroll-snap-align: start; overflow: hidden; margin-right: -5vw; isolation: isolate; background: radial-gradient(circle at 50% 90%, rgba(123,92,255,.12), transparent 38%), var(--navy); }
.panel::before { content: ""; position: absolute; inset: -10%; z-index: -2; background: radial-gradient(circle at 20% 50%, rgba(42,18,53,.78), transparent 38%), radial-gradient(circle at 80% 20%, rgba(91,231,255,.08), transparent 30%); filter: blur(10px); }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 0 82%, rgba(7,17,31,.25), rgba(42,18,53,.58)); }

.tuner { position: fixed; left: 28px; top: 24px; z-index: 30; display: flex; gap: 12px; align-items: center; color: var(--milk); }
.dial { width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(91,231,255,.35); background: radial-gradient(circle, rgba(246,240,220,.09), rgba(42,18,53,.78) 54%, rgba(7,17,31,.96)); box-shadow: 0 0 28px rgba(91,231,255,.12), inset 0 0 16px rgba(199,147,62,.2); position: relative; transition: transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.dial:hover, body.tuned .dial { box-shadow: 0 0 38px rgba(91,231,255,.36), inset 0 0 18px rgba(199,147,62,.32); }
.dial-notch { position: absolute; width: 3px; height: 21px; top: 7px; left: calc(50% - 1px); background: var(--blue); border-radius: 4px; box-shadow: 0 0 10px var(--blue); }
.dial-core { position: absolute; inset: 21px; border-radius: 50%; background: var(--gold); opacity: .75; }
.station-readout { font-family: var(--mono); font-size: 15px; letter-spacing: .08em; color: var(--blue); text-shadow: 0 0 12px rgba(91,231,255,.7); }
.station-readout small { display: block; color: rgba(246,240,220,.62); font-size: 9px; margin-top: 2px; }
.progress-wire { position: fixed; left: 0; right: 0; bottom: 24px; height: 1px; z-index: 30; background: rgba(91,231,255,.16); }
.progress-wire span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--violet), transparent); box-shadow: 0 0 14px var(--blue); }

.scene-title { position: absolute; left: 10vw; top: 11vh; font-family: var(--title); font-size: clamp(54px, 10vw, 148px); font-style: italic; line-height: .82; color: rgba(246,240,220,.88); letter-spacing: -.06em; text-shadow: 0 0 30px rgba(91,231,255,.12); transform: rotate(-4deg); }
.ghost-title { opacity: .22; left: 18vw; top: 18vh; }
.caption-card { position: absolute; max-width: 420px; padding: 20px 22px; border: 1px solid rgba(91,231,255,.24); background: linear-gradient(135deg, rgba(42,18,53,.74), rgba(7,17,31,.55)); box-shadow: 0 22px 80px rgba(0,0,0,.38), inset 0 0 24px rgba(123,92,255,.1); backdrop-filter: blur(8px); }
.caption-card h1, .caption-card h2 { margin: 6px 0 10px; font-family: var(--title); font-weight: 600; letter-spacing: -.045em; line-height: .92; }
.caption-card h1 { font-size: clamp(54px, 8vw, 106px); }
.caption-card h2 { font-size: clamp(36px, 5vw, 72px); }
.caption-card p { margin: 0; line-height: 1.55; color: rgba(246,240,220,.82); }
.mono { font-family: var(--mono); color: var(--blue) !important; font-size: 11px; letter-spacing: .12em; text-transform: lowercase; }
.whisper { font-family: var(--title); font-style: italic; font-size: 22px; color: var(--milk) !important; }
.handwritten { font-family: var(--hand); }

.stream { position: absolute; inset: auto -4vw 16vh -4vw; width: 108vw; height: 42vh; overflow: visible; }
.stream path { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 11px rgba(91,231,255,.85)); stroke-dasharray: 18 12; animation: current 8s linear infinite; }
.stream-tape path { stroke: var(--gold); stroke-width: 7; stroke-dasharray: 32 10; filter: drop-shadow(0 0 8px rgba(199,147,62,.8)); }
.stream-river path { stroke: url(#none); stroke: var(--blue); stroke-width: 11; opacity: .72; stroke-dasharray: 8 18; }
.stream-orchard .branch { stroke: var(--violet); stroke-width: 2.4; stroke-dasharray: 4 11; }
.stream-cable path { stroke: var(--milk); stroke-width: 3; stroke-dasharray: 900; opacity: .8; }
@keyframes current { to { stroke-dashoffset: -240; } }

.tuning { background: radial-gradient(circle at 62% 56%, rgba(91,231,255,.08), transparent 16%), radial-gradient(circle at 30% 80%, rgba(42,18,53,.6), transparent 34%), #030813; }
.dark-dial-field { position: absolute; right: 13vw; top: 24vh; width: 28vw; height: 28vw; min-width: 260px; min-height: 260px; border-radius: 50%; border: 1px solid rgba(91,231,255,.08); background: radial-gradient(circle, rgba(91,231,255,.14), transparent 4%, rgba(246,240,220,.03) 5% 6%, transparent 7%); }
.microphone-bead { position: absolute; left: 50%; top: 50%; width: 22px; height: 36px; border-radius: 14px; background: linear-gradient(var(--milk), var(--blue)); box-shadow: 0 0 45px var(--blue); transform: translate(-50%, -50%); }
.radio-rings, .radio-rings::before, .radio-rings::after { position: absolute; inset: 28%; border-radius: 50%; border: 1px solid rgba(91,231,255,.22); animation: ring 4s ease-out infinite; content: ""; }
.radio-rings::before { inset: -42%; animation-delay: .8s; }
.radio-rings::after { inset: -82%; animation-delay: 1.6s; }
@keyframes ring { 0% { opacity: 0; transform: scale(.72); } 30% { opacity: .6; } 100% { opacity: 0; transform: scale(1.25); } }
.thin-signal { position: absolute; left: 0; right: 0; top: 61vh; height: 1px; background: linear-gradient(90deg, transparent, rgba(91,231,255,.24), transparent); box-shadow: 0 0 0 transparent; transition: box-shadow .6s, height .6s; }
body.tuned .thin-signal { height: 2px; box-shadow: 0 0 24px var(--blue); }
.opening-copy { left: 9vw; bottom: 13vh; transform: rotate(-1.5deg); }

.rapids { background: radial-gradient(circle at 30% 68%, rgba(91,231,255,.13), transparent 30%), linear-gradient(145deg, var(--navy), var(--plum)); }
.caption-strip { position: absolute; padding: 11px 18px; background: rgba(246,240,220,.86); color: var(--plum); font-family: var(--body); font-weight: 700; box-shadow: 0 12px 32px rgba(0,0,0,.28); animation: drift 7s ease-in-out infinite alternate; }
.strip-one { left: 14vw; top: 43vh; transform: rotate(-3deg); }
.strip-two { left: 45vw; top: 27vh; transform: rotate(2deg); animation-delay: -2s; }
.strip-three { right: 10vw; bottom: 21vh; transform: rotate(-1deg); animation-delay: -4s; }
@keyframes drift { to { translate: 28px -18px; filter: blur(.2px); } }
.bubble-note { position: absolute; left: 62vw; top: 58vh; font-family: var(--hand); color: var(--blue); font-size: 30px; animation: bubble 5s ease-in-out infinite; }
@keyframes bubble { 50% { transform: translateY(-34px) rotate(-5deg); opacity: .62; } }
.rapids-copy { left: 11vw; top: 18vh; }

.lagoon { background: radial-gradient(ellipse at 55% 75%, rgba(199,147,62,.16), transparent 34%), radial-gradient(circle at 90% 35%, rgba(123,92,255,.22), transparent 34%), var(--navy); }
.lagoon-title { left: 50vw; top: 10vh; }
.cassette-shell { position: absolute; left: 16vw; top: 30vh; width: min(520px, 48vw); height: 290px; border-radius: 28px; border: 2px solid rgba(246,240,220,.26); background: linear-gradient(135deg, rgba(123,92,255,.32), rgba(91,231,255,.09)); box-shadow: inset 0 0 38px rgba(246,240,220,.08), 0 32px 90px rgba(0,0,0,.42); animation: jitter 1.8s steps(2) infinite; }
@keyframes jitter { 50% { transform: translate(1px, -1px) rotate(.2deg); } }
.reel { position: absolute; top: 82px; width: 105px; height: 105px; border-radius: 50%; border: 12px solid rgba(246,240,220,.56); box-shadow: inset 0 0 0 18px rgba(42,18,53,.5), 0 0 24px rgba(91,231,255,.18); animation: spin 8s linear infinite; }
.reel.left { left: 70px; } .reel.right { right: 70px; }
@keyframes spin { to { rotate: 360deg; } }
.label { position: absolute; left: 50%; top: 24px; transform: translateX(-50%) rotate(-1deg); width: 64%; padding: 10px 18px; color: var(--plum); background: var(--milk); font-size: 26px; }
.window-slot { position: absolute; left: 27%; right: 27%; bottom: 34px; height: 28px; border-radius: 30px; background: rgba(7,17,31,.72); border: 1px solid rgba(199,147,62,.6); }
.archive-shelf { position: absolute; right: 8vw; bottom: 16vh; display: flex; gap: 10px; transform: rotate(4deg); }
.archive-shelf span { writing-mode: vertical-rl; min-height: 170px; padding: 14px 10px; font-family: var(--mono); font-size: 10px; color: var(--plum); background: var(--milk); border-top: 5px solid var(--coral); box-shadow: 10px 14px 26px rgba(0,0,0,.3); }
.lagoon-copy { right: 16vw; top: 42vh; }

.orchard { background: radial-gradient(circle at 20% 25%, rgba(255,111,145,.09), transparent 26%), linear-gradient(160deg, #07111F 20%, #120B25 68%, #07111F); }
.orchard-title { left: 7vw; top: 12vh; }
.rain-pane { position: absolute; right: 11vw; top: 8vh; width: 30vw; height: 76vh; border: 1px solid rgba(246,240,220,.12); background: repeating-linear-gradient(105deg, transparent 0 16px, rgba(246,240,220,.055) 17px, transparent 18px), linear-gradient(120deg, rgba(91,231,255,.08), rgba(123,92,255,.11)); transform: skewX(-7deg); backdrop-filter: blur(3px); }
.blossoms span { position: absolute; color: var(--milk); font-family: var(--mono); font-size: 12px; padding: 8px 10px; border-radius: 50%; background: rgba(91,231,255,.1); box-shadow: 0 0 18px rgba(91,231,255,.42); animation: pulse 3s ease-in-out infinite; }
.blossoms span:nth-child(1){left:27vw;top:31vh}.blossoms span:nth-child(2){left:36vw;top:19vh;animation-delay:.4s}.blossoms span:nth-child(3){left:55vw;top:34vh;animation-delay:.8s}.blossoms span:nth-child(4){left:74vw;top:22vh;animation-delay:1.2s}.blossoms span:nth-child(5){left:80vw;top:50vh;animation-delay:1.6s}.blossoms span:nth-child(6){left:48vw;top:62vh;animation-delay:2s}
@keyframes pulse { 50% { transform: scale(1.28); color: var(--blue); } }
.orchard-copy { left: 12vw; bottom: 14vh; }
.record-bead { position: absolute; right: 20vw; bottom: 18vh; width: 22px; height: 22px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 8px rgba(255,111,145,.08), 0 0 28px var(--coral); animation: rec 1.7s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .35; transform: scale(.82); } }

.booth { background: radial-gradient(ellipse at 53% 62%, rgba(246,240,220,.13), transparent 29%), radial-gradient(circle at 70% 25%, rgba(91,231,255,.08), transparent 25%), #050B14; }
.booth-title { top: 9vh; left: 9vw; opacity: .45; }
.chair-glow { position: absolute; left: 21vw; bottom: 12vh; width: 180px; height: 250px; border-radius: 46% 46% 10px 10px; background: linear-gradient(rgba(246,240,220,.13), rgba(199,147,62,.06)); box-shadow: 0 0 90px rgba(246,240,220,.16); }
.mixer { position: absolute; right: 15vw; bottom: 20vh; width: 260px; height: 130px; border-radius: 16px; background: linear-gradient(135deg, rgba(42,18,53,.9), rgba(7,17,31,.9)); border: 1px solid rgba(199,147,62,.38); transform: rotate(-3deg); }
.mixer i { display: inline-block; width: 8px; height: 72px; margin: 28px 24px; background: linear-gradient(var(--blue) 20%, rgba(246,240,220,.2) 20%); border-radius: 8px; box-shadow: 0 0 14px rgba(91,231,255,.36); }
.final-pool { position: absolute; left: 50%; top: 53%; transform: translate(-50%, -50%); width: min(620px, 70vw); min-height: 310px; display: grid; place-items: center; text-align: center; border-radius: 50%; background: radial-gradient(ellipse, rgba(246,240,220,.18), rgba(91,231,255,.08) 42%, transparent 70%); }
.final-pool h2 { margin: 0; font-family: var(--title); font-size: clamp(66px, 11vw, 150px); letter-spacing: -.065em; text-shadow: 0 0 32px rgba(91,231,255,.42); }
.hum-rings span { position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(91,231,255,.28); opacity: 0; }
.final-pool.hum .hum-rings span { animation: hum 1.8s ease-out infinite; }
.final-pool.hum .hum-rings span:nth-child(2) { animation-delay: .35s; } .final-pool.hum .hum-rings span:nth-child(3) { animation-delay: .7s; }
@keyframes hum { 0% { opacity: .8; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.8); } }

body:not(.tuned) .panel:not(.tuning) { filter: brightness(.55) blur(.4px); }
.is-active .caption-card { animation: focusIn .8s ease both; }
@keyframes focusIn { from { opacity: .2; filter: blur(10px); transform: translateY(18px) rotate(-2deg); } }

@media (max-width: 760px) {
  .panel { margin-right: 0; }
  .scene-title { font-size: 58px; left: 8vw; }
  .caption-card { max-width: 82vw; }
  .cassette-shell { left: 8vw; width: 84vw; transform: scale(.86); transform-origin: left top; }
  .archive-shelf { display: none; }
  .lagoon-copy, .rapids-copy, .orchard-copy { left: 8vw; right: auto; top: auto; bottom: 10vh; }
  .tuner { left: 14px; top: 12px; }
}