/* Living 2D night city — centered skyline, empty sides, still water. */

:root {
  --sky-top: #02040c;
  --sky-mid: #06101c;
  --sky-horizon: #15243c;
  --window: #f6c453;
  --window-dim: #c98a2a;
  --window-cool: #8ec8ff;
  --headlight: #fff4c8;
  --taillight: #ff4d4d;
  --water: #04080f;
  --water-top: #07101c;
  --water-deep: #02040a;
}

/* Day Mode Variables & Styles */
.city-stage.city-day,
[data-time="day"] .city-stage {
  --sky-top: #1e6091;
  --sky-mid: #52b2cf;
  --sky-horizon: #b5e2fa;
  --window: rgba(255, 255, 255, 0.05);
  --window-dim: rgba(255, 255, 255, 0.02);
  --window-cool: rgba(255, 255, 255, 0.08);
  --headlight: rgba(255, 255, 255, 0.25);
  --taillight: rgba(239, 68, 68, 0.4);
  --water: #184e77;
  --water-top: #2972a3;
  --water-deep: #0f3057;
}

.city-stage.city-day .city-stars,
[data-time="day"] .city-stars {
  display: none !important;
}

.city-stage.city-day .city-moon,
[data-time="day"] .city-moon {
  display: none !important;
}

.city-sun {
  display: none;
  position: absolute;
  top: 12%;
  left: 12%;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 45%, #fffdf0 0%, #fef08a 35%, #facc15 75%, #eab308 100%);
  box-shadow:
    0 0 35px 15px rgba(253, 224, 71, 0.65),
    0 0 90px 45px rgba(250, 204, 21, 0.35),
    0 0 180px 90px rgba(234, 179, 8, 0.2);
  pointer-events: none;
}

.city-stage.city-day .city-sun,
[data-time="day"] .city-sun {
  display: block;
}

.city-stage.city-day .horizon-glow,
[data-time="day"] .horizon-glow {
  background: radial-gradient(ellipse at 50% 100%, rgba(254, 240, 138, 0.45), rgba(181, 226, 250, 0.25) 50%, transparent 80%);
}

.city-stage.city-day .skyline-mid,
[data-time="day"] .skyline-mid {
  filter: drop-shadow(0 -1px 3px rgba(15, 48, 87, 0.3));
}

/* Day Mode Skyline Buildings: Refined modern architectural silver, metallic slate & platinum tones */
.city-stage.city-day .skyline path[fill="#0a1120"],
[data-time="day"] .skyline path[fill="#0a1120"],
.city-stage.city-day .skyline g[fill="#0a182c"],
.city-stage.city-day .skyline g[fill="#0a182c"] *,
.city-stage.city-day .skyline .skyline-layer-2,
.city-stage.city-day .skyline .skyline-layer-2 *,
.city-stage.city-day .skyline-layer-2,
.city-stage.city-day .skyline-layer-2 *,
[data-time="day"] .skyline g[fill="#0a182c"],
[data-time="day"] .skyline g[fill="#0a182c"] *,
[data-time="day"] .skyline .skyline-layer-2,
[data-time="day"] .skyline .skyline-layer-2 *,
[data-time="day"] .skyline-layer-2,
[data-time="day"] .skyline-layer-2 *,
.skyline-layer-2[data-day="true"],
.skyline-layer-2[data-day="true"] * {
  fill: #8595a6 !important; /* Silver-metallic midground towers */
}

.city-stage.city-day .skyline path[fill="#070c18"],
[data-time="day"] .skyline path[fill="#070c18"],
.city-stage.city-day .skyline g[fill="#071220"],
.city-stage.city-day .skyline g[fill="#071220"] *,
.city-stage.city-day .skyline .skyline-layer-1,
.city-stage.city-day .skyline .skyline-layer-1 *,
.city-stage.city-day .skyline-layer-1,
.city-stage.city-day .skyline-layer-1 *,
[data-time="day"] .skyline g[fill="#071220"],
[data-time="day"] .skyline g[fill="#071220"] *,
[data-time="day"] .skyline .skyline-layer-1,
[data-time="day"] .skyline .skyline-layer-1 *,
[data-time="day"] .skyline-layer-1,
[data-time="day"] .skyline-layer-1 *,
.skyline-layer-1[data-day="true"],
.skyline-layer-1[data-day="true"] * {
  fill: #a2b0be !important; /* Distant light silver / atmospheric misty buildings */
}

