:root {
  /* Design font intent: Bangers impact via system display; Noto Sans JP via Japanese system stack; Space Grotesk** clean interface captions via bundled-safe sans; IBM Plex Mono sparingly for station codes. */
  --blush-red: #FF2D55;
  --midnight: #17111F;
  --tangerine: #FF9F1C;
  --cyan: #00D9FF;
  --paper: #FFF3D6;
  --violet: #6C3BFF;
  --black: #050505;
  --soft-pink: #FFB7D5;
  --display: Impact, Haettenschweiler, "Arial Black", fantasy;
  --jp: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --sans: "Space Grotesk**", "Trebuchet MS", "Arial Narrow", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--midnight);
  color: var(--paper);
  font-family: var(--sans);
  overflow-x: hidden;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .18;
  background-image: radial-gradient(var(--paper) 1px, transparent 1px), radial-gradient(var(--black) 1px, transparent 1px);
  background-size: 9px 9px, 13px 13px;
  mix-blend-mode: overlay;
}

.blush-flood {
  position: fixed;
  inset: 0;
  background: var(--blush-red);
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  transform: scale(0) rotate(8deg);
  transition: opacity .16s steps(2), transform .22s cubic-bezier(.1,1.7,.55,1);
  clip-path: polygon(50% 0, 60% 33%, 100% 20%, 70% 50%, 100% 82%, 58% 68%, 48% 100%, 38% 66%, 0 82%, 28% 50%, 0 16%, 39% 32%);
}
.blush-flood.flash { opacity: .78; transform: scale(1.45) rotate(-5deg); }

.rain-lines {
  position: fixed;
  inset: -20% 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  background: repeating-linear-gradient(108deg, transparent 0 18px, rgba(0,217,255,.55) 19px 21px, transparent 22px 38px);
  animation: rainRun .7s linear infinite;
  transition: opacity .4s;
}
.rain-lines.on { opacity: .5; }
@keyframes rainRun { to { transform: translate3d(-40px, 80px, 0); } }

.weather-nav {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) skewY(-9deg);
  z-index: 60;
  display: grid;
  gap: 7px;
}
.nav-tab {
  border: 3px solid var(--black);
  background: var(--paper);
  color: var(--black);
  padding: 8px 11px;
  box-shadow: 5px 5px 0 var(--black);
  font-family: var(--mono);
  text-align: left;
  cursor: pointer;
  transform: rotate(-2deg);
}
.nav-tab span { display: block; font-size: 11px; }
.nav-tab b { font-family: var(--display); letter-spacing: 1px; font-size: 22px; }
.nav-tab.active { background: var(--blush-red); color: var(--paper); transform: translateX(-11px) rotate(3deg); }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 8px solid var(--black);
}
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 20% 20%, rgba(255,243,214,.2), transparent 30%), repeating-radial-gradient(circle at 82% 18%, rgba(5,5,5,.28) 0 2px, transparent 3px 9px);
}

.panel {
  border: 5px solid var(--black);
  box-shadow: 12px 12px 0 var(--black);
  background: var(--paper);
  color: var(--black);
  clip-path: polygon(0 8%, 96% 0, 100% 84%, 87% 100%, 5% 96%);
}
.copy-panel { position: absolute; padding: clamp(24px, 5vw, 54px); max-width: 590px; }
.hour { font-family: var(--mono); font-weight: 900; color: var(--blush-red); margin: 0 0 6px; letter-spacing: 2px; }
h1, h2 {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  line-height: .82;
  letter-spacing: 1px;
  font-size: clamp(58px, 10vw, 132px);
}
.copy-panel p:not(.hour) { font-size: clamp(17px, 2.1vw, 24px); line-height: 1.12; font-weight: 900; }

