:root {
  color-scheme: dark;
  --petrol-950: #041416;
  --petrol-900: #08282a;
  --petrol-800: #103b3c;
  --petrol-700: #1a5252;
  --amber: #f0ae57;
  --amber-soft: #ffd58e;
  --sodium: #e97836;
  --lilac: #c6b5e8;
  --night: #040812;
  --cream: #ffe5b5;
  --door-width: clamp(84px, 11vw, 158px);
  font-family: "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 300px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--petrol-950);
}

body {
  color: var(--cream);
}

button {
  min-width: 44px;
  min-height: 44px;
  color: inherit;
  font: inherit;
}

button:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid #fff4c9;
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  min-height: 44px;
  padding: 12px 16px;
  color: #0a1717;
  background: var(--amber-soft);
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.no-script {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 12vw;
  color: var(--cream);
  background: var(--petrol-950);
  font-family: Georgia, serif;
  font-size: clamp(1rem, 3vw, 1.35rem);
  line-height: 1.45;
  text-align: center;
}

.no-script strong {
  color: var(--amber-soft);
  font-family: "Arial Narrow", "Helvetica Neue", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bus {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 520px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 190, 100, 0.025), transparent 30%, transparent 74%, rgba(235, 119, 54, 0.07)),
    linear-gradient(180deg, #0b3031, #082426 72%, #051819);
}

.bus::before {
  content: "";
  position: absolute;
  z-index: 80;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(0, 6, 8, 0.38) 100%),
    linear-gradient(90deg, rgba(3, 14, 15, 0.2), transparent 10%, transparent 88%, rgba(3, 12, 13, 0.32));
  mix-blend-mode: multiply;
}

.ceiling {
  position: absolute;
  z-index: 15;
  top: 0;
  left: 0;
  width: 100%;
  height: 8.7%;
  border-bottom: 5px solid #051416;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(255, 215, 150, 0.03) 28%, transparent 55%),
    linear-gradient(#28514e, #173e3d 72%, #0b2b2c);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.ceiling-light {
  position: absolute;
  top: 16%;
  width: 27%;
  height: 28%;
  border-radius: 50%;
  background: #f4cf8d;
  box-shadow: 0 0 30px 8px rgba(255, 190, 101, 0.14);
  opacity: 0.62;
}

.ceiling-light-one { left: 12%; }
.ceiling-light-two { right: 21%; }

.ceiling-rib {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  background: rgba(212, 159, 91, 0.13);
}

.route-header {
  position: absolute;
  z-index: 100;
  top: 1.4%;
  right: calc(var(--door-width) + 2.5%);
  left: 3.5%;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(280px, 1.4fr) minmax(168px, 0.75fr);
  align-items: center;
  gap: clamp(10px, 2vw, 32px);
}

.route-name,
.destination-sign,
.mode-toggle {
  margin: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.route-name {
  color: rgba(255, 229, 181, 0.74);
  font-size: clamp(0.58rem, 1vw, 0.77rem);
  white-space: nowrap;
}

.destination-sign {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 38px;
  padding: 7px 12px 6px;
  border: 2px solid #061112;
  color: #ffc46e;
  background: linear-gradient(#0b1715, #071210);
  box-shadow:
    inset 0 0 14px rgba(242, 168, 62, 0.13),
    0 1px 0 rgba(255, 215, 140, 0.14);
  font-family: "Courier New", monospace;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 167, 60, 0.35);
}

.loop-readout {
  color: #d09a57;
  font-size: clamp(0.5rem, 0.8vw, 0.64rem);
  white-space: nowrap;
}

.destination-readout {
  min-width: 0;
  font-size: clamp(0.64rem, 1.25vw, 0.94rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-align: right;
}

.mode-toggle {
  justify-self: end;
  padding: 8px 10px;
  border: 1px solid rgba(255, 225, 171, 0.42);
  border-radius: 2px;
  color: rgba(255, 235, 197, 0.88);
  background: rgba(5, 22, 23, 0.83);
  font-size: clamp(0.55rem, 0.88vw, 0.69rem);
  cursor: pointer;
  touch-action: manipulation;
}

.mode-toggle:hover {
  border-color: var(--amber-soft);
}

.mode-toggle[aria-pressed="true"] {
  border-color: var(--amber);
  color: #17120d;
  background: var(--amber-soft);
}

.bus-title {
  position: absolute;
  z-index: 75;
  top: 10.8%;
  left: 2.1%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 9px 4px;
  border-left: 2px solid rgba(240, 174, 87, 0.76);
  color: rgba(255, 218, 157, 0.64);
  background: linear-gradient(90deg, rgba(5, 20, 21, 0.86), rgba(5, 20, 21, 0.08));
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
}

.bus-title span {
  font-size: clamp(0.48rem, 0.7vw, 0.58rem);
}

.bus-title strong {
  color: rgba(255, 205, 126, 0.84);
  font-family: "Courier New", monospace;
  font-size: clamp(0.56rem, 0.9vw, 0.72rem);
}

.window-band {
  position: absolute;
  z-index: 2;
  top: 8.7%;
  right: var(--door-width);
  left: 0;
  height: 54.3%;
  overflow: hidden;
  border-top: clamp(6px, 0.9vw, 13px) solid #06191a;
  border-bottom: clamp(10px, 1.5vw, 20px) solid #0d3232;
  background: #061018;
  box-shadow:
    inset 0 0 0 3px #153e3e,
    0 13px 27px rgba(0, 0, 0, 0.48);
}

.street {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 0 45%, rgba(16, 26, 29, 0.85) 46% 75%, transparent 76%),
    linear-gradient(180deg, #040811 0 46%, #0d1518 47% 75%, #060a0d 76%);
  animation: street-drift 9.2s ease-in-out infinite alternate;
}

.street::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(104deg, transparent 0 27%, rgba(164, 198, 204, 0.035) 28% 29%, transparent 30% 65%, rgba(255, 194, 114, 0.025) 66% 67%, transparent 68%),
    radial-gradient(ellipse at 70% 58%, rgba(240, 119, 52, 0.045), transparent 32%);
}

.street::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 49.4%, rgba(198, 181, 232, 0.18) 49.8% 50.2%, transparent 50.6%),
    linear-gradient(118deg, transparent 0 49%, rgba(228, 148, 72, 0.08) 49.2% 50.8%, transparent 51%);
  transition: opacity 700ms ease;
}

.far-buildings {
  position: absolute;
  inset: 6% -8% 33%;
  display: flex;
  align-items: end;
  gap: 1.1%;
  opacity: 0.72;
}

