:root {
  --signal-black: #090B0F;
  --enamel-white: #F4F0E6;
  --exchange-cyan: #00D6D6;
  --signal-vermilion: #F0442E;
  --ledger-green: #4EC36B;
  --cobalt-gate: #2347FF;
  --brass-ping: #D7B34A;
  --progress: 0;
  --station: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--signal-black);
  color: var(--enamel-white);
  font-family: "Commissioner", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(244, 240, 230, .035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(244, 240, 230, .025) 0 1px, transparent 1px 29px),
    radial-gradient(circle at 12% 5%, rgba(35, 71, 255, .22), transparent 29vw),
    radial-gradient(circle at 104% 44%, rgba(240, 68, 46, .16), transparent 34vw);
  mix-blend-mode: screen;
  opacity: .75;
  z-index: 1;
}

.switchyard { position: relative; min-height: 600vh; }

.rail-system {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  overflow: visible;
}

.rail {
  fill: none;
  stroke-width: 18;
  stroke-linecap: square;
  filter: drop-shadow(10px 10px 0 rgba(0,0,0,.55));
}

.rail-primary {
  stroke: var(--exchange-cyan);
  stroke-dasharray: 40 17;
  stroke-dashoffset: calc(var(--progress) * -420px);
}

.rail-blue { stroke: var(--cobalt-gate); stroke-width: 13; opacity: .86; }
.rail-red { stroke: var(--signal-vermilion); stroke-width: 9; opacity: .9; }
.rail-siding { fill: none; stroke: var(--signal-vermilion); stroke-width: 12; stroke-dasharray: 26 18; }

.sleepers path {
  stroke: var(--brass-ping);
  stroke-width: 9;
  stroke-linecap: square;
  opacity: .95;
}

.rail-map {
  position: fixed;
  z-index: 15;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
  padding: 18px 12px;
  border-left: 6px solid var(--enamel-white);
  background: rgba(9, 11, 15, .72);
  box-shadow: 9px 9px 0 rgba(0,0,0,.45);
}

.rail-map a {
  position: relative;
  color: var(--enamel-white);
  text-decoration: none;
  font: 800 10px/1 "Commissioner", sans-serif;
  letter-spacing: .16em;
  padding-left: 22px;
}

.rail-map a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--signal-black);
  border: 3px solid var(--enamel-white);
  transform: translateY(-50%);
}

.hub {
  position: fixed;
  z-index: 8;
  left: 50%;
  top: 49%;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(calc(45deg + var(--progress) * 540deg));
  background: var(--enamel-white);
  border: 13px solid var(--cobalt-gate);
  box-shadow: 18px 18px 0 rgba(0,0,0,.6), inset 0 0 0 8px var(--signal-black);
}

.hub span {
  color: var(--signal-black);
  font-family: "Bebas Neue", sans-serif;
  font-size: 43px;
  letter-spacing: .06em;
  transform: rotate(calc(-45deg - var(--progress) * 540deg));
}

.bell {
  position: fixed;
  z-index: 9;
  right: 14vw;
  top: 32vh;
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 45% 45%;
  background: var(--brass-ping);
  border: 7px solid var(--signal-black);
  box-shadow: 0 0 0 5px var(--enamel-white), 10px 10px 0 rgba(0,0,0,.45);
  transform: rotate(calc(var(--bell-ring, 0) * 18deg));
}

.bell span { position: absolute; left: 18px; bottom: -10px; width: 13px; height: 13px; border-radius: 50%; background: var(--signal-vermilion); }

.station {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 8vw 8vw 8vw 12vw;
  isolation: isolate;
}

.station::before {
  content: attr(data-station);
  position: absolute;
  right: -4vw;
  top: 4vh;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(160px, 27vw, 390px);
  color: rgba(244, 240, 230, .06);
  line-height: .8;
  z-index: -1;
}

.station::after {
  content: "";
  position: absolute;
  width: 44vw;
  height: 44vw;
  border-radius: 50%;
  background: var(--cobalt-gate);
  opacity: .2;
  z-index: -2;
  clip-path: inset(0 0 36% 0);
}

