:root {
  --night-ink: #17131C;
  --aged-cream: #EFE3C5;
  --dusty-teal: #4F8A8B;
  --faded-persimmon: #C96F4A;
  --tarnished-mustard: #D2A94D;
  --bruised-violet: #6C587E;
  --oxide-rose: #B65C68;
  --soft-shadow-brown: #4A342F;
  --plate-shadow: 0 28px 70px rgba(23, 19, 28, .55), 0 8px 0 rgba(74, 52, 47, .38);
  --spring-distance: 28px;
  --cable-thickness: 16px;
  --glitch-offset: 2px;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--night-ink); }

body {
  margin: 0;
  min-height: 360vh;
  color: var(--aged-cream);
  background:
    radial-gradient(circle at 18% 12%, rgba(108, 88, 126, .24), transparent 29%),
    radial-gradient(circle at 82% 8%, rgba(79, 138, 139, .18), transparent 26%),
    linear-gradient(135deg, #17131C 0%, #211827 58%, #17131C 100%);
  font-family: "Nunito Sans", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

.night-console { position: relative; min-height: 360vh; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image:
    linear-gradient(90deg, rgba(239, 227, 197, .035) 1px, transparent 1px),
    linear-gradient(rgba(239, 227, 197, .025) 1px, transparent 1px);
  background-size: 9px 11px;
  mix-blend-mode: screen;
}

.route-svg {
  position: fixed;
  top: 2vh;
  left: 0;
  width: 100vw;
  height: 31vh;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 8px 0 rgba(74, 52, 47, .22));
}

.route-shadow, .route-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-shadow { stroke: var(--soft-shadow-brown); stroke-width: calc(var(--cable-thickness) + 8px); opacity: .55; }
.route-line { stroke: var(--tarnished-mustard); stroke-width: var(--cable-thickness); stroke-dasharray: 1520; stroke-dashoffset: 780; transition: stroke-dashoffset .7s cubic-bezier(.34,1.56,.64,1), stroke .4s ease; }
body.scene-1 .route-line { stroke-dashoffset: 390; stroke: var(--dusty-teal); }
body.scene-2 .route-line { stroke-dashoffset: 110; stroke: var(--oxide-rose); }
body.scene-3 .route-line { stroke-dashoffset: 0; stroke: var(--tarnished-mustard); }

.console-board {
  position: sticky;
  top: 4vh;
  margin: 0 auto;
  width: min(94vw, 1320px);
  height: 92vh;
  overflow: hidden;
  border: 4px solid var(--soft-shadow-brown);
  border-radius: 42px 28px 56px 34px;
  background:
    radial-gradient(circle at 64% 20%, rgba(210, 169, 77, .22), transparent 18%),
    linear-gradient(120deg, transparent 0 48%, rgba(74, 52, 47, .08) 48% 50%, transparent 50%),
    var(--aged-cream);
  color: var(--night-ink);
  box-shadow: var(--plate-shadow);
  transform: translateY(26vh) rotate(-1.2deg);
  animation: boardWake 1.15s cubic-bezier(.23, 1.45, .45, 1) .1s forwards;
}

@keyframes boardWake {
  0% { transform: translateY(26vh) rotate(-1.2deg) scale(.96); }
  72% { transform: translateY(-1.8vh) rotate(.7deg) scale(1.012); }
  100% { transform: translateY(0) rotate(-.45deg) scale(1); }
}

.hero-head { position: absolute; left: 5%; top: 5%; width: 66%; z-index: 5; }
.stamp, .label, .screen-kicker {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.stamp {
  display: inline-block;
  padding: .55rem .8rem;
  border: 3px solid var(--night-ink);
  border-radius: 999px;
  background: var(--tarnished-mustard);
  transform: rotate(-3deg);
  box-shadow: 5px 5px 0 var(--oxide-rose);
}
.wordmark {
  position: relative;
  margin: .5rem 0 0;
  font-family: "Cormorant Garamond", Garamond, Georgia, serif;
  font-size: clamp(4.6rem, 13vw, 12.5rem);
  font-weight: 700;
  letter-spacing: -.075em;
  line-height: .78;
  color: var(--night-ink);
  text-shadow: 3px 0 0 rgba(201, 111, 74, .65), -3px 2px 0 rgba(79, 138, 139, .58);
  transform: rotate(-2deg);
}
.glitch-title::before, .glitch-title::after, .postcard-window strong::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.glitch-title::before { color: var(--faded-persimmon); transform: translate(var(--glitch-offset), -1px); }
.glitch-title::after { color: var(--dusty-teal); transform: translate(calc(var(--glitch-offset) * -1), 2px); }
.wordmark:hover::before, .wordmark:hover::after, body.scene-2 .wordmark::before, body.scene-2 .wordmark::after { opacity: .7; animation: snap .34s steps(2) 1; }
@keyframes snap { 50% { transform: translate(8px, -2px); } }
.subline { margin: .75rem 0 0 2rem; font: italic 600 clamp(1.35rem, 3vw, 2.6rem)/1 "Cormorant Garamond", Garamond, serif; color: var(--bruised-violet); }

.instrument { transition: transform .7s cubic-bezier(.34,1.56,.64,1), opacity .45s ease, filter .45s ease; }
.oval-screen {
  position: absolute;
  left: 34%;
  top: 34%;
  width: min(39vw, 520px);
  min-height: 260px;
  padding: 2.2rem 3rem;
  border: 6px solid var(--night-ink);
  border-radius: 54% 46% 48% 52% / 45% 53% 47% 55%;
  background: radial-gradient(circle at 52% 44%, rgba(79, 138, 139, .38), transparent 52%), var(--bruised-violet);
  color: var(--aged-cream);
  box-shadow: inset 0 0 0 10px rgba(239, 227, 197, .17), 13px 13px 0 var(--soft-shadow-brown);
  z-index: 3;
}
.scanlines {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(23, 19, 28, .2) 9px 10px);
  opacity: .45;
}
.screen-kicker { position: relative; color: var(--tarnished-mustard); font-size: .75rem; }
.oval-screen h2 { position: relative; margin: .75rem 0; font: italic 600 clamp(2rem, 4.2vw, 4.5rem)/.9 "Cormorant Garamond", Garamond, serif; }
.oval-screen p { position: relative; max-width: 32ch; font-size: 1.02rem; line-height: 1.35; }

.toggle-bank { position: absolute; right: 5%; top: 11%; display: grid; gap: 1rem; z-index: 8; }
.toggle {
  min-width: 178px;
  border: 4px solid var(--night-ink);
  border-radius: 999px;
  padding: .8rem 1rem .8rem .75rem;
  background: var(--aged-cream);
  color: var(--night-ink);
  box-shadow: 7px 7px 0 var(--soft-shadow-brown);
  font: 800 .85rem/1 Fraunces, Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .25s ease, box-shadow .25s ease;
}
.toggle:hover, .toggle.active { transform: translate(-4px, -5px) rotate(-2deg); background: var(--tarnished-mustard); box-shadow: 11px 12px 0 var(--oxide-rose); }
.toggle span { display: inline-block; width: 22px; height: 22px; margin-right: .45rem; vertical-align: middle; border: 3px solid var(--night-ink); background: var(--dusty-teal); }
.toggle-moon { border-radius: 50%; box-shadow: inset 8px 0 0 var(--aged-cream); }
.toggle-cable { border-radius: 12px 2px 12px 2px; }
.toggle-spark { transform: rotate(45deg); background: var(--oxide-rose) !important; }

.module {
  position: absolute;
  padding: 1rem;
  border: 4px solid var(--night-ink);
  background: rgba(239, 227, 197, .86);
  box-shadow: 8px 8px 0 var(--soft-shadow-brown);
}
.label { color: var(--soft-shadow-brown); font-size: .72rem; margin-bottom: .75rem; }
.moon-dial { left: 7%; bottom: 8%; width: 255px; height: 255px; border-radius: 50%; background: var(--dusty-teal); transform: rotate(5deg); }
.dial-face { position: relative; height: 100%; border: 3px dashed rgba(23,19,28,.45); border-radius: 50%; }
.moon { position: absolute; width: 86px; height: 86px; border-radius: 50%; background: var(--tarnished-mustard); left: 50%; top: 35%; transform: translate(-50%, -50%); box-shadow: inset -25px 4px 0 var(--aged-cream); }
.dial-hand { position: absolute; width: 5px; height: 78px; left: 50%; top: 49%; transform-origin: top; background: var(--night-ink); transform: rotate(-42deg); transition: transform .7s cubic-bezier(.34,1.56,.64,1); }
.dial-face span { position: absolute; font: 800 .75rem Fraunces, Georgia, serif; }
.dial-face span:nth-child(3) { left: 24px; bottom: 48px; }
.dial-face span:nth-child(4) { right: 20px; bottom: 72px; }
.dial-face span:nth-child(5) { right: 58px; top: 25px; }

.squiggle-map { right: 6%; bottom: 9%; width: 330px; min-height: 225px; border-radius: 34px 54px 28px 48px; background: var(--tarnished-mustard); transform: rotate(3deg); }
.squiggle-map svg { width: 100%; height: 125px; }
.map-route { fill: none; stroke: var(--night-ink); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 260; transition: stroke-dashoffset .8s cubic-bezier(.34,1.56,.64,1); }
.bug { fill: var(--oxide-rose); filter: drop-shadow(0 0 7px rgba(239,227,197,.8)); opacity: .35; transition: opacity .4s ease, transform .45s ease; }
.tiny { margin: 0; font-size: .9rem; font-weight: 800; color: var(--night-ink); }

.postcard { left: 5%; top: 34%; width: 275px; border-radius: 18px 38px 18px 34px; background: var(--oxide-rose); transform: rotate(-5deg); }
.postcard-window { position: relative; min-height: 126px; padding: 1rem; border: 3px solid var(--night-ink); background: var(--aged-cream); overflow: hidden; }
.postcard-window::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(201, 111, 74, .16) 8px 9px); mix-blend-mode: multiply; }
.vhs { display: block; font: 800 .8rem Fraunces, Georgia, serif; color: var(--bruised-violet); text-transform: uppercase; letter-spacing: .1em; }
.postcard-window strong { position: relative; display: block; margin: .5rem 0; font: 700 1.75rem/.9 "Cormorant Garamond", Garamond, serif; z-index: 1; }
.postcard-window strong::before { color: var(--dusty-teal); opacity: .55; transform: translate(3px, 1px); }
.postcard-window p { position: relative; margin: 0; z-index: 1; font-size: .9rem; }