.far-buildings i {
  position: relative;
  flex: 1;
  height: 54%;
  border-top: 1px solid #203243;
  background: linear-gradient(#09141e, #091218);
  box-shadow: inset 0 12px #070d14;
}

.far-buildings i:nth-child(2n) { height: 82%; }
.far-buildings i:nth-child(3n) { height: 67%; }
.far-buildings i:nth-child(5n) { height: 91%; }

.far-buildings i::before,
.far-buildings i::after {
  content: "";
  position: absolute;
  top: 28%;
  width: 6px;
  height: 10px;
  background: rgba(246, 176, 81, 0.4);
  box-shadow:
    28px 22px rgba(246, 176, 81, 0.17),
    55px -4px rgba(246, 176, 81, 0.27),
    84px 31px rgba(246, 176, 81, 0.12);
}

.far-buildings i::before { left: 15%; }
.far-buildings i::after { right: 22%; opacity: 0.38; }

.power-lines {
  position: absolute;
  z-index: 1;
  top: 5%;
  right: -2%;
  left: -2%;
  height: 34%;
  opacity: 0.22;
}

.power-lines i {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: #8295a4;
  transform: rotate(-1deg);
}

.power-lines i:nth-child(1) { top: 18%; }
.power-lines i:nth-child(2) { top: 42%; transform: rotate(0.7deg); }
.power-lines i:nth-child(3) { top: 73%; transform: rotate(-0.4deg); }

.moon {
  position: absolute;
  z-index: 2;
  top: 10%;
  right: 14%;
  width: clamp(27px, 4vw, 55px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 31%, #ede7d4 0 12%, transparent 13%),
    #d5d0c0;
  box-shadow: 0 0 25px rgba(221, 218, 200, 0.25);
  opacity: 0;
  transition: opacity 550ms ease;
}

.landmark-building {
  position: absolute;
  z-index: 2;
  right: 18%;
  bottom: 24%;
  width: 42%;
  height: 49%;
  border: 1px solid #273139;
  background: linear-gradient(90deg, #141a21, #242229 58%, #0f171f);
  box-shadow: 0 18px 30px #020407;
  transition: width 500ms ease, right 500ms ease, background 500ms ease;
}

.landmark-building::before,
.landmark-building::after {
  content: "";
  position: absolute;
  top: 7%;
  width: 11px;
  height: 15px;
  background: rgba(242, 174, 87, 0.22);
  box-shadow: 33px 7px rgba(242, 174, 87, 0.13), 66px -2px rgba(242, 174, 87, 0.2);
}

.landmark-building::before { left: 9%; }
.landmark-building::after { right: 17%; }

.awning {
  position: absolute;
  top: 16%;
  left: 4%;
  width: 92%;
  height: 11%;
  background: repeating-linear-gradient(90deg, #6e4837 0 8%, #bf7847 8% 16%);
  opacity: 0.42;
}

.shop-window {
  position: absolute;
  bottom: 8%;
  height: 42%;
  border: 2px solid #0c1517;
  background: #a85f35;
  box-shadow: inset 0 0 25px rgba(255, 214, 130, 0.38);
  opacity: 0.48;
}

.shop-window-one { left: 8%; width: 48%; }
.shop-window-two { right: 8%; width: 27%; }

.produce {
  position: absolute;
  z-index: 3;
  right: 11%;
  bottom: 17%;
  left: 12%;
  display: flex;
  justify-content: space-around;
  opacity: 0;
}

.produce i {
  width: clamp(7px, 1vw, 13px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d77b35;
  box-shadow: 0 0 7px rgba(236, 132, 52, 0.35);
}

.landmark-sign {
  position: absolute;
  z-index: 4;
  left: 8%;
  top: 20%;
  max-width: min(58%, 620px);
  padding: 6px 10px 5px;
  border: 1px solid rgba(255, 190, 96, 0.42);
  color: #ffc06a;
  background: rgba(33, 19, 13, 0.84);
  box-shadow: 0 0 20px rgba(236, 112, 43, 0.12);
  font-size: clamp(0.67rem, 1.55vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.street-note {
  position: absolute;
  z-index: 4;
  left: 8%;
  bottom: 29%;
  max-width: 54%;
  color: rgba(255, 233, 199, 0.78);
  font-family: Georgia, serif;
  font-size: clamp(0.68rem, 1.25vw, 1rem);
  font-style: italic;
  line-height: 1.3;
  text-shadow: 0 2px 6px #000;
}

.dog {
  position: absolute;
  z-index: 5;
  right: 24%;
  bottom: 24%;
  width: clamp(29px, 3vw, 42px);
  height: clamp(20px, 2vw, 28px);
  opacity: 0;
  transition: right 700ms ease, opacity 400ms ease;
}

.dog::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 5px;
  width: 72%;
  height: 50%;
  border-radius: 55% 45% 34% 40%;
  background: #d5d0c2;
  box-shadow: 0 0 8px rgba(236, 227, 202, 0.28);
}

.dog::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 42%;
  width: 31%;
  height: 39%;
  border-radius: 60% 40% 45%;
  background: #d5d0c2;
}

.dog span::before,
.dog span::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 34%;
  background: #bdb8ae;
}

.dog span::before { left: 38%; }
.dog span::after { right: 13%; }
.dog-twin { right: 67%; transform: scaleX(-1); }

.road-arrows {
  position: absolute;
  z-index: 5;
  right: 15%;
  bottom: 31%;
  left: 53%;
  display: flex;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 42px);
  color: var(--amber-soft);
  font-family: "Courier New", monospace;
  font-size: clamp(0.72rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-shadow: 0 0 9px var(--sodium);
}

.road-arrows span {
  opacity: 0;
  transition: opacity 500ms ease;
  white-space: nowrap;
}

.clock-rack {
  position: absolute;
  z-index: 5;
  top: 29%;
  right: 10%;
  display: grid;
  gap: 7px;
  opacity: 0;
}

.clock-bank {
  display: flex;
  gap: 7px;
}

.clock-bank span {
  display: none;
  min-width: 60px;
  padding: 5px 7px;
  border: 2px solid #11181a;
  color: #ffd086;
  background: #20221e;
  box-shadow: 0 0 12px rgba(255, 182, 91, 0.15);
  font-family: "Courier New", monospace;
  font-size: clamp(0.67rem, 1vw, 0.9rem);
  font-weight: 700;
  text-align: center;
}

.clock-bank:first-child span:first-child {
  display: block;
}

.curb {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 20%;
  left: 0;
  height: 5%;
  background: linear-gradient(#625a54, #2b2b2c);
  box-shadow: 0 -5px 13px rgba(235, 112, 52, 0.07);
}

.road {
  position: absolute;
  z-index: 2;
  right: -14%;
  bottom: 0;
  left: -14%;
  height: 20%;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(150, 177, 183, 0.04), transparent 34%),
    #05090d;
}

.road i {
  position: absolute;
  top: 53%;
  width: 12%;
  height: 3px;
  background: rgba(238, 190, 119, 0.38);
  box-shadow: 0 0 5px rgba(232, 151, 76, 0.16);
  animation: road-dash 1.8s linear infinite;
}

.road i:nth-child(1) { left: -7%; }
.road i:nth-child(2) { left: 16%; }
.road i:nth-child(3) { left: 39%; }
.road i:nth-child(4) { left: 62%; }
.road i:nth-child(5) { left: 85%; }
.road i:nth-child(6) { left: 108%; }

body[data-landmark="laundry"] .landmark-building {
  right: 28%;
  width: 48%;
  background: #172126;
}

body[data-landmark="laundry"] .awning,
body[data-landmark="laundry"] .shop-window {
  opacity: 0.78;
}

body[data-landmark="dog"] .moon,
body[data-landmark="dog"] .dog-one {
  opacity: 1;
}

body[data-landmark="dog"] .landmark-building {
  right: 47%;
  width: 27%;
  background: #11181f;
}

body[data-loop="2"][data-landmark="dog"] .dog-one {
  right: 67%;
  transform: scaleX(-1);
}

body[data-loop="3"][data-landmark="dog"] .dog-one {
  right: 23%;
}

body[data-loop="3"][data-landmark="dog"] .dog-twin {
  opacity: 1;
}

body[data-landmark="grocer"] .landmark-building {
  right: 9%;
  width: 55%;
  background: #20241f;
}

body[data-landmark="grocer"] .shop-window {
  background: #c8773d;
  opacity: 0.86;
}

body[data-landmark="grocer"] .produce {
  opacity: 0.88;
}

body[data-loop="2"][data-landmark="grocer"] .produce i:nth-child(4),
body[data-loop="3"][data-landmark="grocer"] .produce i:nth-child(4) {
  opacity: 0;
}

body[data-landmark="junction"] .landmark-building {
  right: 57%;
  width: 21%;
  background: #111a20;
}

body[data-loop="1"][data-landmark="junction"] .arrow-east,
body[data-loop="2"][data-landmark="junction"] .arrow-west,
body[data-loop="3"][data-landmark="junction"] .road-arrows span {
  opacity: 0.88;
}

body[data-landmark="terminal"] .landmark-building {
  right: 33%;
  width: 34%;
  background: #101920;
}

body[data-landmark="terminal"] .clock-rack {
  opacity: 1;
}

body[data-loop="2"][data-landmark="terminal"] .clock-bank:first-child span,
body[data-loop="3"][data-landmark="terminal"] .clock-bank span {
  display: block;
}

body[data-loop="3"] .rain {
  opacity: 0.58;
}

body[data-impossible="true"] .street {
  background:
    linear-gradient(90deg, rgba(10, 16, 24, 0.92) 0 49.7%, rgba(34, 28, 47, 0.9) 50.3% 100%),
    #070b13;
}

body[data-impossible="true"] .street::after {
  opacity: 1;
}

body[data-impossible="true"] .landmark-sign {
  max-width: 70%;
  border-color: rgba(255, 188, 91, 0.78);
  box-shadow: 0 0 26px rgba(237, 117, 49, 0.22);
}

body[data-impossible="true"] .road-arrows {
  right: 9%;
  left: 47%;
}

body[data-impossible="true"] .road i:nth-child(odd) {
  animation-direction: reverse;
  background: rgba(199, 182, 232, 0.62);
}

.condensation {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
}

.condensation i {
  position: absolute;
  border: 1px solid rgba(211, 228, 231, 0.18);
  border-radius: 50%;
  filter: blur(0.3px);
}

.condensation i:nth-child(1) { top: 13%; left: 7%; width: 17%; height: 9%; border-right: 0; border-bottom: 0; }
.condensation i:nth-child(2) { top: 7%; right: 18%; width: 22%; height: 13%; border-left: 0; border-bottom: 0; }
.condensation i:nth-child(3) { right: 38%; bottom: 19%; width: 13%; height: 8%; border-top: 0; }

.rain {
  position: absolute;
  z-index: 8;
  inset: -20% 0 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.44;
  transition: opacity 900ms ease;
}

.rain i {
  position: absolute;
  top: -20%;
  width: 1px;
  height: 23%;
  background: linear-gradient(transparent, rgba(193, 215, 224, 0.72), transparent);
  transform: rotate(12deg);
  animation: rain-fall 2.1s linear infinite;
}

.rain i:nth-child(1) { left: 6%; animation-delay: -0.2s; }
.rain i:nth-child(2) { left: 14%; animation-delay: -1.3s; }
.rain i:nth-child(3) { left: 23%; animation-delay: -0.8s; }
.rain i:nth-child(4) { left: 31%; animation-delay: -1.7s; }
.rain i:nth-child(5) { left: 41%; animation-delay: -0.4s; }
.rain i:nth-child(6) { left: 50%; animation-delay: -1.1s; }
.rain i:nth-child(7) { left: 59%; animation-delay: -0.7s; }
.rain i:nth-child(8) { left: 68%; animation-delay: -1.5s; }
.rain i:nth-child(9) { left: 77%; animation-delay: -0.1s; }
.rain i:nth-child(10) { left: 85%; animation-delay: -1.8s; }
.rain i:nth-child(11) { left: 92%; animation-delay: -0.6s; }
.rain i:nth-child(12) { left: 97%; animation-delay: -1.2s; }

.window-glow {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 7%, rgba(239, 178, 105, 0.055) 21%, transparent 33%),
    linear-gradient(101deg, transparent 58%, rgba(198, 180, 231, 0.09) 71%, transparent 83%),
    linear-gradient(180deg, rgba(170, 208, 211, 0.025), transparent 40%);
  box-shadow: inset 0 0 70px rgba(1, 8, 12, 0.78);
}

.mullion {
  position: absolute;
  z-index: 30;
  top: 0;
  bottom: 0;
  width: clamp(11px, 1.55vw, 23px);
  background: linear-gradient(90deg, #051718, #1a4947 46%, #06191a);
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.78);
}

.mullion-one { left: 33%; }
.mullion-two { left: 68%; }

.reflection-passengers,
.physical-passengers {
  padding: 0;
  margin: 0;
  list-style: none;
}

.reflection {
  position: absolute;
  z-index: 10;
  bottom: 6%;
  width: clamp(45px, 6vw, 82px);
  height: 42%;
  opacity: 0.27;
  filter: blur(0.35px);
  transform: scaleX(-0.94);
  transform-origin: 50% 100%;
  transition: opacity 900ms ease, transform 1000ms ease;
}

.reflection .figure-head {
  position: absolute;
  z-index: 3;
  top: 5%;
  left: 31%;
  width: 38%;
  aspect-ratio: 0.92;
  border-radius: 48% 48% 44% 44%;
  background: rgba(205, 190, 235, 0.9);
  box-shadow: 0 0 11px rgba(198, 180, 231, 0.58);
  transition: transform 850ms ease;
}

.reflection .figure-head i {
  position: absolute;
  top: 50%;
  left: 28%;
  width: 44%;
  height: 2px;
  border-radius: 50%;
  background: rgba(247, 239, 255, 0.8);
  transition: all 700ms ease;
}

.reflection .figure-body {
  position: absolute;
  z-index: 1;
  right: 9%;
  bottom: 4%;
  left: 9%;
  height: 67%;
  border-radius: 43% 43% 16% 15%;
  background: linear-gradient(rgba(198, 181, 232, 0.88), rgba(103, 94, 139, 0.58));
}

.reflection .figure-body::after {
  content: "";
  position: absolute;
  right: -20%;
  bottom: 0;
  width: 62%;
  height: 30%;
  border-radius: 0 50% 18% 0;
  background: rgba(113, 102, 151, 0.68);
  transform: skewX(-18deg);
}

.reflection .identity-prop {
  position: absolute;
  z-index: 4;
}

.reflection-one { left: 7%; }
.reflection-two { left: 24%; height: 38%; }
.reflection-three { left: 43%; height: 46%; }
.reflection-four { left: 62%; height: 41%; }
.reflection-five { left: 81%; height: 35%; }

.reflection.identity-hat .identity-prop {
  top: 3%;
  left: 17%;
  width: 66%;
  height: 9%;
  border-radius: 50%;
  background: rgba(215, 202, 240, 0.9);
  box-shadow: 0 0 7px rgba(198, 180, 231, 0.4);
}

.reflection.identity-lean {
  transform: scaleX(-0.94) rotate(-9deg);
}

.reflection.identity-lean .identity-prop {
  top: 28%;
  left: -4%;
  width: 35%;
  height: 4px;
  border-radius: 3px;
  background: rgba(219, 207, 241, 0.7);
}

.reflection.identity-paper .identity-prop {
  right: -7%;
  bottom: 10%;
  width: 72%;
  height: 31%;
  border: 1px solid rgba(237, 224, 255, 0.72);
  background: rgba(142, 130, 171, 0.7);
  transform: rotate(7deg);
}

.reflection.identity-paper .identity-prop::after {
  content: "";
  position: absolute;
  top: 19%;
  right: 12%;
  bottom: 18%;
  width: 1px;
  background: rgba(238, 227, 255, 0.55);
}

.reflection.identity-collar .identity-prop {
  top: 24%;
  right: 11%;
  left: 11%;
  height: 26%;
  border-top: 4px solid rgba(222, 210, 244, 0.8);
  clip-path: polygon(0 0, 43% 78%, 50% 34%, 57% 78%, 100% 0, 87% 100%, 13% 100%);
  background: rgba(140, 128, 174, 0.7);
}

.reflection.identity-bag .identity-prop {
  right: -12%;
  bottom: 7%;
  width: 49%;
  height: 38%;
  border: 2px solid rgba(213, 199, 239, 0.62);
  border-radius: 4px;
  background: rgba(106, 96, 134, 0.82);
}

.reflection.identity-bag .identity-prop::before {
  content: "";
  position: absolute;
  right: 20%;
  bottom: 91%;
  width: 95%;
  height: 72%;
  border-top: 2px solid rgba(213, 199, 239, 0.55);
  border-left: 2px solid rgba(213, 199, 239, 0.55);
  border-radius: 70% 0 0;
}

body[data-loop="2"] .reflection-two,
body[data-loop="3"] .reflection-two {
  transform: scaleX(0.94) rotate(8deg);
  opacity: 0.4;
}

body[data-loop="3"] .reflection-one .identity-prop {
  transform: translateY(-9px) rotate(-5deg);
}

body[data-loop="3"] .reflection-three .identity-prop {
  transform: rotate(180deg);
}

body[data-loop="3"] .reflection-five .identity-prop {
  right: 63%;
}

body[data-impossible="true"] .reflection {
  opacity: 0.52;
}

body[data-impossible="true"] .reflection-one { transform: scaleX(-0.94) translateY(-8px); }
body[data-impossible="true"] .reflection-two { transform: scaleX(0.94) rotate(10deg) translateY(5px); }
body[data-impossible="true"] .reflection-three { transform: scaleX(-0.94) translateX(17px) rotate(7deg); }
body[data-impossible="true"] .reflection-four { transform: scaleX(-0.94) translateY(-11px) rotate(-5deg); }
body[data-impossible="true"] .reflection-five { transform: scaleX(-0.94) translateX(-12px); }

.reflected-route {
  position: absolute;
  z-index: 6;
  inset: 41% 0 0;
  overflow: hidden;
  color: var(--lilac);
  background: linear-gradient(transparent, rgba(80, 68, 120, 0.25));
  opacity: 0;
  transition: opacity 900ms ease;
}

.reflected-route p {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 19%;
  max-width: 45%;
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: clamp(0.58rem, 1.15vw, 0.9rem);
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-align: right;
  text-shadow: 0 0 9px rgba(198, 180, 231, 0.72);
  text-transform: uppercase;
}

.reflected-city {
  position: absolute;
  inset: 8% -12% 18%;
  display: flex;
  align-items: end;
  gap: 3%;
  opacity: 0.22;
}

.reflected-city i {
  flex: 1;
  height: 45%;
  background: rgba(172, 151, 208, 0.36);
}

.reflected-city i:nth-child(2n) { height: 78%; }
.reflected-city i:nth-child(3n) { height: 61%; }

.reflected-track {
  position: absolute;
  right: -25%;
  bottom: 7%;
  left: -25%;
  display: flex;
  justify-content: space-around;
}

.reflected-track i {
  width: 11%;
  height: 2px;
  background: rgba(198, 180, 231, 0.68);
  box-shadow: 0 0 5px rgba(198, 180, 231, 0.28);
}

body[data-reflection-moving="true"] .reflected-route {
  opacity: 0.86;
}

body[data-reflection-moving="true"] .reflected-track,
body[data-reflection-moving="true"] .reflected-city {
  animation: reflected-road 2.2s linear infinite;
}

body[data-reflection-moving="true"] .reflection {
  opacity: 0.72;
}

body[data-reflection-facing="true"] .reflection {
  transform: scaleX(1) translateY(-3px) !important;
  opacity: 0.82;
}

body[data-reflection-facing="true"] .reflection .figure-head {
  transform: scale(1.06);
}

body[data-reflection-facing="true"] .reflection .figure-head i {
  top: 47%;
  left: 24%;
  width: 52%;
  height: 5px;
  background:
    radial-gradient(circle at 15% 50%, #fff7ff 0 2px, transparent 2.6px),
    radial-gradient(circle at 85% 50%, #fff7ff 0 2px, transparent 2.6px);
}

.stop-cord {
  position: absolute;
  z-index: 60;
  right: 2.5%;
  bottom: 2.2%;
  left: 2.5%;
  display: block;
  height: 54px;
  padding: 0;
  border: 0;
  color: #24170d;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.cord-line {
  position: absolute;
  top: 15px;
  right: 0;
  left: 0;
  height: 5px;
  border-radius: 4px;
  background: #dc8f38;
  box-shadow: 0 2px 0 #75401f, 0 0 9px rgba(255, 177, 77, 0.24);
  transition: transform 180ms ease;
}

.cord-pull {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 4px;
  height: 20px;
  background: #db903a;
  box-shadow: 0 0 6px rgba(255, 192, 96, 0.3);
  transition: height 180ms ease;
}

.cord-label {
  position: absolute;
  top: 27px;
  left: 50%;
  max-width: 72%;
  padding: 5px 9px 4px;
  border-radius: 2px;
  color: #25170b;
  background: var(--amber-soft);
  box-shadow: 0 2px 0 #8e5527;
  font-size: clamp(0.54rem, 0.78vw, 0.67rem);
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.stop-cord:hover .cord-line,
.stop-cord:focus-visible .cord-line,
.stop-cord.is-pulled .cord-line {
  transform: translateY(5px);
}

.stop-cord:hover .cord-pull,
.stop-cord:focus-visible .cord-pull,
.stop-cord.is-pulled .cord-pull {
  height: 28px;
}

.stop-cord:disabled {
  cursor: default;
  opacity: 0.48;
}

.passenger-area {
  position: absolute;
  z-index: 26;
  top: 61.2%;
  right: var(--door-width);
  bottom: 10.2%;
  left: 0;
  overflow: visible;
  background:
    linear-gradient(180deg, #143d3e 0 12%, transparent 13%),
    linear-gradient(180deg, #0d2c2e, #082224 57%, #061719);
}

.passenger-area::before {
  content: "";
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  left: 0;
  height: 12%;
  border-bottom: 1px solid rgba(88, 133, 132, 0.24);
  background: linear-gradient(#174746, #103536);
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.3);
}

.seat-backs {
  position: absolute;
  z-index: 1;
  right: 2%;
  bottom: 3%;
  left: 2%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 52%;
}

.seat-backs i {
  width: 16%;
  height: 74%;
  border: 2px solid #0d2828;
  border-bottom: 0;
  border-radius: 34% 34% 5% 5%;
  background:
    repeating-linear-gradient(118deg, transparent 0 8px, rgba(239, 181, 98, 0.085) 8px 10px),
    linear-gradient(120deg, #1b5251, #123d3e);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.34);
}

.physical-passengers {
  position: absolute;
  z-index: 12;
  inset: 0;
}

.passenger {
  position: absolute;
  bottom: 5%;
  width: clamp(49px, 7vw, 96px);
  height: 84%;
  transform-origin: 50% 100%;
  transition:
    transform 920ms cubic-bezier(0.43, 0, 0.55, 1),
    opacity 720ms ease 180ms;
}

.passenger .figure-head {
  position: absolute;
  z-index: 3;
  top: 4%;
  left: 28%;
  width: 44%;
  aspect-ratio: 0.92;
  border-radius: 48% 48% 43% 43%;
  background: #0d1718;
  box-shadow: inset -5px -2px rgba(241, 170, 91, 0.07), 0 5px 9px rgba(0, 0, 0, 0.42);
}

.passenger .figure-body {
  position: absolute;
  z-index: 1;
  right: 3%;
  bottom: 0;
  left: 3%;
  height: 70%;
  border-radius: 44% 44% 10% 10%;
  background: linear-gradient(110deg, #091415, #182526 52%, #071112);
  box-shadow: inset -10px 0 rgba(239, 163, 77, 0.04), 0 8px 11px rgba(0, 0, 0, 0.4);
}

.passenger .figure-body::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: 0;
  width: 58%;
  height: 27%;
  border-radius: 0 45% 10% 0;
  background: #101c1d;
  transform: skewX(-16deg);
}

.passenger .identity-prop {
  position: absolute;
  z-index: 4;
}

.passenger-one { left: 5%; --exit-x: 78vw; }
.passenger-two { left: 23%; height: 77%; --exit-x: 63vw; }
.passenger-three { left: 42%; height: 92%; --exit-x: 44vw; }
.passenger-four { left: 62%; height: 81%; --exit-x: 26vw; }
.passenger-five { left: 81%; height: 71%; --exit-x: 9vw; }

.passenger.identity-hat .identity-prop {
  top: 2%;
  left: 13%;
  width: 74%;
  height: 10%;
  border-radius: 50%;
  background: #0b1516;
  box-shadow: inset -4px -1px rgba(239, 168, 89, 0.06);
}

.passenger.identity-hat .identity-prop::before {
  content: "";
  position: absolute;
  top: -58%;
  right: 25%;
  left: 25%;
  height: 112%;
  border-radius: 50% 50% 20% 20%;
  background: #0d1718;
}

.passenger.identity-lean {
  transform: rotate(-7deg);
}

.passenger.identity-lean .figure-head {
  top: 6%;
  left: 18%;
}

.passenger.identity-lean .identity-prop {
  top: 28%;
  left: -4%;
  width: 38%;
  height: 5px;
  border-radius: 4px;
  background: #162324;
  transform: rotate(12deg);
}

.passenger.identity-paper .identity-prop {
  right: -8%;
  bottom: 8%;
  width: 72%;
  height: 39%;
  border: 1px solid #705940;
  background:
    linear-gradient(90deg, transparent 49%, rgba(184, 148, 101, 0.22) 50% 51%, transparent 52%),
    #2a2823;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.22);
  transform: rotate(-8deg);
}

.passenger.identity-paper .identity-prop::after {
  content: "";
  position: absolute;
  top: 16%;
  right: 10%;
  left: 10%;
  height: 1px;
  background: rgba(205, 167, 115, 0.26);
  box-shadow: 0 7px rgba(205, 167, 115, 0.19), 0 14px rgba(205, 167, 115, 0.14);
}

.passenger.identity-collar .figure-body {
  clip-path: polygon(0 16%, 24% 0, 50% 18%, 76% 0, 100% 16%, 92% 100%, 8% 100%);
  background: linear-gradient(90deg, #061011, #213133 50%, #061011);
}

.passenger.identity-collar .identity-prop {
  top: 27%;
  right: 12%;
  left: 12%;
  height: 19%;
  border-top: 3px solid #27383a;
  clip-path: polygon(0 0, 43% 76%, 50% 32%, 57% 76%, 100% 0, 85% 100%, 15% 100%);
  background: #142324;
}

.passenger.identity-bag .figure-head {
  left: 22%;
}

.passenger.identity-bag .identity-prop {
  right: -13%;
  bottom: 7%;
  width: 48%;
  height: 39%;
  border: 2px solid #091112;
  border-radius: 5px;
  background: #1b2524;
  box-shadow: inset 0 0 0 1px #263433;
}

.passenger.identity-bag .identity-prop::before {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 93%;
  width: 100%;
  height: 78%;
  border-top: 2px solid #202f2f;
  border-left: 2px solid #202f2f;
  border-radius: 75% 0 0;
}

body[data-physical-count="4"] .passenger-five,
body[data-physical-count="3"] .passenger-four,
body[data-physical-count="3"] .passenger-five,
body[data-physical-count="2"] .passenger-three,
body[data-physical-count="2"] .passenger-four,
body[data-physical-count="2"] .passenger-five,
body[data-physical-count="1"] .passenger-two,
body[data-physical-count="1"] .passenger-three,
body[data-physical-count="1"] .passenger-four,
body[data-physical-count="1"] .passenger-five,
body[data-physical-count="0"] .passenger {
  opacity: 0;
  transform: translateX(var(--exit-x)) translateY(6vh) scale(0.58) rotate(3deg);
}

.departure-path {
  position: absolute;
  z-index: 48;
  top: 53%;
  right: 0;
  bottom: 7%;
  left: 35%;
  padding: 0;
  margin: 0;
  overflow: visible;
  list-style: none;
  pointer-events: none;
}

.departure-figure {
  position: absolute;
  left: 43%;
  bottom: 9%;
  width: clamp(30px, 4.2vw, 58px);
  height: clamp(94px, 18vh, 150px);
  opacity: 0;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.48));
  transform: translateX(-50%) scale(0.88);
  transform-origin: 50% 100%;
  transition:
    left 760ms cubic-bezier(0.4, 0, 0.35, 1),
    bottom 760ms cubic-bezier(0.4, 0, 0.35, 1),
    opacity 220ms ease,
    transform 760ms ease;
}

.departure-figure:nth-child(even) {
  transform: translateX(-50%) scale(0.84) rotate(3deg);
}

.departure-figure .figure-head {
  position: absolute;
  z-index: 3;
  top: 4%;
  left: 28%;
  width: 44%;
  aspect-ratio: 0.92;
  border-radius: 48% 48% 43% 43%;
  background: #172122;
  box-shadow: inset -5px -2px rgba(255, 193, 119, 0.12), 0 5px 9px rgba(0, 0, 0, 0.5);
}

.departure-figure .figure-body {
  position: absolute;
  z-index: 1;
  right: 11%;
  bottom: 24%;
  left: 11%;
  height: 55%;
  border-radius: 44% 44% 18% 18%;
  background: linear-gradient(110deg, #0a1415, #293233 54%, #101718);
  box-shadow: inset -10px 0 rgba(255, 178, 94, 0.08), 0 8px 11px rgba(0, 0, 0, 0.46);
}

.departure-figure .figure-body::before,
.departure-figure .figure-body::after {
  content: "";
  position: absolute;
  bottom: -43%;
  width: 29%;
  height: 49%;
  border-radius: 0 0 42% 42%;
  background: #182122;
}

.departure-figure .figure-body::before {
  left: 16%;
  transform: rotate(5deg);
}

.departure-figure .figure-body::after {
  right: 16%;
  transform: rotate(-8deg);
}

.departure-figure .identity-prop {
  position: absolute;
  z-index: 4;
}

.departure-figure.identity-bag .identity-prop {
  right: -13%;
  bottom: 27%;
  width: 48%;
  height: 39%;
  border: 2px solid #13191a;
  border-radius: 4px;
  background: #303536;
  box-shadow: inset 0 0 0 1px rgba(255, 194, 116, 0.14);
}

.departure-figure.identity-bag .identity-prop::before {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 93%;
  width: 100%;
  height: 78%;
  border-top: 2px solid #343d3e;
  border-left: 2px solid #343d3e;
  border-radius: 75% 0 0;
}

.departure-figure.identity-collar .figure-body {
  clip-path: polygon(0 16%, 24% 0, 50% 18%, 76% 0, 100% 16%, 92% 100%, 8% 100%);
}

.departure-figure.identity-collar .identity-prop {
  top: 27%;
  right: 12%;
  left: 12%;
  height: 19%;
  border-top: 3px solid #3b4748;
  clip-path: polygon(0 0, 43% 76%, 50% 32%, 57% 76%, 100% 0, 85% 100%, 15% 100%);
  background: #202a2b;
}

.departure-figure.identity-paper .identity-prop {
  right: -8%;
  bottom: 29%;
  width: 72%;
  height: 39%;
  border: 1px solid #98714b;
  background: #37342d;
  transform: rotate(-8deg);
}

.departure-figure.identity-lean {
  transform: translateX(-50%) scale(0.86) rotate(-6deg);
}

.departure-figure.identity-lean .identity-prop {
  top: 28%;
  left: -4%;
  width: 38%;
  height: 4px;
  border-radius: 4px;
  background: #303a3b;
}

.departure-figure.identity-hat .identity-prop {
  top: 2%;
  left: 13%;
  width: 74%;
  height: 10%;
  border-radius: 50%;
  background: #172122;
}

.departure-figure.identity-hat .identity-prop::before {
  content: "";
  position: absolute;
  top: -58%;
  right: 25%;
  left: 25%;
  height: 112%;
  border-radius: 50% 50% 20% 20%;
  background: #1c2728;
}

body[data-phase="final-exit"][data-departing-count="1"] .departure-one,
body[data-phase="final-exit"][data-departing-count="2"] :is(.departure-one, .departure-two),
body[data-phase="final-exit"][data-departing-count="3"] :is(.departure-one, .departure-two, .departure-three),
body[data-phase="final-exit"][data-departing-count="4"] :is(.departure-one, .departure-two, .departure-three, .departure-four),
body[data-phase="final-exit"][data-departing-count="5"] .departure-figure {
  opacity: 0.94;
}

body[data-phase="final-exit"][data-departing-count="1"] .departure-one,
body[data-phase="final-exit"][data-departing-count="2"] .departure-two,
body[data-phase="final-exit"][data-departing-count="3"] .departure-three,
body[data-phase="final-exit"][data-departing-count="4"] .departure-four,
body[data-phase="final-exit"][data-departing-count="5"] .departure-five {
  left: 43%;
  bottom: 9%;
}

body[data-phase="final-exit"][data-departing-count="2"] .departure-one,
body[data-phase="final-exit"][data-departing-count="3"] .departure-two,
body[data-phase="final-exit"][data-departing-count="4"] .departure-three,
body[data-phase="final-exit"][data-departing-count="5"] .departure-four {
  left: 65%;
  bottom: 4%;
}

body[data-phase="final-exit"][data-departing-count="3"] .departure-one,
body[data-phase="final-exit"][data-departing-count="4"] .departure-two,
body[data-phase="final-exit"][data-departing-count="5"] .departure-three {
  left: 83%;
  bottom: -5%;
}

body[data-phase="final-exit"][data-departing-count="4"] .departure-one,
body[data-phase="final-exit"][data-departing-count="5"] .departure-two {
  left: 90%;
  bottom: -22%;
}

body[data-phase="final-exit"][data-departing-count="5"] .departure-one {
  left: 95%;
  bottom: -36%;
}

.floor {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 31%;
  overflow: hidden;
  background: linear-gradient(150deg, #102d2d, #051616);
  transform: perspective(260px) rotateX(24deg);
  transform-origin: bottom;
}

.floor i {
  position: absolute;
  top: 0;
  bottom: -50%;
  width: 2px;
  background: rgba(216, 149, 79, 0.09);
  transform: rotate(22deg);
}

.floor i:nth-child(1) { left: 17%; }
.floor i:nth-child(2) { left: 39%; }
.floor i:nth-child(3) { left: 63%; }
.floor i:nth-child(4) { left: 84%; }

.front-door {
  position: absolute;
  z-index: 25;
  top: 8.2%;
  right: 0;
  bottom: 0;
  width: var(--door-width);
  overflow: hidden;
  border-top: 4px solid #071819;
  border-left: clamp(7px, 1vw, 14px) solid #061718;
  background: #0a2223;
  box-shadow: -9px 0 22px rgba(0, 0, 0, 0.48), inset 0 0 0 2px rgba(42, 81, 80, 0.45);
}

.front-door::before {
  content: "";
  position: absolute;
  z-index: 7;
  top: 0;
  right: 0;
  left: 0;
  height: 7%;
  border-bottom: 3px solid #071919;
  background: linear-gradient(#163f3f, #0e3031);
}

.front-door p {
  position: absolute;
  z-index: 12;
  right: 6%;
  bottom: 3.5%;
  left: 6%;
  margin: 0;
  color: rgba(255, 221, 166, 0.76);
  font-family: "Courier New", monospace;
  font-size: clamp(0.49rem, 0.76vw, 0.64rem);
  letter-spacing: 0.1em;
  text-align: center;
}

.door-light {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(255, 220, 157, 0.28), transparent 14% 86%, rgba(85, 35, 22, 0.34)),
    linear-gradient(180deg, #b75f30, #ef9247 50%, #7d3d25);
  opacity: 0;
  transition: opacity 650ms ease;
}

.door-panel {
  position: absolute;
  z-index: 5;
  top: 7%;
  bottom: 10%;
  width: 50%;
  border: 2px solid #082123;
  background:
    linear-gradient(110deg, rgba(197, 180, 229, 0.08), transparent 35%),
    rgba(18, 55, 56, 0.98);
  transition: transform 780ms cubic-bezier(0.6, 0, 0.25, 1);
}

.door-panel::before {
  content: "";
  position: absolute;
  top: 8%;
  right: 13%;
  bottom: 25%;
  left: 13%;
  border: 3px solid #082022;
  background:
    linear-gradient(112deg, rgba(198, 181, 231, 0.08), transparent 38%),
    rgba(4, 14, 18, 0.78);
  box-shadow: inset 0 0 18px #020708;
}

.door-panel::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 12%;
  left: 18%;
  height: 2px;
  background: rgba(239, 177, 96, 0.18);
}

.door-panel-left { left: 0; transform-origin: left; }
.door-panel-right { right: 0; transform-origin: right; }

.door-seal {
  position: absolute;
  z-index: 8;
  top: 7%;
  bottom: 10%;
  left: 50%;
  width: 5px;
  background: #061719;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.72);
  transform: translateX(-50%);
  transition: opacity 250ms ease;
}

.grab-rail {
  position: absolute;
  z-index: 3;
  right: 17%;
  bottom: 13%;
  width: 7px;
  height: 54%;
  border-radius: 6px;
  background: linear-gradient(90deg, #9b642f, #ffd180 42%, #8f5529);
  box-shadow: 0 0 6px rgba(255, 180, 77, 0.3);
  opacity: 0;
  transition: opacity 500ms ease 380ms;
}

.grab-rail::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 7px;
  border-radius: 6px;
  background: inherit;
}

.threshold {
  position: absolute;
  z-index: 4;
  right: 5%;
  bottom: 9%;
  left: 5%;
  height: 8%;
  border-top: 4px solid #d49445;
  background: repeating-linear-gradient(0deg, #29231f 0 6px, #57442d 6px 8px);
  opacity: 0;
  transform: perspective(80px) rotateX(45deg);
  transform-origin: top;
  transition: opacity 500ms ease 280ms;
}

body[data-door-open="true"] .door-light,
body[data-door-open="true"] .grab-rail,
body[data-door-open="true"] .threshold {
  opacity: 1;
}

body[data-door-open="true"] .door-panel-left {
  transform: translateX(-72%) scaleX(0.62);
}

body[data-door-open="true"] .door-panel-right {
  transform: translateX(72%) scaleX(0.62);
}

body[data-door-open="true"] .door-seal {
  opacity: 0;
}

body[data-moving="false"] .street,
body[data-moving="false"] .road i,
body[data-moving="false"] .rain i {
  animation-play-state: paused;
}

.ride-instruction {
  position: absolute;
  z-index: 100;
  right: calc(var(--door-width) + 3%);
  bottom: 1.6%;
  left: 3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.ride-instruction p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 233, 198, 0.86);
  font-family: Georgia, serif;
  font-size: clamp(0.72rem, 1.25vw, 0.98rem);
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.step-advance,
.recovery button,
.ending button {
  flex: none;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--amber);
  border-radius: 2px;
  color: #19130d;
  background: var(--amber-soft);
  box-shadow: 0 2px 0 rgba(111, 64, 25, 0.65);
  font-size: clamp(0.66rem, 0.96vw, 0.8rem);
  font-weight: 750;
  letter-spacing: 0.055em;
  line-height: 1.15;
  cursor: pointer;
  touch-action: manipulation;
}

.step-advance:hover,
.recovery button:hover,
.ending button:hover {
  background: #ffe3ad;
}

.recovery,
.ending {
  position: absolute;
  z-index: 50;
  right: 6%;
  bottom: 5%;
  left: 6%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow button"
    "title button"
    "copy button";
  align-content: center;
  min-height: 70%;
  column-gap: 24px;
  padding: 2.5% 3%;
  border-left: 2px solid rgba(239, 173, 86, 0.35);
  background:
    linear-gradient(90deg, rgba(4, 18, 19, 0.97), rgba(7, 27, 28, 0.93) 68%, rgba(7, 27, 28, 0.36));
  box-shadow: -16px 0 35px rgba(0, 0, 0, 0.2);
}

.recovery .eyebrow,
.ending .eyebrow {
  grid-area: eyebrow;
  margin: 0 0 5px;
  color: var(--amber);
  font-size: clamp(0.57rem, 0.86vw, 0.69rem);
  font-weight: 800;
  letter-spacing: 0.17em;
}

.recovery h2,
.ending h2 {
  grid-area: title;
  margin: 0;
  color: var(--cream);
  font-family: Georgia, serif;
  font-size: clamp(1.05rem, 2.15vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
}

.recovery p:not(.eyebrow),
.ending p:not(.eyebrow) {
  grid-area: copy;
  max-width: 650px;
  margin: 7px 0 0;
  color: rgba(255, 232, 194, 0.76);
  font-size: clamp(0.68rem, 0.96vw, 0.82rem);
  line-height: 1.35;
}

.recovery button,
.ending button {
  grid-area: button;
  align-self: center;
}

.ending {
  top: 8%;
  right: 5%;
  bottom: auto;
  left: 5%;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title button"
    "copy button";
  min-height: 0;
  column-gap: 18px;
  padding: 1.25% 2%;
  border-left: 0;
  background: linear-gradient(90deg, rgba(4, 18, 19, 0.66), rgba(4, 18, 19, 0.22) 62%, transparent);
  box-shadow: none;
}

.ending .eyebrow {
  display: none;
}

.ending h2 {
  font-size: clamp(1rem, 1.75vw, 1.45rem);
}

.ending p:not(.eyebrow) {
  margin-top: 3px;
  color: rgba(255, 232, 194, 0.58);
}

body[data-phase="reflection-turn"] .route-header,
body[data-phase="ended"] .route-header {
  opacity: 0.34;
  transition: opacity 700ms ease;
}

body[data-phase="reflection-turn"] .destination-sign,
body[data-phase="ended"] .destination-sign {
  border-color: transparent;
  background: rgba(5, 17, 17, 0.42);
  box-shadow: none;
  text-shadow: none;
}

body[data-phase="reflection-turn"] .bus-title,
body[data-phase="ended"] .bus-title,
body[data-phase="reflection-turn"] .landmark-sign,
body[data-phase="ended"] .landmark-sign,
body[data-phase="reflection-turn"] .street-note,
body[data-phase="ended"] .street-note,
body[data-phase="reflection-turn"] .road-arrows span,
body[data-phase="ended"] .road-arrows span {
  opacity: 0.16;
  transition: opacity 700ms ease;
}

body[data-phase="reflection-turn"] .window-band,
body[data-phase="ended"] .window-band {
  border-color: #071c1d;
  box-shadow: inset 0 0 0 2px rgba(21, 62, 62, 0.56), 0 10px 24px rgba(0, 0, 0, 0.35);
}

body[data-phase="reflection-turn"] .stop-cord,
body[data-phase="ended"] .stop-cord {
  opacity: 0.15;
}

body[data-phase="reflection-turn"] .front-door,
body[data-phase="ended"] .front-door {
  box-shadow: -5px 0 14px rgba(0, 0, 0, 0.38);
}

body[data-phase="reflection-turn"][data-door-open="true"] .door-light,
body[data-phase="ended"][data-door-open="true"] .door-light {
  opacity: 0.62;
  filter: saturate(0.72) brightness(0.72);
}

body[data-phase="ended"] .seat-backs i {
  border-color: rgba(46, 105, 103, 0.78);
  background:
    repeating-linear-gradient(118deg, transparent 0 8px, rgba(239, 181, 98, 0.11) 8px 10px),
    linear-gradient(120deg, #1c5553, #123f40);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.25), 0 -2px 8px rgba(26, 82, 80, 0.18);
}

@keyframes road-dash {
  from { transform: translateX(210%); }
  to { transform: translateX(-210%); }
}

@keyframes rain-fall {
  from { transform: translateY(-20%) rotate(12deg); }
  to { transform: translateY(660%) rotate(12deg); }
}

@keyframes street-drift {
  0% { transform: scale(1.025) translateX(1.6%); }
  100% { transform: scale(1.025) translateX(-1.6%); }
}

@keyframes reflected-road {
  from { transform: translateX(-10%); }
  to { transform: translateX(10%); }
}

@media (max-width: 700px) {
  :root {
    --door-width: clamp(54px, 14.5vw, 64px);
  }

  .bus {
    min-height: 560px;
  }

  .route-header {
    top: 1.15%;
    right: calc(var(--door-width) + 2%);
    left: 2.2%;
    grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
    gap: 5px;
  }

  .route-name {
    display: none;
  }

  .destination-sign {
    grid-column: 1;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1px;
    min-height: 44px;
    padding: 5px 7px;
  }

  .loop-readout {
    display: block;
    font-size: 0.46rem;
  }

  .destination-readout {
    font-size: clamp(0.55rem, 2.6vw, 0.66rem);
    line-height: 1.03;
    text-align: left;
  }

  .mode-toggle {
    grid-column: 2;
    width: 100%;
    padding: 5px 6px;
    font-size: 0.49rem;
    line-height: 1.1;
  }

  .bus-title {
    top: 9.7%;
    left: 3%;
    gap: 5px;
    padding: 4px 6px 3px;
  }

  .bus-title span { font-size: 0.42rem; }
  .bus-title strong { font-size: 0.49rem; }

  .window-band {
    top: 8%;
    height: 52.6%;
  }

  .passenger-area {
    top: 59.2%;
    bottom: 13.7%;
  }

  .landmark-sign {
    top: 17%;
    left: 7%;
    max-width: 74%;
    padding: 5px 8px 4px;
    font-size: clamp(0.59rem, 2.8vw, 0.72rem);
    line-height: 1.14;
  }

  body[data-impossible="true"] .landmark-sign {
    max-width: 76%;
  }

  .street-note {
    bottom: 30%;
    left: 7%;
    max-width: 71%;
    font-size: clamp(0.58rem, 2.6vw, 0.69rem);
  }

  .road-arrows,
  body[data-impossible="true"] .road-arrows {
    right: 9%;
    bottom: 35%;
    left: 46%;
    gap: 6px;
    font-size: 0.55rem;
  }

  .clock-rack {
    top: 32%;
    right: 7%;
    gap: 4px;
  }

  .clock-bank {
    gap: 4px;
  }

  .clock-bank span {
    min-width: 42px;
    padding: 4px;
    font-size: 0.54rem;
  }

  .reflection {
    bottom: 3%;
    width: clamp(40px, 11.5vw, 46px);
    height: 49%;
    filter: blur(0.15px);
  }

  .reflection-one { left: 1.2%; }
  .reflection-two { left: 20.2%; height: 45%; }
  .reflection-three { left: 39.5%; height: 53%; }
  .reflection-four { left: 58.8%; height: 48%; }
  .reflection-five { left: 78%; height: 43%; }

  body[data-phase="reflection-turn"] .reflection,
  body[data-phase="ended"] .reflection {
    opacity: 0.92;
    filter: none;
  }

  .reflected-route p {
    right: 7%;
    bottom: 16%;
    max-width: 54%;
    font-size: 0.53rem;
    line-height: 1.15;
  }

  .stop-cord {
    right: 4%;
    bottom: 1.3%;
    left: 4%;
    height: 54px;
  }

  .cord-label {
    left: 49%;
    max-width: 78%;
    font-size: 0.52rem;
  }

  .passenger {
    width: clamp(37px, 12vw, 51px);
  }

  .passenger-one { left: 1.5%; }
  .passenger-two { left: 20%; }
  .passenger-three { left: 39%; }
  .passenger-four { left: 59%; }
  .passenger-five { left: 78%; }

  .ride-instruction {
    right: calc(var(--door-width) + 3%);
    bottom: 1.25%;
    left: 3%;
    align-items: end;
    gap: 8px;
  }

  .ride-instruction p {
    max-width: 55%;
    font-size: clamp(0.6rem, 2.45vw, 0.68rem);
    line-height: 1.25;
  }

  .step-advance {
    max-width: 45%;
    padding: 7px 8px;
    font-size: 0.61rem;
    white-space: normal;
  }

  .recovery,
  .ending {
    right: 4%;
    bottom: 4%;
    left: 4%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "copy"
      "button";
    justify-items: start;
    min-height: 91%;
    padding: 5% 4%;
  }

  .ending {
    top: 6%;
    right: 3%;
    bottom: auto;
    left: 3%;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title button"
      "copy button";
    min-height: 0;
    column-gap: 8px;
    padding: 7px 8px;
  }

  .recovery h2,
  .ending h2 {
    font-size: clamp(0.94rem, 4.9vw, 1.2rem);
  }

  .ending h2 {
    max-width: 205px;
    font-size: clamp(0.9rem, 4.25vw, 1.05rem);
  }

  .recovery p:not(.eyebrow),
  .ending p:not(.eyebrow) {
    font-size: clamp(0.62rem, 2.7vw, 0.72rem);
  }

  .recovery button,
  .ending button {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 0.66rem;
  }

  .ending button {
    margin-top: 0;
  }

  .departure-path {
    top: 53%;
    bottom: 7%;
    left: 35%;
  }

  .departure-figure {
    width: clamp(32px, 9vw, 38px);
    height: clamp(102px, 18vh, 146px);
  }

  body[data-door-open="true"] .door-light {
    opacity: 0.72;
    filter: saturate(0.78) brightness(0.78);
  }

  body[data-phase="reflection-turn"][data-door-open="true"] .door-light,
  body[data-phase="ended"][data-door-open="true"] .door-light {
    opacity: 0.52;
  }

  .front-door p {
    right: auto;
    bottom: 3%;
    left: 48%;
    writing-mode: vertical-rl;
    font-size: 0.43rem;
    transform: translateX(-50%);
  }

  .grab-rail {
    right: 20%;
    width: 5px;
  }

  .grab-rail::before {
    width: 24px;
    height: 5px;
  }
}

@media (max-width: 350px) {
  .destination-sign {
    padding-right: 5px;
    padding-left: 5px;
  }

  .mode-toggle {
    font-size: 0.45rem;
  }

  .bus-title span {
    display: none;
  }

  .street-note {
    max-width: 77%;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .bus {
    min-height: 420px;
  }

  .window-band {
    height: 51%;
  }

  .passenger-area {
    top: 58.5%;
    bottom: 10%;
  }

  .bus-title {
    top: 10.5%;
  }

  .ride-instruction {
    bottom: 1%;
  }

  .recovery,
  .ending {
    min-height: 82%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}

body[data-step-mode="true"] *,
body[data-step-mode="true"] *::before,
body[data-step-mode="true"] *::after {
  animation-play-state: paused !important;
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
}