.city-stage.city-day .skyline path[fill="#050810"],
[data-time="day"] .skyline path[fill="#050810"],
.city-stage.city-day .skyline g[fill="#040913"],
.city-stage.city-day .skyline g[fill="#040913"] *,
.city-stage.city-day .skyline .skyline-layer-3,
.city-stage.city-day .skyline .skyline-layer-3 *,
.city-stage.city-day .skyline-layer-3,
.city-stage.city-day .skyline-layer-3 *,
[data-time="day"] .skyline g[fill="#040913"],
[data-time="day"] .skyline g[fill="#040913"] *,
[data-time="day"] .skyline .skyline-layer-3,
[data-time="day"] .skyline .skyline-layer-3 *,
[data-time="day"] .skyline-layer-3,
[data-time="day"] .skyline-layer-3 *,
.skyline-layer-3[data-day="true"],
.skyline-layer-3[data-day="true"] * {
  fill: #5b6978 !important; /* Architectural slate silver foreground towers */
}

.city-stage.city-day .skyline path[fill="#0e1728"],
[data-time="day"] .skyline path[fill="#0e1728"],
.city-stage.city-day .skyline g[fill="#02060d"],
.city-stage.city-day .skyline g[fill="#02060d"] *,
.city-stage.city-day .skyline .skyline-layer-4,
.city-stage.city-day .skyline .skyline-layer-4 *,
.city-stage.city-day .skyline-layer-4,
.city-stage.city-day .skyline-layer-4 *,
[data-time="day"] .skyline g[fill="#02060d"],
[data-time="day"] .skyline g[fill="#02060d"] *,
[data-time="day"] .skyline .skyline-layer-4,
[data-time="day"] .skyline .skyline-layer-4 *,
[data-time="day"] .skyline-layer-4,
[data-time="day"] .skyline-layer-4 *,
.skyline-layer-4[data-day="true"],
.skyline-layer-4[data-day="true"] * {
  fill: #434e5a !important; /* Waterfront promenade / docks metallic granite base */
}

.city-stage.city-day .skyline path[fill="#121e34"],
[data-time="day"] .skyline path[fill="#121e34"] {
  fill: #6c7b8c !important;
}

.city-stage.city-day .window-warm,
.city-stage.city-day .window-dim,
.city-stage.city-day .window-cool,
.city-stage.city-day .window-warm *,
.city-stage.city-day .window-dim *,
.city-stage.city-day .window-cool *,
[data-time="day"] .window-warm,
[data-time="day"] .window-dim,
[data-time="day"] .window-cool,
[data-time="day"] .window-warm *,
[data-time="day"] .window-dim *,
[data-time="day"] .window-cool * {
  fill: rgba(255, 255, 255, 0.15) !important;
  opacity: 0.25 !important;
}

.city-stage.city-day circle[fill="#ffd166"],
.city-stage.city-day circle[fill="#ff4d4d"],
[data-time="day"] circle[fill="#ffd166"],
[data-time="day"] circle[fill="#ff4d4d"] {
  opacity: 0.3 !important;
}

.city-stage.city-day circle[fill="#ff3b30"],
[data-time="day"] circle[fill="#ff3b30"] {
  opacity: 0.3 !important;
  animation: none !important;
}

.city-stage.city-day .plane-glow,
[data-time="day"] .plane-glow {
  opacity: 0.15 !important;
}

.city-stage.city-day .boat-light,
[data-time="day"] .boat-light {
  opacity: 0.2 !important;
  box-shadow: none !important;
}

.city-stage.city-day .boat-windows span,
[data-time="day"] .boat-windows span {
  background: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
}

.city-stage.city-day .water,
[data-time="day"] .water {
  background: linear-gradient(180deg, var(--water-top) 0%, var(--water) 26%, var(--water-deep) 100%) !important;
}

.city-stage.city-day .water::before,
[data-time="day"] .water::before {
  background: linear-gradient(90deg, transparent 4%, rgba(255, 255, 255, 0.7) 50%, transparent 96%) !important;
}

html,
body.city-preview {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #02040c;
  color: #dbe7f5;
  font-family: "Heebo", system-ui, sans-serif;
}