.tray { right: 27%; bottom: 3%; width: 295px; border-radius: 24px; background: var(--faded-persimmon); transform: translateY(28px) rotate(1deg); }
.tray ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tray li { padding: .55rem .65rem; border: 2px solid var(--night-ink); border-radius: 999px; background: rgba(239, 227, 197, .78); font-weight: 800; }
.tray span { display: inline-block; margin-right: .5rem; color: var(--bruised-violet); font-family: Fraunces, Georgia, serif; }

.final-map { left: 58%; top: 55%; width: 235px; border-radius: 42px 18px 54px 20px; background: var(--bruised-violet); color: var(--aged-cream); transform: rotate(-3deg) scale(.92); opacity: .72; }
.final-map .label, .final-map .tiny { color: var(--aged-cream); }
.map-field { position: relative; height: 115px; border: 3px solid var(--aged-cream); border-radius: 36px; background: var(--night-ink); overflow: hidden; }
.pin { position: absolute; width: 24px; height: 34px; left: 48%; top: 36%; background: var(--tarnished-mustard); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.star { position: absolute; color: var(--tarnished-mustard); }
.s1 { left: 14%; top: 18%; } .s2 { right: 18%; top: 24%; } .s3 { left: 32%; bottom: 18%; }

.shape, .registration { position: absolute; z-index: 2; }
.registration { font: 800 2rem Fraunces, Georgia, serif; color: var(--oxide-rose); animation: wobble 4s ease-in-out infinite; }
.cross-a { left: 2%; top: 18%; } .cross-b { right: 3%; bottom: 31%; animation-delay: -1.2s; }
.shard { left: 22%; top: 27%; width: 80px; height: 26px; border-radius: 999px; transform: rotate(24deg); background: var(--dusty-teal); }
.dot { right: 22%; top: 6%; width: 42px; height: 42px; border-radius: 50%; background: var(--tarnished-mustard); }
.boomerang { right: 14%; bottom: 36%; width: 86px; height: 48px; border-radius: 50% 0 50% 0; background: var(--oxide-rose); transform: rotate(-28deg); }
.triangle { left: 28%; bottom: 19%; width: 0; height: 0; border-left: 32px solid transparent; border-right: 32px solid transparent; border-bottom: 64px solid var(--faded-persimmon); transform: rotate(17deg); }
@keyframes wobble { 50% { transform: rotate(7deg) scale(1.08); } }

.scroll-story {
  position: relative;
  z-index: 10;
  margin-top: 22vh;
  padding: 120vh 5vw 50vh;
  pointer-events: none;
}
.scroll-story article {
  width: min(320px, 84vw);
  margin: 0 0 72vh auto;
  padding: 1rem 1.2rem;
  border: 3px solid var(--aged-cream);
  border-radius: 28px;
  background: rgba(23, 19, 28, .74);
  color: var(--aged-cream);
  box-shadow: 8px 8px 0 rgba(74, 52, 47, .9);
  font: 800 1rem/1.25 "Nunito Sans", Inter, system-ui, sans-serif;
}
.scroll-story span { display: block; margin-bottom: .3rem; color: var(--tarnished-mustard); font-family: Fraunces, Georgia, serif; }

body.scene-1 .map-route { stroke-dashoffset: 0; }
body.scene-1 .bug { opacity: 1; transform: translateY(-7px); }
body.scene-1 .squiggle-map { transform: rotate(-1deg) translateY(-12px); }
body.scene-1 .dial-hand { transform: rotate(28deg); }
body.scene-2 .postcard { animation: postcardGlitch .54s steps(3) infinite alternate; filter: saturate(1.2); }
body.scene-2 .postcard-window strong::before { animation: signalDrift .32s steps(2) infinite; }
body.scene-2 .oval-screen { filter: hue-rotate(12deg); transform: scale(1.025) rotate(1deg); }
body.scene-3 .final-map { opacity: 1; transform: rotate(1deg) scale(1.08); }
body.scene-3 .tray { transform: translateY(-12px) rotate(-2deg); }
body.scene-3 .bug { opacity: 1; animation: firefly 2.2s ease-in-out infinite alternate; }
body.scene-3 .oval-screen h2 { color: var(--tarnished-mustard); }

@keyframes postcardGlitch { 0% { transform: rotate(-5deg) translate(0,0); } 50% { transform: rotate(-4deg) translate(5px,-2px); } 100% { transform: rotate(-6deg) translate(-3px,2px); } }
@keyframes signalDrift { 50% { transform: translate(-5px, 2px); color: var(--faded-persimmon); } }
@keyframes firefly { to { transform: translate(8px, -12px) scale(1.25); filter: drop-shadow(0 0 12px #EFE3C5); } }

@media (max-width: 900px) {
  .console-board { height: 96vh; top: 2vh; border-radius: 28px; }
  .hero-head { width: 86%; left: 6%; }
  .oval-screen { left: 8%; top: 32%; width: 84%; min-height: 210px; padding: 1.5rem; }
  .toggle-bank { left: 7%; right: auto; top: 67%; grid-template-columns: 1fr; gap: .55rem; }
  .toggle { min-width: 152px; padding: .55rem; }
  .moon-dial { width: 165px; height: 165px; left: 5%; bottom: 2%; }
  .squiggle-map { width: 210px; right: 4%; bottom: 4%; min-height: 170px; }
  .postcard, .tray, .final-map { display: none; }
  .wordmark { font-size: clamp(4.2rem, 20vw, 7rem); }
}