.station-intake::after { right: -18vw; bottom: -15vw; }
.station-splitter::after { left: -19vw; top: 11vh; background: var(--exchange-cyan); }
.station-weighbridge::after { right: -16vw; top: 18vh; background: var(--brass-ping); }
.station-match::after { left: -18vw; bottom: -10vw; background: var(--ledger-green); }
.station-revocation::after { right: -15vw; top: 5vh; background: var(--signal-vermilion); }
.station-manifest::after { left: -13vw; top: 22vh; background: var(--enamel-white); opacity: .13; }

.panel-hero {
  width: min(680px, 68vw);
  padding: 34px 38px 30px;
  background: var(--enamel-white);
  color: var(--signal-black);
  border: 12px solid var(--signal-black);
  outline: 5px solid var(--exchange-cyan);
  box-shadow: 22px 22px 0 var(--cobalt-gate);
  transform: skew(-4deg) translateY(calc(var(--progress) * -30px));
}

.eyebrow {
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-weight: 800;
  font-size: 12px;
}

h1, h2 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: .035em;
  line-height: .83;
}

h1 { font-size: clamp(120px, 24vw, 310px); }
h2 { font-size: clamp(78px, 13vw, 190px); max-width: 820px; }

.command {
  margin: 18px 0 0;
  max-width: 520px;
  font-size: clamp(17px, 2vw, 27px);
  font-weight: 700;
  line-height: 1.16;
}

.title-block {
  width: min(780px, 72vw);
  padding: 28px 32px;
  background: var(--signal-black);
  border: 4px solid var(--enamel-white);
  box-shadow: 16px 16px 0 rgba(0,0,0,.5), inset 0 -10px 0 rgba(244,240,230,.09);
}

.right-copy { justify-self: end; background: var(--cobalt-gate); }
.rev-copy { background: var(--signal-vermilion); color: var(--enamel-white); }
.manifest-copy { justify-self: end; color: var(--signal-black); background: var(--enamel-white); border-color: var(--signal-black); }

.stamp {
  display: inline-block;
  margin-top: 22px;
  padding: 8px 18px;
  color: var(--signal-black);
  background: var(--ledger-green);
  font-family: "Fraunces", serif;
  font-size: 32px;
  transform: rotate(-5deg);
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
}

.stamp.red { background: var(--signal-black); color: var(--enamel-white); }

.slot-machine {
  position: absolute;
  right: 10vw;
  bottom: 16vh;
  width: 260px;
  height: 92px;
  background: var(--cobalt-gate);
  border: 10px solid var(--signal-black);
  outline: 4px solid var(--enamel-white);
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.slot-machine span { width: 42px; height: 42px; border-radius: 50%; background: var(--enamel-white); border: 8px solid var(--signal-black); }
.slot-machine em { position: absolute; left: 12px; bottom: -34px; font: 800 12px "Commissioner"; letter-spacing: .18em; color: var(--enamel-white); }

.gate-array {
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(2, 150px);
  gap: 18px;
  transform: rotate(-12deg);
}

.gate {
  height: 150px;
  display: grid;
  place-items: center;
  color: var(--signal-black);
  font: 400 44px "Bebas Neue";
  border: 8px solid var(--signal-black);
  box-shadow: 10px 10px 0 rgba(0,0,0,.55);
  animation: gateTurn 6s linear infinite;
}
.gate:nth-child(even) { animation-direction: reverse; }
.cobalt { background: var(--cobalt-gate); color: var(--enamel-white); }
.green { background: var(--ledger-green); }
.brass { background: var(--brass-ping); }
.cyan { background: var(--exchange-cyan); }

.scale {
  position: absolute;
  left: 8vw;
  top: 26vh;
  width: min(560px, 54vw);
  height: 280px;
  transform: rotate(calc(-3deg + var(--scale-tilt, 0) * 1deg));
}

.beam { position: absolute; left: 10%; right: 10%; top: 122px; height: 18px; background: var(--brass-ping); border: 5px solid var(--signal-black); }
.pan { position: absolute; top: 145px; width: 160px; height: 78px; background: var(--enamel-white); color: var(--signal-black); border: 8px solid var(--signal-black); display: grid; place-items: center; font-weight: 900; }
.pan.left { left: 20px; }
.pan.right { right: 20px; transform: translateY(calc(var(--scale-tilt, 0) * 6px)); }

.match-wheel {
  position: absolute;
  right: 16vw;
  top: 21vh;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  background: var(--ledger-green);
  border: 18px solid var(--signal-black);
  box-shadow: 0 0 0 8px var(--enamel-white), 24px 24px 0 rgba(0,0,0,.5);
  display: grid;
  place-items: center;
  transform: rotate(calc(var(--progress) * 820deg));
}

.match-wheel span { font: 400 64px "Bebas Neue"; color: var(--signal-black); }
.match-wheel i { position: absolute; width: 36px; height: 36px; border-radius: 50%; background: var(--signal-black); }
.match-wheel i:nth-child(2) { top: 26px; } .match-wheel i:nth-child(3) { right: 26px; } .match-wheel i:nth-child(4) { bottom: 26px; } .match-wheel i:nth-child(5) { left: 26px; }

.signal-paddle {
  position: absolute;
  right: 19vw;
  top: 28vh;
  width: 154px;
  height: 154px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--signal-vermilion);
  color: var(--enamel-white);
  border: 12px solid var(--signal-black);
  font: 400 52px "Bebas Neue";
  box-shadow: 0 0 0 6px var(--enamel-white), 16px 16px 0 rgba(0,0,0,.55);
  transform: rotate(calc(-20deg + var(--progress) * 45deg));
}