.scene-morning { background: linear-gradient(135deg, var(--tangerine), var(--blush-red) 55%, var(--paper) 55% 62%, var(--midnight) 62%); }
.diagonal-title {
  position: absolute;
  left: -8vw;
  top: 10vh;
  transform: rotate(-16deg);
  font-family: var(--display);
  font-size: clamp(96px, 23vw, 310px);
  color: var(--paper);
  text-shadow: 10px 10px 0 var(--black), -4px -4px 0 var(--blush-red);
  white-space: nowrap;
}
.sun-disc {
  position: absolute; right: -10vmin; top: -10vmin; width: 42vmin; height: 42vmin;
  background: var(--tangerine); border: 7px solid var(--black); border-radius: 50%;
  box-shadow: 0 0 0 22px var(--blush-red), 13px 17px 0 var(--black);
}
.tsun-sun {
  position: fixed; left: 22px; top: 20px; width: 88px; height: 88px; z-index: 70;
  background: var(--tangerine); border: 5px solid var(--black); display: grid; place-items: center;
  clip-path: polygon(50% 0, 61% 22%, 85% 11%, 79% 38%, 100% 50%, 78% 62%, 87% 88%, 61% 78%, 50% 100%, 39% 78%, 13% 88%, 22% 62%, 0 50%, 22% 38%, 15% 11%, 39% 22%);
  animation: jitter .42s steps(2) infinite;
}
.tsun-sun .face { font-family: var(--display); color: var(--black); font-size: 34px; transform: rotate(8deg); }
.tsun-sun.moon { background: var(--cyan); border-radius: 50%; clip-path: none; transform: scale(.7); }
@keyframes jitter { 0%,100%{ translate:0 0; rotate:-1deg;} 50%{ translate:3px -2px; rotate:2deg;} }

.station-stamp { position: absolute; left: 8vw; bottom: 8vh; transform: rotate(7deg); font-family: var(--mono); background: var(--black); color: var(--cyan); padding: 10px 18px; border: 3px solid var(--paper); }
.bubble { position: absolute; background: var(--paper); color: var(--black); border: 4px solid var(--black); padding: 15px 20px; font-weight: 1000; box-shadow: 7px 7px 0 var(--black); clip-path: polygon(0 13%, 90% 0, 100% 74%, 76% 77%, 67% 100%, 55% 78%, 4% 91%); animation: snapIn .7s steps(3) both; }
.bubble-one { top: 16vh; left: 38vw; animation-delay: .1s; }
.bubble-two { right: 15vw; bottom: 18vh; animation-delay: .3s; }
.bubble-three { left: 9vw; top: 42vh; font-family: var(--jp); font-size: 30px; animation-delay: .5s; }
@keyframes snapIn { from { transform: scale(.1) rotate(18deg); opacity: 0; } to { transform: scale(1) rotate(-3deg); opacity: 1; } }
.morning-copy { right: 8vw; top: 28vh; transform: rotate(-3deg); }
.chapter-switch, .burst-trigger { position: absolute; border: 5px solid var(--black); background: var(--cyan); color: var(--black); font-family: var(--display); font-size: 28px; padding: 14px 22px; box-shadow: 8px 8px 0 var(--black); cursor: pointer; transform: rotate(-4deg); }
.chapter-switch { left: 22vw; bottom: 18vh; }

