:root {
  /* Condensed** Condense */
  --asphalt: #060708;
  --cyan: #8DE8FF;
  --ink: #1E252B;
  --navy: #101A2E;
  --sodium: #C9862B;
  --paper: #D8D0BE;
  --amber: #F2C14E;
  --red: #D71920;
  --sans: "IBM Plex Sans Condensed", Inter, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --kr: "Noto Serif KR", serif;
  --jp: "Noto Serif JP", serif;
}

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

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  background:
    radial-gradient(circle at 30% 20%, rgba(201,134,43,.15), transparent 26%),
    radial-gradient(circle at 80% 12%, rgba(215,25,32,.13), transparent 24%),
    repeating-linear-gradient(0deg, rgba(216,208,190,.035) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}

.siren-sweep {
  position: fixed;
  inset: -30% -20%;
  z-index: 70;
  pointer-events: none;
  background: conic-gradient(from 70deg, transparent, rgba(215,25,32,.16), transparent 26%, rgba(141,232,255,.05), transparent 48%);
  animation: sweep 16s linear infinite;
  mix-blend-mode: screen;
}

.rain-field {
  position: fixed;
  inset: 0;
  z-index: 75;
  pointer-events: none;
  opacity: .18;
  background-image: repeating-linear-gradient(105deg, transparent 0 16px, rgba(141,232,255,.22) 17px, transparent 18px);
  animation: rain 1.6s linear infinite;
}

.checkpoint-rail {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: grid;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
}
.checkpoint-rail a {
  color: rgba(216,208,190,.58);
  text-decoration: none;
  writing-mode: vertical-rl;
  border-left: 1px solid rgba(242,193,78,.28);
  padding: 8px 2px;
  transition: color .4s, border-color .4s, transform .4s;
}
.checkpoint-rail a::before { content: attr(data-scene) " / "; color: var(--red); }
.checkpoint-rail a.active { color: var(--amber); border-color: var(--red); transform: translateX(5px); }

.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 8vw 9vw 7vw 12vw;
}
.scene::after {
  content: attr(data-stage);
  position: absolute;
  right: 2vw;
  top: 3vh;
  font: 700 11px var(--mono);
  color: rgba(242,193,78,.6);
  letter-spacing: .22em;
}

.mono { font-family: var(--mono); color: var(--cyan); font-size: 12px; text-transform: uppercase; }
h1, h2 { margin: 0; line-height: .88; text-transform: uppercase; }
h1 { font: 700 clamp(42px, 11vw, 150px) var(--mono); letter-spacing: -.08em; }
h2 { font: 700 clamp(52px, 10vw, 128px) var(--sans); letter-spacing: -.035em; }
p { font-size: clamp(18px, 2vw, 28px); line-height: 1.18; }
button { font: 700 14px var(--mono); text-transform: uppercase; letter-spacing: .12em; cursor: pointer; }