.siding-tags { position: absolute; left: 12vw; bottom: 13vh; display: flex; gap: 12px; transform: rotate(11deg); }
.siding-tags span { padding: 14px 26px; background: var(--signal-black); color: var(--signal-vermilion); border: 4px solid var(--signal-vermilion); font: 800 18px "Commissioner"; }

.manifest-wall {
  display: grid;
  gap: 18px;
  width: min(560px, 48vw);
  transform: rotate(-4deg);
}

.manifest-wall article {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 20px;
  padding: 22px 28px 22px 44px;
  background: var(--enamel-white);
  color: var(--signal-black);
  border: 5px solid var(--signal-black);
  box-shadow: 11px 11px 0 rgba(0,0,0,.45);
}

.manifest-wall article::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 12px;
  background: radial-gradient(circle, var(--signal-black) 0 4px, transparent 5px) 0 0 / 12px 24px;
}

.manifest-wall b { font: 400 42px/.85 "Bebas Neue"; }
.manifest-wall span { font-weight: 700; }
.manifest-wall em { grid-row: span 2; align-self: center; font-family: "Fraunces", serif; color: var(--ledger-green); }

.cursor-signal { display: inline-block; width: 18px; height: 38px; margin-top: 18px; background: var(--exchange-cyan); animation: blink 1s steps(2,end) infinite; }

.token {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: var(--signal-black);
  background: var(--enamel-white);
  border: 6px solid var(--signal-black);
  box-shadow: 9px 9px 0 rgba(0,0,0,.55), inset 4px 4px 0 rgba(244,240,230,.45);
  transform: translate3d(var(--x, 20vw), var(--y, 80vh), 0) rotate(var(--r, 0deg));
  transition: background-color .35s ease, border-radius .35s ease, clip-path .35s ease;
}

.token::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--signal-black);
  right: 8px;
  top: 8px;
}

.token b { font: 800 11px "Commissioner"; letter-spacing: .08em; }
.token-circle { border-radius: 50%; background: var(--exchange-cyan); }
.token-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--brass-ping); }
.token-square { background: var(--enamel-white); }
.token-pill { width: 102px; border-radius: 999px; background: var(--ledger-green); }
.token-notch { width: 92px; background: var(--signal-vermilion); color: var(--enamel-white); clip-path: polygon(0 0, 83% 0, 100% 50%, 83% 100%, 0 100%); }

.is-matched .token-circle,
.is-matched .token-pill { background: var(--ledger-green); }
.is-revoking .token-notch { background: var(--signal-vermilion); transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(1.12); }

@keyframes gateTurn { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 820px) {
  .rail-map { display: none; }
  .station { padding: 26vh 6vw 12vh; }
  .title-block, .panel-hero { width: 88vw; }
  .gate-array, .scale, .match-wheel, .signal-paddle { opacity: .72; transform: scale(.72); transform-origin: center; }
  .manifest-wall { width: 86vw; }
  .hub { width: 96px; height: 96px; }
  .token { width: 58px; height: 58px; }
}