.scene-hallway { background: var(--cyan); color: var(--black); }
.corridor-strip { position: absolute; top: -6vh; bottom: -6vh; width: 20vw; background: var(--paper); border: 5px solid var(--black); transform: skewX(-12deg); box-shadow: 10px 0 0 var(--black); }
.strip-a { left: 8vw; } .strip-b { left: 37vw; background: var(--soft-pink); } .strip-c { right: 9vw; }
.speed-field { position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 16px, rgba(5,5,5,.5) 17px 20px, transparent 21px 40px); opacity: .35; }
.arrow { position: absolute; font-family: var(--display); font-size: clamp(32px, 6vw, 82px); color: var(--paper); text-shadow: 5px 5px 0 var(--black); animation: shove 1.2s steps(2) infinite; }
.arrow-one { top: 18vh; left: 35vw; } .arrow-two { bottom: 22vh; left: 6vw; color: var(--violet); }
@keyframes shove { 50% { transform: translateX(28px); } }
.hallway-copy { left: 9vw; top: 28vh; transform: rotate(2deg); }
.meteo-card { position: absolute; right: 8vw; top: 16vh; background: var(--black); color: var(--cyan); border: 4px solid var(--paper); padding: 18px; font-family: var(--mono); transform: rotate(6deg); box-shadow: 9px 9px 0 var(--blush-red); }
.hall-bubble { right: 12vw; bottom: 13vh; font-family: var(--jp); }

.scene-blush { background: var(--paper); color: var(--black); }
.scene-blush::before { background: repeating-radial-gradient(circle at 50% 50%, var(--blush-red) 0 3px, transparent 4px 13px); opacity: .75; }
.impact { position: absolute; font-family: var(--display); color: var(--blush-red); text-shadow: 8px 8px 0 var(--black); }
.impact-a { left: 5vw; top: 5vh; font-size: 25vw; transform: rotate(-13deg); }
.impact-b { right: 4vw; bottom: 3vh; font-size: 22vw; transform: rotate(11deg); }
.halftone-orb { position: absolute; width: 55vmin; height: 55vmin; right: 18vw; top: 12vh; border-radius: 50%; background: repeating-radial-gradient(circle, var(--soft-pink) 0 4px, var(--blush-red) 5px 9px, transparent 10px 18px); border: 6px solid var(--black); }
.jag-panel { position: absolute; background: var(--midnight); border: 6px solid var(--black); }
.jag-left { left: -7vw; bottom: 10vh; width: 46vw; height: 36vh; clip-path: polygon(0 0, 90% 12%, 70% 45%, 100% 100%, 0 82%); }
.jag-right { right: -5vw; top: 10vh; width: 38vw; height: 42vh; clip-path: polygon(20% 0, 100% 0, 90% 100%, 0 78%, 31% 42%); }
.blush-copy { left: 23vw; top: 28vh; transform: rotate(-2deg); }
.negative-space-note { position: absolute; left: 41vw; bottom: 18vh; color: var(--midnight); font-family: cursive; font-size: 24px; transform: rotate(-8deg); background: var(--soft-pink); padding: 8px 16px; }
.burst-trigger { right: 22vw; bottom: 10vh; background: var(--blush-red); color: var(--paper); }

.scene-rooftop { background: linear-gradient(160deg, var(--violet), var(--tangerine) 54%, var(--midnight) 55%); }
.skyline { position: absolute; left: -5vw; right: -5vw; bottom: 18vh; height: 28vh; background: linear-gradient(to top, var(--black), transparent 88%); clip-path: polygon(0 100%, 0 55%, 8% 55%, 8% 30%, 14% 30%, 14% 70%, 21% 70%, 21% 20%, 30% 20%, 30% 62%, 38% 62%, 38% 38%, 48% 38%, 48% 74%, 59% 74%, 59% 25%, 70% 25%, 70% 65%, 80% 65%, 80% 15%, 90% 15%, 90% 58%, 100% 58%, 100% 100%); transform: rotate(-4deg); }
.railing { position: absolute; left: -5vw; right: -5vw; bottom: 12vh; height: 10px; background: var(--black); box-shadow: 0 32px 0 var(--black), 0 64px 0 var(--black); transform: rotate(-4deg); }
.red-string { position: absolute; height: 5px; background: var(--blush-red); transform-origin: left center; box-shadow: 0 0 10px var(--blush-red); }
.string-a { left: 18vw; top: 28vh; width: 58vw; transform: rotate(18deg); } .string-b { left: 28vw; top: 65vh; width: 44vw; transform: rotate(-21deg); }
.charm { position: absolute; background: var(--paper); color: var(--black); border: 4px solid var(--black); font-family: var(--mono); padding: 14px 10px; box-shadow: 6px 6px 0 var(--black); animation: sway 1.8s ease-in-out infinite; }
.charm-one { left: 25vw; top: 34vh; } .charm-two { right: 24vw; top: 45vh; animation-delay: .4s; } .charm-three { left: 53vw; bottom: 17vh; animation-delay: .8s; }
@keyframes sway { 50% { transform: rotate(9deg) translateY(8px); } }
.ribbon { position: absolute; width: 22vw; height: 18px; background: var(--cyan); border: 3px solid var(--black); clip-path: polygon(0 0, 100% 20%, 90% 100%, 12% 70%); animation: ribbon 1.1s steps(2) infinite; }
.ribbon-a { right: 8vw; top: 14vh; } .ribbon-b { left: 7vw; bottom: 28vh; background: var(--soft-pink); }
@keyframes ribbon { 50% { transform: translateX(-20px) rotate(-8deg); } }
.rooftop-copy { left: 9vw; top: 18vh; transform: rotate(4deg); }
.note-x { position: absolute; right: 13vw; bottom: 16vh; font-family: var(--display); font-size: 20vw; color: var(--blush-red); text-shadow: 8px 8px 0 var(--black); transform: rotate(-12deg); }