.city-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 46%,
    var(--sky-horizon) 72%,
    #0c1626 80%,
    var(--water) 81%,
    #02040a 100%
  );
  transition: transform 1.5s cubic-bezier(0.33, 1, 0.68, 1),
    filter 1.5s ease;
  transform-origin: 50% 62%;
  will-change: transform, filter;
}

/* Stars */
.city-stars {
  position: absolute;
  inset: 0 0 38% 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 8% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 16% 8%, #dbeafe, transparent),
    radial-gradient(1px 1px at 24% 28%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 33% 12%, #fff, transparent),
    radial-gradient(1px 1px at 41% 22%, #bfdbfe, transparent),
    radial-gradient(1.5px 1.5px at 52% 6%, #fff, transparent),
    radial-gradient(1px 1px at 61% 19%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 72% 11%, #e0f2fe, transparent),
    radial-gradient(1px 1px at 81% 26%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 89% 9%, #fff, transparent),
    radial-gradient(1px 1px at 94% 21%, #bfdbfe, transparent),
    radial-gradient(1px 1px at 12% 36%, #fff, transparent),
    radial-gradient(1px 1px at 68% 33%, #fff, transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

.city-moon {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, #f8fafc 0%, #cbd5e1 46%, #94a3b8 100%);
  box-shadow:
    0 0 40px 12px rgba(226, 232, 240, 0.28),
    0 0 120px 40px rgba(148, 163, 184, 0.18);
}

.city-moon::after {
  content: "";
  position: absolute;
  inset: 18% 22% auto auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(100, 116, 139, 0.35);
}

.horizon-glow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(44vh * 2.5263), 85vw);
  bottom: 33.7%;
  height: 16%;
  background: radial-gradient(ellipse at 50% 100%, rgba(246, 196, 83, 0.18), rgba(56, 189, 248, 0.06) 50%, transparent 75%);
  pointer-events: none;
}

/* Buildings & Skyline — centered in the middle of the screen with balanced breathing room.
   Width derives from viewport HEIGHT (44vh) with a fixed aspect ratio, so the whole
   scene keeps identical proportions on every screen (16:9, ultra-wide, tall) instead
   of being stretched vertically on taller monitors. */
.skyline {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(calc(44vh * 2.9053), 88vw);
  aspect-ratio: 1380 / 475;
  height: auto;
  bottom: 33.7%;
  pointer-events: none;
  overflow: visible;
}

.skyline svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.skyline-far { opacity: 0.5; transform: scaleY(0.72); transform-origin: bottom; }
.skyline-mid { opacity: 0.95; }
.skyline-near { z-index: 3; }

.window-warm { fill: var(--window); }
.window-dim { fill: var(--window-dim); }
.window-cool { fill: var(--window-cool); }

/* Window lights — lit by default; js/city-lights.js drives each one
   independently: every light snaps off/on on its own random schedule
   (no fade, no synced groups). */
.blink-a,
.blink-b,
.blink-c {
  animation: none;
}

/* Aircraft-warning beacons on the spires keep their fast, crisp blink. */
circle[fill="#ff3b30"] {
  animation-name: beaconBlink;
  animation-duration: 1.8s;
  animation-timing-function: steps(1, end);
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

@keyframes beaconBlink {
  0%, 60% { opacity: 1; }
  61%, 76% { opacity: 0.1; }
  77%, 100% { opacity: 1; }
}

/* Water + true inverted city reflection centered identically to the skyline */
.water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  z-index: 5;
  background: linear-gradient(180deg, #07101c 0%, var(--water) 26%, #02040a 100%);
  overflow: hidden;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.15) 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.15) 80%, transparent 100%);
}

.water::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 4;
  background: linear-gradient(90deg, transparent 4%, rgba(148, 163, 184, 0.45) 50%, transparent 96%);
}

.reflection {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(calc(44vh * 2.9053), 88vw);
  top: 0;
  height: 100%;
  opacity: 0.54;
  pointer-events: none;
  filter: blur(0.5px);
  overflow: visible;
  animation: waterReflectionSway 8s ease-in-out infinite alternate;
}

.reflection svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform: scaleY(0.85);
  transform-origin: top center;
}

@keyframes waterReflectionSway {
  0% {
    transform: scale(1, 1);
    opacity: 0.52;
  }
  50% {
    transform: scale(1.003, 0.994);
    opacity: 0.48;
  }
  100% {
    transform: scale(0.998, 1.004);
    opacity: 0.52;
  }
}

/* ==========================================================================
   Airplanes (rare night-flyers: both directions, random timing, real shape)
   Airplanes (rare night-flyers: both directions, random timing, real shape)
   Base shape faces LEFT:
   - Nose & forward headlight at the FRONT (left end, x = 0)
   - Wings sweep backwards from left to right
   - Vertical tail fin at the REAR (right end)
   - Red blinking beacon at the REAR (right end, x = 54px)
   - Contrail streams out the back to the RIGHT (behind the plane)
   ========================================================================== */
.plane {
  position: absolute;
  left: 0;
  width: 58px;
  height: 16px;
  z-index: 8;
  direction: ltr;
  pointer-events: none;
}

/* Westbound: flies left (scaleX(1) faces left -> nose-first leftward) */
.plane-west {
  animation: flyWest linear infinite;
}

/* Eastbound: flies right (scaleX(-1) mirrors to face right -> nose-first rightward) */
.plane-east {
  animation: flyEast linear infinite;
}

/* Fuselage - long rounded body */
.plane-fuselage {
  position: absolute;
  left: 3px;
  top: 6px;
  width: 52px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 55%, #64748b 100%);
  box-shadow: 0 0 6px rgba(226, 232, 240, 0.35);
}

/* Swept-back wings: leading edge forward (left), tips sweep back to right */
.plane-wings {
  position: absolute;
  left: 18px;
  top: 1px;
  width: 24px;
  height: 14px;
  background: linear-gradient(180deg, #475569, #1e293b);
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%, 0% 50%);
  border-radius: 1px;
  opacity: 0.92;
}

/* Tail fin: vertical stabilizer at the rear (right) */
.plane-tail {
  position: absolute;
  left: 49px;
  top: 1px;
  width: 7px;
  height: 8px;
  background: linear-gradient(180deg, #475569, #1e293b);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* Navigation & beacon lights */
.plane-glow {
  position: absolute;
  border-radius: 50%;
}

/* Forward nose headlight / atmospheric fog glow */
.plane-nose {
  left: 0px;
  top: 5px;
  width: 5px;
  height: 5px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.95), -6px 0 22px 8px rgba(255, 255, 255, 0.7);
}

/* Tail beacon: red blinking light at the tail of the plane */
.plane-tail-light {
  left: 54px;
  top: 5.5px;
  width: 4px;
  height: 4px;
  background: #ff4d4d;
  box-shadow: 0 0 10px 4px rgba(255, 77, 77, 0.95);
  animation: blinkRed 0.9s steps(1, end) infinite;
}

/* Westbound (flies right -> left): enters right, exits left */
@keyframes flyWest {
  0% {
    transform: translate3d(112vw, 0, 0) scaleX(1);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translate3d(-12vw, -24px, 0) scaleX(1);
    opacity: 0;
  }
}

/* Eastbound (flies left -> right): mirrored scaleX(-1) so nose points right */
@keyframes flyEast {
  0% {
    transform: translate3d(-12vw, 0, 0) scaleX(-1);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translate3d(112vw, -20px, 0) scaleX(-1);
    opacity: 0;
  }
}

@keyframes blinkRed {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}

/* ==========================================================================
   Boats Layer & Water Dynamics
   Base shape faces LEFT:
   - Pointed bow at the FRONT (left end)
   - Flat stern at the REAR (right end)
   - Forward green/red navigation light at the bow (left)
   - Water wake trails behind the stern to the RIGHT (behind the boat)
   ========================================================================== */
.boats-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
  direction: ltr;
}

.boat {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
}

.boat-far  { width: 20px; height: 4px; }
.boat-mid  { width: 38px; height: 7px; }
.boat-near { width: 64px; height: 11px; }

/* Westbound: sails right -> left (scaleX(1) faces left -> bow-first leftward) */
.boat-west {
  animation: sailWest linear infinite, boatBob 4.2s ease-in-out infinite alternate;
}

/* Eastbound: sails left -> right (scaleX(-1) mirrors to face right -> bow-first rightward) */
.boat-east {
  animation: sailEast linear infinite, boatBob 3.6s ease-in-out infinite alternate;
}

@keyframes sailWest {
  0% {
    transform: translate3d(var(--start-x), 0, 0) scaleX(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--end-x), 0, 0) scaleX(1);
    opacity: 0;
  }
}

@keyframes sailEast {
  0% {
    transform: translate3d(var(--start-x), 0, 0) scaleX(-1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--end-x), 0, 0) scaleX(-1);
    opacity: 0;
  }
}

@keyframes boatBob {
  0% { margin-top: 0px; }
  50% { margin-top: -2px; }
  100% { margin-top: 1px; }
}

/* Base Boat Structure: Pointed bow on the LEFT (0 50%), flat stern on the RIGHT */
.boat-hull {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #0f172a;
  border-top: 1px solid rgba(203, 213, 225, 0.7);
  clip-path: polygon(15% 12%, 0 50%, 15% 88%, 100% 88%, 100% 12%);
}

.boat-cabin {
  position: absolute;
  background: #050b14;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.boat-windows {
  position: absolute;
  display: flex;
  gap: 2px;
  z-index: 2;
}

.boat-windows span {
  background: #fde047;
  box-shadow: 0 0 6px rgba(253, 224, 71, 0.9);
  border-radius: 0.5px;
}

/* Navigation & Mast Lights */
.boat-light {
  position: absolute;
  border-radius: 50%;
  z-index: 3;
}

/* Navigation Lights: Green Starboard & Red Port side markers */
.boat-green {
  background: #10b981;
  box-shadow: 0 0 12px 5px rgba(16, 185, 129, 0.95);
}

.boat-red {
  background: #ef4444;
  box-shadow: 0 0 12px 5px rgba(239, 68, 68, 0.95);
}

.boat-mast {
  background: #ffffff;
  box-shadow: 0 0 14px 6px rgba(255, 255, 255, 1);
}

/* Water reflection shimmer under the boat */
.boat-reflection {
  position: absolute;
  background: linear-gradient(180deg, rgba(253, 224, 71, 0.7), transparent);
  filter: blur(2px);
}

/* Perspective Sizing - Far */
.boat-far .boat-cabin {
  left: 7px;
  top: -2px;
  width: 9px;
  height: 3px;
}
.boat-far .boat-mast {
  left: 9px;
  top: -5px;
  width: 2.5px;
  height: 2.5px;
}
.boat-far .boat-green {
  left: 5px;
  top: -1px;
  width: 2.5px;
  height: 2.5px;
}
.boat-far .boat-reflection {
  left: 3px;
  top: 4px;
  width: 14px;
  height: 8px;
  opacity: 0.5;
}

/* Perspective Sizing - Mid Distance */
.boat-mid .boat-cabin {
  left: 14px;
  top: -4px;
  width: 18px;
  height: 6px;
}
.boat-mid .boat-windows {
  left: 16px;
  top: -3px;
}
.boat-mid .boat-windows span {
  width: 3px;
  height: 3px;
}
.boat-mid .boat-mast {
  left: 18px;
  top: -10px;
  width: 3.5px;
  height: 3.5px;
}
.boat-mid .boat-red {
  left: 10px;
  top: -1.5px;
  width: 3.5px;
  height: 3.5px;
}
.boat-mid .boat-reflection {
  left: 4px;
  top: 7px;
  width: 28px;
  height: 14px;
  opacity: 0.6;
}

/* Perspective Sizing - Near Foreground */
.boat-near .boat-cabin {
  left: 22px;
  top: -7px;
  width: 32px;
  height: 9px;
}
.boat-near .boat-windows {
  left: 25px;
  top: -5px;
  gap: 4px;
}
.boat-near .boat-windows span {
  width: 4px;
  height: 5px;
}
.boat-near .boat-mast {
  left: 30px;
  top: -16px;
  width: 4px;
  height: 4px;
}
.boat-near .boat-green {
  left: 16px;
  top: -2px;
  width: 4px;
  height: 4px;
}
.boat-near .boat-reflection {
  left: 8px;
  top: 11px;
  width: 46px;
  height: 24px;
  opacity: 0.7;
}

/* Preview chrome — tiny, not a landing page */
.city-hud {
  position: absolute;
  z-index: 20;
  top: 18px;
  inset-inline-start: 18px;
  padding: 10px 14px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(2, 6, 16, 0.45);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.city-hud strong {
  display: block;
  font-size: 12px;
  color: #f6c453;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

@media (prefers-reduced-motion: reduce) {
  .city-stars,
  .blink-a,
  .blink-b,
  .blink-c,
  .car-right,
  .car-left,
  .plane,
  .plane.slow,
  .plane::after {
    animation: none !important;
  }
}