.broadcast { background: radial-gradient(circle at 50% 48%, #101A2E 0, #060708 55%); }
.broadcast-panel { position: relative; width: min(980px, 90vw); z-index: 3; }
.typed-title { color: var(--paper); text-shadow: 0 0 18px rgba(141,232,255,.26); }
.cursor { display: inline-block; width: .5em; height: .8em; background: var(--cyan); margin-left: .12em; animation: blink 1s steps(2) infinite; }
.transmission { max-width: 560px; color: rgba(216,208,190,.75); }
.waveform { display: flex; align-items: center; gap: 7px; height: 58px; margin: 24px 0; }
.waveform i { width: 4px; height: 12px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transform-origin: center; }
.order-stamp {
  position: absolute;
  right: 0;
  top: 22%;
  transform: rotate(-13deg) scale(.8);
  opacity: 0;
  border: 8px solid var(--red);
  color: var(--red);
  padding: 18px 24px;
  font: 900 clamp(28px, 5vw, 76px) var(--sans);
  letter-spacing: .04em;
  mix-blend-mode: screen;
}
.broadcast.active .order-stamp, .order-stamp.inked { animation: stampIn .9s .8s forwards; }
.vertical-shadow.kr {
  position: absolute;
  right: 4vw;
  bottom: -7vh;
  font: 900 25vw var(--kr);
  writing-mode: vertical-rl;
  color: rgba(215,25,32,.11);
}
.blackout-shutters span { position: absolute; inset-inline: 0; height: 15vh; background: #060708; z-index: 6; animation: shutterOpen 2.4s forwards; }
.blackout-shutters span:nth-child(1){ top: 0; }.blackout-shutters span:nth-child(2){ top: 42vh; animation-delay: .25s; }.blackout-shutters span:nth-child(3){ bottom: 0; animation-delay: .45s; }
.scroll-instruction { position: absolute; bottom: 28px; font: 600 11px var(--mono); color: var(--amber); text-transform: uppercase; }

.gate { background: linear-gradient(100deg, #060708 0 34%, #101A2E 34% 100%); }
.permission-map { position: absolute; width: 72vw; height: 70vh; right: -4vw; top: 14vh; border: 1px solid rgba(216,208,190,.16); background: rgba(16,26,46,.6); overflow: hidden; }
.tilted { transform: rotate(-3deg); }
.permission-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-line { fill: none; stroke: rgba(216,208,190,.42); stroke-width: 3; stroke-dasharray: 900; stroke-dashoffset: 900; }
.cancel { fill: none; stroke: var(--red); stroke-width: 12; stroke-linecap: square; opacity: .8; stroke-dasharray: 160; stroke-dashoffset: 160; }
.scene.active .map-line, .scene.active .dawn-route { animation: drawRoute 2.8s ease forwards; }
.scene.active .cancel { animation: drawRoute 1.4s 1.4s ease forwards; }
.street { position: absolute; font: 700 13px var(--mono); color: rgba(242,193,78,.68); text-transform: uppercase; }
.s1{left:12%;top:16%;}.s2{right:15%;top:32%;}.s3{left:38%;bottom:14%;}.s4{right:24%;bottom:8%;}
.block-zone { position: absolute; background: #060708; border: 1px solid rgba(215,25,32,.45); }
.b1{width:25%;height:17%;left:18%;top:36%;}.b2{width:19%;height:27%;right:9%;top:8%;}.b3{width:32%;height:14%;right:20%;bottom:22%;}
.diagonal-tape { position: absolute; z-index: 4; left: -10vw; width: 120vw; padding: 12px; background: repeating-linear-gradient(90deg, #F2C14E 0 24px, #060708 24px 45px); color: #060708; font: 900 18px var(--mono); text-align: center; }
.tape-one { top: 19vh; transform: rotate(-16deg); }.tape-two { bottom: 20vh; transform: rotate(11deg); }
.scene.active .tape-one { animation: tapeAway 1.8s .3s forwards; }.scene.active .tape-two { animation: tapeAwayTwo 1.8s .45s forwards; }
.narrow-column { position: relative; z-index: 5; justify-self: start; max-width: 420px; border-left: 4px solid var(--red); padding: 28px 0 28px 28px; background: linear-gradient(90deg, rgba(6,7,8,.85), transparent); }
.scene-number { font-family: var(--mono); color: var(--amber); text-transform: uppercase; font-size: 12px; }
.artifact-button { background: var(--paper); color: var(--ink); border: 0; padding: 15px 20px; box-shadow: 8px 8px 0 rgba(215,25,32,.85); transition: transform .25s, box-shadow .25s, background .25s; }
.artifact-button:hover, .artifact-button.activated { transform: translate(5px,5px); box-shadow: 3px 3px 0 rgba(215,25,32,.95); background: var(--amber); }
.jp-column { position: absolute; right: 9vw; font: 900 18vw var(--jp); writing-mode: vertical-rl; color: rgba(216,208,190,.08); }

.curfew { background: radial-gradient(circle at 50% 50%, rgba(215,25,32,.17), transparent 36%), #060708; }
.radius-orbit { position: absolute; inset: 0; display: grid; place-items: center; }
.radius-orbit span { position: absolute; width: 20vmin; aspect-ratio: 1; border: 1px solid rgba(215,25,32,.55); border-radius: 50%; background: rgba(215,25,32,.045); }
.scene.active .radius-orbit span:nth-child(1) { animation: radius 4.5s infinite; }.scene.active .radius-orbit span:nth-child(2) { animation: radius 4.5s 1.2s infinite; }.scene.active .radius-orbit span:nth-child(3) { animation: radius 4.5s 2.4s infinite; }
.paper { position: relative; z-index: 3; max-width: 680px; padding: clamp(28px, 5vw, 58px); color: var(--ink); background: var(--paper); box-shadow: 22px 28px 0 rgba(201,134,43,.38), -16px -14px 0 rgba(215,25,32,.22); transform: rotate(-2deg); }
.paper::before, .paper-stack article::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(#1E252B 1px, transparent 1px); background-size: 9px 9px; opacity: .12; mix-blend-mode: multiply; }
.paper h2 { color: var(--ink); font-size: clamp(44px, 8vw, 95px); }
.paper .mono { color: var(--red); }
.paper li { font-size: 21px; margin: 10px 0; }
.route-marker { position: absolute; width: 42px; height: 42px; display:grid; place-items:center; border:2px solid var(--amber); color:var(--amber); font:700 15px var(--mono); }
.marker-a{left:19%;top:24%;}.marker-b{right:18%;top:34%;}.marker-c{left:38%;bottom:18%;}

.assembly { background: linear-gradient(180deg, #101A2E, #060708 72%); }
.assembly-line { position: absolute; inset-inline: 11vw; top: 24vh; display: flex; justify-content: space-between; }
.assembly-line span { width: 24px; height: 70px; background: var(--paper); clip-path: polygon(50% 0, 82% 25%, 68% 100%, 32% 100%, 18% 25%); opacity: .78; transition: transform 1s, opacity 1s, background .6s; }
.scene.active .assembly-line span:nth-child(odd) { transform: translateY(19vh) rotate(24deg); background: var(--red); opacity: .35; }
.scene.active .assembly-line span:nth-child(even) { transform: translateY(-12vh) rotate(-17deg); opacity: .23; }
.broken-text { position: relative; z-index: 4; max-width: 760px; text-align: center; }
.broken-text h2 { color: var(--paper); text-shadow: 0 0 35px rgba(215,25,32,.35); }
.censor-bars b { position: absolute; height: 34px; background: #060708; border-top: 1px solid rgba(216,208,190,.12); border-bottom: 1px solid rgba(216,208,190,.12); transform: scaleX(0); transform-origin: left; }
.censor-bars b:nth-child(1){left:8%;right:28%;top:38%;}.censor-bars b:nth-child(2){left:30%;right:9%;top:52%;}.censor-bars b:nth-child(3){left:15%;right:44%;bottom:24%;}.censor-bars b:nth-child(4){left:55%;right:12%;bottom:34%;}
.scene.active .censor-bars b { animation: censor 1.3s .8s forwards; }
.trace-button { position: absolute; bottom: 13vh; right: 14vw; }

.decree { background: #060708; }
.paper-stack { position: relative; width: min(860px, 78vw); height: 68vh; }
.paper-stack article { position: absolute; width: 62%; min-height: 48%; padding: 34px; background: var(--paper); color: var(--ink); border: 1px solid rgba(30,37,43,.35); box-shadow: 0 22px 55px rgba(0,0,0,.48); transition: transform .7s; }
.paper-stack article span { font: 700 12px var(--mono); color: var(--red); }
.paper-stack article strong { display:block; margin:10px 0; font:900 76px var(--kr); color:var(--ink); }
.p1{left:7%;top:4%;transform:rotate(-7deg);}.p2{right:7%;top:22%;transform:rotate(5deg);}.p3{left:21%;bottom:1%;transform:rotate(-1deg);}
.scene.active .p1{animation:slap 1s forwards;}.scene.active .p2{animation:slap 1s .25s forwards;}.scene.active .p3{animation:slap 1s .5s forwards;}
.read-button { position: absolute; right: 11vw; bottom: 10vh; z-index: 4; }
.seal-ring { position: absolute; left: 11vw; bottom: 8vh; width: 170px; height:170px; border: 8px double var(--red); color:var(--red); border-radius:50%; display:grid; place-items:center; text-align:center; font:900 22px var(--sans); transform:rotate(-18deg); opacity:.65; }

.dawn { background: linear-gradient(180deg, #060708 0%, #101A2E 43%, #D8D0BE 100%); color: var(--ink); }
.dawn-map { position:absolute; inset: 9vh 5vw; opacity:.78; }
.dawn-map svg { width:100%; height:100%; }
.dawn-route { fill:none; stroke:var(--red); stroke-width:5; stroke-dasharray:1500; stroke-dashoffset:1500; }
.thin-street { fill:none; stroke:rgba(30,37,43,.24); stroke-width:2; }
.final-copy { position:relative; z-index:3; max-width:760px; margin-left:auto; background:rgba(216,208,190,.72); padding:38px; border-left:9px solid var(--red); }
.final-copy h2 { color:var(--ink); }
.faint-stamps span { position:absolute; color:rgba(215,25,32,.18); border:6px solid rgba(215,25,32,.18); padding:14px 20px; font:900 58px var(--sans); transform:rotate(-12deg); }
.faint-stamps span:nth-child(1){left:9%;top:18%;}.faint-stamps span:nth-child(2){right:8%;bottom:16%;transform:rotate(9deg);}.faint-stamps span:nth-child(3){left:21%;bottom:8%;transform:rotate(-4deg);}

@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes rain { to { background-position: 0 40px; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes stampIn { 0%{opacity:0;transform:rotate(-13deg) scale(1.8);} 55%{opacity:1;transform:rotate(-13deg) scale(.92);} 100%{opacity:.9;transform:rotate(-13deg) scale(1);} }
@keyframes shutterOpen { to { transform: translateX(105%); } }
@keyframes drawRoute { to { stroke-dashoffset: 0; } }
@keyframes tapeAway { to { transform: rotate(-16deg) translateY(-22vh); opacity:.45; } }
@keyframes tapeAwayTwo { to { transform: rotate(11deg) translateY(25vh); opacity:.45; } }
@keyframes radius { 0%{transform:scale(.3);opacity:.9;} 100%{transform:scale(7);opacity:0;} }
@keyframes censor { to { transform: scaleX(1); } }
@keyframes slap { 0%{opacity:0;transform:translateY(-34vh) rotate(16deg) scale(1.2);} 100%{opacity:1;} }

@media (max-width: 760px) {
  .checkpoint-rail { display: none; }
  .scene { padding: 16vh 7vw; }
  .permission-map { width: 100vw; right: -38vw; opacity: .8; }
  .order-stamp { position: relative; display: inline-block; margin-top: 20px; }
  .paper-stack article { width: 82%; }
}