.scene-night { background: radial-gradient(circle at 74% 25%, rgba(108,59,255,.5), transparent 30%), linear-gradient(180deg, var(--midnight), var(--black)); }
.moon-umbrella { position: absolute; right: 12vw; top: 12vh; width: 170px; height: 84px; background: var(--soft-pink); border: 5px solid var(--black); border-radius: 90px 90px 0 0; box-shadow: 9px 9px 0 var(--black); }
.small-moon { position: absolute; width: 58px; height: 58px; left: 48px; top: 35px; border-radius: 50%; background: var(--cyan); border: 4px solid var(--black); color: var(--black); display: grid; place-items: center; font-family: var(--display); }
.vending-glow { position: absolute; left: 9vw; bottom: 18vh; width: 110px; height: 260px; background: var(--cyan); border: 6px solid var(--black); box-shadow: 0 0 55px var(--cyan), 12px 12px 0 var(--black); transform: skewY(-5deg); }
.night-copy { right: 12vw; top: 32vh; background: var(--midnight); color: var(--paper); border-color: var(--cyan); box-shadow: 12px 12px 0 var(--cyan); transform: rotate(-2deg); }
.reflection { position: absolute; left: 6vw; bottom: 7vh; font-family: var(--display); font-size: clamp(64px, 15vw, 210px); color: rgba(0,217,255,.22); transform: scaleY(-.35) skewX(-14deg); filter: blur(1px); }
.last-line { position: absolute; right: 13vw; bottom: 9vh; color: var(--soft-pink); font-family: cursive; font-size: clamp(18px, 2.5vw, 32px); opacity: .85; transform: rotate(-2deg); }

.scene.in-view .copy-panel { animation: panelHit .42s steps(3) both; }
@keyframes panelHit { from { opacity: 0; transform: translate(-40px, 25px) rotate(-9deg) scale(.95); } to { opacity: 1; } }

@media (max-width: 760px) {
  .weather-nav { top: auto; bottom: 10px; left: 8px; right: 8px; transform: none; grid-template-columns: repeat(5, 1fr); }
  .nav-tab { padding: 5px; box-shadow: 3px 3px 0 var(--black); }
  .nav-tab b { font-size: 15px; }
  .copy-panel { left: 5vw !important; right: 5vw !important; top: 30vh !important; max-width: none; }
  .bubble-one, .bubble-two, .bubble-three, .hall-bubble { left: 7vw; right: auto; max-width: 72vw; }
  .diagonal-title { top: 8vh; font-size: 30vw; }
}