* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: black;
}

.menu-screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Long scrolling background */
.background-layer {
  position: absolute;
  inset: 0;

  background-image: url("images/background.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  z-index: 1;

  animation: none;
  background-position: center bottom;
}

/* Photo sky background overlay */
.sunset-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background-image: url("images/sky-background.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 1;
}

.sun-disc { display: none; }

@keyframes sunPulse {
  0%, 100% { opacity: 0.88; }
  50%      { opacity: 1; }
}

.cloud {
  position: absolute;
  left: 0;
  display: block;
  height: auto;
  will-change: transform;
  opacity: 1;
  filter: contrast(1.12) brightness(1.1);
}

/* cloud-1 and cloud-2 are shot on white, cloud-3 on black */
.cloud--photo-white {
  mix-blend-mode: normal;
}

.cloud--photo-black {
  mix-blend-mode: screen;
  opacity: 1;
}

.cloud--a { top: 5%;  width: 360px; animation: cloudDriftRight 75s linear infinite; }
.cloud--b { top: 14%; width: 280px; animation: cloudDriftRight 98s linear infinite; animation-delay: -30s; }
.cloud--c { top: 2%;  width: 430px; animation: cloudDriftLeft 120s linear infinite; }
.cloud--d { top: 19%; width: 250px; animation: cloudDriftRight 60s linear infinite; animation-delay: -18s; }
.cloud--e { top: 10%; width: 310px; animation: cloudDriftLeft 88s linear infinite; animation-delay: -45s; }

@keyframes cloudDriftRight {
  0%   { transform: translateX(-30vw); }
  100% { transform: translateX(130vw); }
}

@keyframes cloudDriftLeft {
  0%   { transform: translateX(130vw); }
  100% { transform: translateX(-30vw); }
}



/* Soft neutral vignette */
.dark-overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0) 45%);

  z-index: 3;
  pointer-events: none;
}

/* Living street scene: sits on top of the photo, under the dark overlay */
.street-scene {
  position: absolute;
  inset: 0;

  z-index: 2;
  pointer-events: none;

  opacity: 0;
  transition: opacity 0.8s ease;
}

.street-scene.active {
  opacity: 1;
  filter: brightness(1.02);
}

/* ================= Shared bits ================= */

.building,
.prop,
.vehicle,
.figure,
.skater {
  position: absolute;
}

.car-svg,
.ped-svg,
.skater-svg,
.prop-svg,
.building-svg {
  display: block;
  height: auto;
  overflow: visible;
}

/* ================= Distant downtown skyline ================= */

.skyline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: blur(0.4px);
}

.skyline-svg {
  position: absolute;
  bottom: 44%;
  left: 0;
  width: 100%;
  height: 34vh;
}

.sky-bld {
  fill: rgba(70, 58, 82, 0.55);
}

.sky-bld--haze {
  fill: rgba(120, 92, 110, 0.35);
}

.sky-win {
  fill: rgba(255, 200, 140, 0.55);
}

/* ================= Buildings: houses, apartments, shops ================= */

.buildings-row {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.building {
  left: var(--left);
  bottom: var(--bottom);
  transform: scale(var(--scale, 1));
  transform-origin: bottom center;
}

.house .photo-prop {
  width: auto;
  height: 365px;
  max-width: 380px;
  object-fit: contain;
}

.apartment .photo-prop {
  width: auto;
  height: 365px;
  max-width: 380px;
  object-fit: contain;
}

.shop .photo-prop {
  width: auto;
  height: 365px;
  max-width: 380px;
  object-fit: contain;
}

.bld-wall {
  fill: rgba(40, 32, 26, 0.55);
}

.bld-roof {
  fill: rgba(25, 18, 14, 0.65);
}

.bld-roofline {
  fill: rgba(20, 14, 11, 0.6);
}

.bld-chimney {
  fill: rgba(25, 18, 14, 0.6);
}

.bld-awning {
  fill: rgba(122, 31, 43, 0.55);
}

.bld-sign {
  fill: rgba(15, 11, 8, 0.5);
}

.bld-door {
  fill: rgba(15, 11, 8, 0.55);
}

.bld-window {
  fill: rgba(255, 210, 140, 0.85);
  filter:
    drop-shadow(0 0 5px rgba(255, 190, 110, 0.85))
    drop-shadow(0 0 12px rgba(255, 160, 80, 0.5));
  animation: windowFlicker 5s ease-in-out infinite;
}

.bld-window:nth-of-type(3n)  { animation-delay: 0.6s; }
.bld-window:nth-of-type(3n+1){ animation-delay: 1.4s; }
.bld-window:nth-of-type(3n+2){ animation-delay: 2.2s; }

@keyframes windowFlicker {
  0%, 100% { opacity: 0.88; }
  50%      { opacity: 1; }
}

.bld-door {
  filter: drop-shadow(0 0 10px rgba(255, 170, 90, 0.55));
}

/* Warm light pooling out from a doorway or window onto the ground */
.porch-glow {
  position: absolute;
  left: var(--left);
  bottom: var(--bottom);
  width: 90px;
  height: 40px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 195, 120, 0.38) 0%,
    rgba(255, 170, 95, 0.16) 55%,
    rgba(255, 170, 95, 0) 80%
  );
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: lampPulse 4s ease-in-out infinite;
}

/* Building color washes, layered gently over the base fill */
[data-paint="brick"] .bld-wall      { fill: rgba(122, 45, 38, 0.5); }
[data-paint="cream"] .bld-wall      { fill: rgba(205, 190, 155, 0.42); }
[data-paint="slate"] .bld-wall      { fill: rgba(70, 82, 92, 0.5); }
[data-paint="olive"] .bld-wall      { fill: rgba(96, 98, 60, 0.5); }
[data-paint="terracotta"] .bld-wall { fill: rgba(160, 90, 55, 0.5); }

/* ================= Grass strip + sidewalk (people live here, not on the road) ================= */

.grass-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 47%;
  height: 6%;

  background-color: #3c5424;
  background-image: url('images/grass.jpg');
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 220%;

  box-shadow: 0 2px 0 rgba(20, 30, 14, 0.35) inset;
}

.grass-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(40, 30, 20, 0.35),
    rgba(20, 15, 10, 0.15)
  );
  mix-blend-mode: multiply;
}

.sidewalk {
  position: absolute;
  left: 0;
  right: 0;
  top: 53%;
  height: 8%;

  background: linear-gradient(
    to bottom,
    rgba(176, 164, 142, 0.72),
    rgba(132, 122, 102, 0.78)
  );

  box-shadow: 0 3px 0 rgba(235, 224, 198, 0.32) inset;
}

.sidewalk::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(60, 54, 44, 0.28) 0 2px,
    transparent 2px 120px
  );
}

.curb {
  position: absolute;
  left: 0;
  right: 0;
  top: 61%;
  height: 3px;
  background: rgba(215, 205, 180, 0.4);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

/* ================= Road ================= */

.road {
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
  height: 38%;

  background: linear-gradient(
    to bottom,
    rgba(24, 23, 27, 0.92),
    rgba(14, 13, 16, 0.95)
  );

  box-shadow:
    0 -6px 0 rgba(90, 88, 82, 0.35),
    0 6px 14px rgba(0, 0, 0, 0.35);
}

.road-lane-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;

  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 220, 150, 0.7) 0 46px,
    transparent 46px 92px
  );
}

.road-lane-line--a {
  top: 34%;
}

.road-lane-line--b {
  top: 68%;
}

/* ================= Static background props ================= */

.prop {
  left: var(--left);
  bottom: var(--bottom);
  transform: scale(var(--scale, 1)) rotate(var(--rotate, 0deg));
  transform-origin: bottom center;
}

/* Shared look for every real-photo element dropped into the scene */
.photo-prop {
  display: block;
  height: auto;
  filter: saturate(1.08) brightness(0.94);
}

/* Product/AI shots that sit on a plain white background: multiply blend
   makes the white drop out so they sit into the scene instead of showing
   a box. Only used on the isolated cut-out style images. */
.photo-prop--cutout {
  mix-blend-mode: multiply;
  filter: saturate(1.05) contrast(1.05);
}

/* Photos that already have their own sky/ground (buildings, vending
   machines, bus stop) get a soft rounded edge + shadow instead, like a
   photo pasted into the scene. */
.photo-prop--framed {
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.36);
}

.lamp-post .prop-svg {
  width: 42px;
}

.lamp-pole {
  fill: rgba(18, 13, 9, 0.65);
}

.lamp-arm {
  fill: none;
  stroke: rgba(18, 13, 9, 0.65);
  stroke-width: 4;
  stroke-linecap: round;
}

.lamp-glow {
  fill: rgba(255, 205, 130, 0.9);
  filter:
    drop-shadow(0 0 6px rgba(255, 180, 90, 0.85))
    drop-shadow(0 0 16px rgba(255, 150, 60, 0.5));
  animation: lampPulse 3.4s ease-in-out infinite;
}

@keyframes lampPulse {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}

/* Cyclist rides across the sidewalk, turns around, and comes back. */
.bike-rider {
  position: absolute;
  left: 0;
  bottom: var(--bottom, 39%);
  width: var(--width, 132px);
  z-index: 14;
  will-change: transform;
  animation: cyclistAcrossAndBack var(--duration, 22s) linear infinite;
}

.bike-rider-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(1.05) contrast(1.05) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.32));
  pointer-events: none;
}

@keyframes cyclistAcrossAndBack {
  0% { transform: translateX(110vw) scaleX(-1); }
  48% { transform: translateX(-10vw) scaleX(-1); }
  50% { transform: translateX(-10vw) scaleX(1); }
  98% { transform: translateX(110vw) scaleX(1); }
  100% { transform: translateX(110vw) scaleX(-1); }
}

.hydrant .prop-svg {
  width: 22px;
}

.hydrant-body {
  fill: #8a2a24;
}

.hydrant-cap {
  fill: #6b1f1b;
}

.bench .prop-svg {
  width: 60px;
}

.bench-part {
  fill: rgba(30, 22, 16, 0.6);
}

.hoop .prop-svg {
  width: 54px;
}

.hoop-pole {
  fill: rgba(20, 15, 11, 0.65);
}

.hoop-backboard {
  fill: rgba(220, 210, 195, 0.35);
  stroke: rgba(20, 15, 11, 0.5);
  stroke-width: 1.5;
}

.hoop-rim {
  fill: none;
  stroke: rgba(220, 90, 40, 0.75);
  stroke-width: 2;
}

.trash-can .photo-prop {
  width: 30px;
}

.vending .photo-prop {
  width: 170px;
}

.bus-stop .photo-prop {
  width: 220px;
}

.dumpster .photo-prop {
  width: 120px;
}

.stop-sign .photo-prop {
  width: 28px;
}

.street-sign .photo-prop {
  width: 72px;
}

.scooter .photo-prop {
  width: 96px;
}

/* ================= Palm trees: layered trunk + filled fronds ================= */

.palm-tree .photo-prop {
  width: 150px;
}

.lamp-post .photo-prop {
  width: 34px;
}

.hydrant .photo-prop {
  width: 64px;
}

.bench .photo-prop {
  width: 78px;
}

.palm-trunk-fill {
  fill: #4a3420;
}

.palm-trunk-shade {
  fill: rgba(24, 16, 9, 0.4);
}

.palm-bark {
  fill: none;
  stroke: rgba(210, 175, 120, 0.35);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.frond-crown {
  transform-box: fill-box;
}

.palm-frond {
  fill: #33502a;
  transform-box: fill-box;
  transform-origin: 0px 0px;
  animation: frondSway 4.5s ease-in-out infinite;
}

.palm-frond-hi {
  fill: #587a3d;
  opacity: 0.75;
}

.palm-tree .frond-1  { animation-delay: 0s;    }
.palm-tree .frond-2  { animation-delay: 0.3s;  }
.palm-tree .frond-3  { animation-delay: 0.6s;  }
.palm-tree .frond-4  { animation-delay: 0.9s;  }
.palm-tree .frond-5  { animation-delay: 1.2s;  }
.palm-tree .frond-6  { animation-delay: 1.5s;  }
.palm-tree .frond-7  { animation-delay: 1.8s;  }
.palm-tree .frond-8  { animation-delay: 2.1s;  }

@keyframes frondSway {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}

/* ================= Bushes, shrubs, flower planters ================= */

.bush .photo-prop {
  width: 1px;
  mix-blend-mode: normal;
  opacity: 1;
  filter: none;
}

.planter .photo-prop {
  width: 78px;
}

/* ================= Carnival backdrop: far down the street, seen through the gaps ================= */

.carnival-backdrop {
  position: absolute;
  left: var(--left, 62%);
  bottom: var(--bottom, 51%);
  transform: scale(var(--scale, 1));
  transform-origin: bottom center;
  filter: blur(0.5px) saturate(1.1);
  opacity: 0.85;
  pointer-events: none;
}

.carnival-svg {
  width: 260px;
  display: block;
  overflow: visible;
}

.wheel-spoke {
  stroke: rgba(60, 30, 50, 0.6);
  stroke-width: 1.4;
}

.wheel-rim {
  fill: none;
  stroke: rgba(50, 24, 42, 0.7);
  stroke-width: 2.5;
}

.wheel-hub {
  fill: rgba(255, 210, 140, 0.85);
}

.wheel-bulb {
  fill: #ffd27a;
  filter:
    drop-shadow(0 0 3px rgba(255, 200, 110, 0.9))
    drop-shadow(0 0 7px rgba(255, 160, 70, 0.6));
  animation: carnivalTwinkle 1.8s ease-in-out infinite;
}

.wheel-bulb:nth-of-type(3n)   { animation-delay: 0.2s; fill: #ff9ecb; filter: drop-shadow(0 0 3px rgba(255, 140, 190, 0.9)) drop-shadow(0 0 7px rgba(255, 120, 170, 0.55)); }
.wheel-bulb:nth-of-type(3n+1) { animation-delay: 0.6s; }
.wheel-bulb:nth-of-type(3n+2) { animation-delay: 1s; fill: #8fd6ff; filter: drop-shadow(0 0 3px rgba(140, 210, 255, 0.9)) drop-shadow(0 0 7px rgba(120, 190, 255, 0.55)); }

@keyframes carnivalTwinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.ferris-wheel {
  animation: ferrisSpin 90s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes ferrisSpin {
  to { transform: rotate(360deg); }
}

.ferris-cabin {
  fill: rgba(30, 20, 30, 0.55);
}

.tent-fabric {
  fill: #8a2f3c;
}

.tent-fabric--alt {
  fill: #d9c9a8;
}

.tent-flag {
  fill: #f2a340;
}

.carnival-glow {
  position: absolute;
  left: var(--left, 62%);
  bottom: var(--bottom, 51%);
  width: 220px;
  height: 120px;
  transform: translate(-50%, 0) scale(var(--scale, 1));
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 170, 130, 0.22) 0%,
    rgba(255, 130, 160, 0.1) 55%,
    rgba(255, 130, 160, 0) 80%
  );
  filter: blur(4px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: lampPulse 5s ease-in-out infinite;
}

/* ================= Ambient energy: drifting light motes ================= */

.firefly {
  position: absolute;
  left: var(--left);
  bottom: var(--bottom, 20%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 205, 140, 0.85);
  filter: blur(0.4px) drop-shadow(0 0 4px rgba(255, 170, 90, 0.9));
  opacity: 0;
  pointer-events: none;
  animation: fireflyFloat var(--duration, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes fireflyFloat {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.9; }
  50%  { transform: translate(8px, -60px) scale(1); opacity: 0.7; }
  85%  { opacity: 0.5; }
  100% { transform: translate(-6px, -130px) scale(0.5); opacity: 0; }
}

/* ================= Graffiti tag ================= */

.graffiti {
  left: var(--left);
  bottom: var(--bottom);
  transform: scale(var(--scale, 1)) rotate(-2deg);
  transform-origin: bottom left;
}

.graffiti-svg {
  width: 170px;
}

.graffiti-text {
  font-family: "Marker Felt", "Segoe Print", "Comic Sans MS", cursive, sans-serif;
  font-size: 34px;
  font-weight: 800;
  fill: #8fd14f;
  stroke: #234d17;
  stroke-width: 2px;
  paint-order: stroke fill;
  letter-spacing: 1px;
}

.graffiti-drip {
  stroke: #8fd14f;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.75;
}

/* ================= Street light glow pools on the ground ================= */

.light-pool {
  position: absolute;
  left: var(--left);
  bottom: var(--bottom);
  width: 150px;
  height: 46px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));

  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 205, 130, 0.4) 0%,
    rgba(255, 180, 105, 0.18) 55%,
    rgba(255, 180, 105, 0) 80%
  );
  filter: blur(2px);
  mix-blend-mode: screen;

  animation: lampPulse 3.4s ease-in-out infinite;
}

.bike-wheel {
  fill: none;
  stroke: rgba(15, 11, 8, 0.6);
  stroke-width: 3;
}

.bike-frame {
  fill: none;
  stroke: rgba(15, 11, 8, 0.6);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ================= Cars: shared look ================= */

.vehicle {
  bottom: var(--bottom);
  width: var(--width, 150px);
  will-change: transform;
}

.vehicle.idle-parked {
  left: var(--left);
}

.vehicle.drive-right,
.vehicle.drive-left {
  left: 0;
}

.car-shadow {
  fill: rgba(0, 0, 0, 0.35);
  filter: blur(2px);
}

.car-lower {
  filter: drop-shadow(0 0 6px rgba(255, 150, 60, 0.25));
}

.wheel {
  fill: #0c0906;
}

.hub {
  fill: rgba(255, 200, 140, 0.55);
}

.car-window {
  fill: rgba(255, 214, 170, 0.65);
}

/* Paint jobs */
[data-paint="maroon"] .car-lower,   [data-paint="maroon"] .car-upper   { fill: #7a1f2b; }
[data-paint="charcoal"] .car-lower, [data-paint="charcoal"] .car-upper { fill: #1c1c22; }
[data-paint="mustard"] .car-lower,  [data-paint="mustard"] .car-upper  { fill: #c9a227; }
[data-paint="ivory"] .car-lower,    [data-paint="ivory"] .car-upper    { fill: #cfc7b8; }


.vehicle-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.38));
  pointer-events: none;
}

.vehicle-photo.flip-x {
  transform: scaleX(-1);
}

/* Continuous, one-way traffic loops: enters one side, exits the other, no bouncing */
.drive-right {
  animation: driveAcrossRight var(--duration, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.drive-left {
  animation: driveAcrossLeft var(--duration, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes driveAcrossRight {
  0%   { transform: translateX(-20vw); }
  100% { transform: translateX(120vw); }
}

@keyframes driveAcrossLeft {
  0%   { transform: translateX(120vw); }
  100% { transform: translateX(-20vw); }
}

/* ================= People: shared look ================= */

.figure {
  bottom: var(--bottom);
  width: 34px;
  will-change: transform;
}

.figure-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.32));
  pointer-events: none;
}

.photo-walker {
  width: var(--width, 50px);
}

.skater-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.32));
  pointer-events: none;
}

.ped-head,
.ped-body,
.ped-leg {
  fill: #140f0c;
}

.ped-leg.leg-a,
.ped-leg.leg-b {
  transform-box: fill-box;
  transform-origin: top center;
}

.leg-a { animation: legSwing 0.6s ease-in-out infinite; }
.leg-b { animation: legSwing 0.6s ease-in-out infinite reverse; }

@keyframes legSwing {
  0%, 100% { transform: rotate(18deg); }
  50%      { transform: rotate(-18deg); }
}

/* Continuous walk loops, same idea as traffic but slower and lighter */
.walk-right,
.walk-left {
  left: 0;
}

.walk-right {
  animation: walkAcrossRight var(--duration, 26s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.walk-left {
  animation: walkAcrossLeft var(--duration, 26s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes walkAcrossRight {
  0%   { transform: translateX(-6vw) scaleX(1) scale(var(--scale, 1)); }
  100% { transform: translateX(106vw) scaleX(1) scale(var(--scale, 1)); }
}

@keyframes walkAcrossLeft {
  0%   { transform: translateX(106vw) scaleX(-1) scale(var(--scale, 1)); }
  100% { transform: translateX(-6vw) scaleX(-1) scale(var(--scale, 1)); }
}

/* ================= Idle vignettes: people just hanging around ================= */

.figure--idle {
  left: var(--left);
  transform: scale(var(--scale, 1));
  animation: idleSway 3.6s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes idleSway {
  0%, 100% { transform: scale(var(--scale, 1)) translateY(0); }
  50%      { transform: scale(var(--scale, 1)) translateY(-2px); }
}

.leaner {
  transform-origin: bottom center;
  animation-name: leanSway;
  animation-duration: 4s;
}

@keyframes leanSway {
  0%, 100% { transform: scale(var(--scale, 1)) rotate(-8deg) translateY(0); }
  50%      { transform: scale(var(--scale, 1)) rotate(-8deg) translateY(-1.5px); }
}

.smoker {
  overflow: visible;
}

.smoke {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(238, 238, 232, 0.75);
  filter: blur(1.6px);
  opacity: 0;
  animation: smokeRise 3.2s ease-out infinite;
  pointer-events: none;
}

.smoke--a { animation-delay: 0s; }
.smoke--b { animation-delay: 1.1s; }
.smoke--c { animation-delay: 2.2s; }

@keyframes smokeRise {
  0%   { transform: translate(0, 0) scale(0.35); opacity: 0; }
  12%  { opacity: 0.75; }
  55%  { opacity: 0.42; }
  100% { transform: translate(14px, -42px) scale(1.55); opacity: 0; }
}

.talker--face {
  animation-name: idleSwayFlipped;
}

@keyframes idleSwayFlipped {
  0%, 100% { transform: scale(var(--scale, 1)) scaleX(-1) translateY(0); }
  50%      { transform: scale(var(--scale, 1)) scaleX(-1) translateY(-2px); }
}

.talk-head {
  transform-box: fill-box;
  transform-origin: center;
  animation: headNod 2.6s ease-in-out infinite alternate;
}

.talker .talk-head       { animation-delay: 0s; }
.talker--face .talk-head { animation-delay: 0.9s; }

@keyframes headNod {
  0%   { transform: rotate(-4deg); }
  100% { transform: rotate(4deg); }
}

/* ================= People walking their dogs ================= */

.dog-only {
  width: var(--width, 120px);
  position: relative;
}

.dog-only-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.28));
}

.dog-walker {
  width: 74px;
  position: relative;
}

.dog-walker .ped-svg {
  width: 100%;
}

.dog-photo {
  position: absolute;
  left: 60%;
  bottom: 6%;
  width: 36%;
  height: auto;
}

.dog-photo--cutout {
  mix-blend-mode: multiply;
}

.dog-photo--framed {
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.dog-body,
.dog-head,
.dog-leg {
  fill: #140f0c;
}

.leash {
  fill: none;
  stroke: #140f0c;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.dog-tail {
  fill: none;
  stroke: #140f0c;
  stroke-width: 1.4;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: right center;
  animation: tailWag 0.5s ease-in-out infinite alternate;
}

@keyframes tailWag {
  0%   { transform: rotate(-8deg); }
  100% { transform: rotate(10deg); }
}

.dog-leg {
  transform-box: fill-box;
  transform-origin: top center;
}

.dog-leg-a { animation: legSwing 0.45s ease-in-out infinite; }
.dog-leg-b { animation: legSwing 0.45s ease-in-out infinite reverse; }

/* ================= Skateboarder ================= */

.skater {
  bottom: var(--bottom);
  left: 0;
  width: 74px;
  will-change: transform;
}

.skate-crouch,
.skate-leg-back,
.skate-leg-front,
.skate-deck {
  fill: #140f0c;
}

.skate-wheel {
  fill: #0c0906;
  transform-box: fill-box;
  transform-origin: center;
  animation: wheelSpin 0.35s linear infinite;
}

@keyframes wheelSpin {
  to { transform: rotate(360deg); }
}

.skater-svg {
  animation: skateBob 0.5s ease-in-out infinite alternate;
}

@keyframes skateBob {
  0%   { transform: translateY(0) scale(var(--scale, 1)); }
  100% { transform: translateY(-2px) scale(var(--scale, 1)); }
}

.skate-right {
  animation: skateAcrossRight var(--duration, 10s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes skateAcrossRight {
  0%   { transform: translateX(-8vw) scaleX(1); }
  100% { transform: translateX(108vw) scaleX(1); }
}

/* Respect reduced motion preferences: keep the scene, drop all the looping motion */
@media (prefers-reduced-motion: reduce) {
  .vehicle,
  .figure,
  .skater,
  .bike-rider,
  .skater-svg,
  .leg-a,
  .leg-b,
  .dog-leg-a,
  .dog-leg-b,
  .dog-tail,
  .smoke,
  .lamp-glow,
  .talk-head {
    animation: none !important;
  }
}

/* Left taskbar container */
.side-menu {
  position: absolute;
  top: 0;
  left: 0;

  width: min(430px, 42vw);
  height: 100vh;

  z-index: 4;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 35px 28px 35px;

  transform: translateX(-110%);
  opacity: 0;

  pointer-events: none;
  overflow: visible;

  background-image: url("images/notebook_paper.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Transparent blur ONLY on the right edge of the taskbar */
.side-menu::after {
  content: "";
  position: absolute;
  top: 0;
  right: -24px;

  width: 48px;
  height: 100%;

  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 35%,
    rgba(0, 0, 0, 0)
  );

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 35%,
    rgba(0, 0, 0, 0)
  );

  z-index: 4;
  pointer-events: none;
}

/* Lace image underneath taskbar */
.lace-underlay {
  position: absolute;
  top: 0;
  right: -490px;

  width: auto;
  height: 100%;

  z-index: 1;
  pointer-events: none;
}

/* Taskbar image above lace */
.taskbar-image {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  z-index: 2;
  pointer-events: none;
}

/* Keep title and buttons above both lace and taskbar */
.game-title,
.button-area {
  position: relative;
  z-index: 3;
}

/* Added by JavaScript after background finishes scrolling */
.side-menu.show {
  animation: slideMenuInFromLeft 0.9s ease forwards;
  pointer-events: auto;
}

/* Bigger title */
.game-title {
  width: min(400px, 95%);
  margin-bottom: 38px;

  opacity: 0;
  transform: translateY(-35px);
}

/* Title drops down */
.side-menu.show .game-title {
  animation: titleDropIn 0.8s ease forwards;
  animation-delay: 0.45s;
}

/* Button wrapper */
.button-area {
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}

/* Smaller buttons */
.menu-button {
  border: none;
  background: transparent;
  padding: 0;

  width: min(300px, 78%);
  height: 92px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  opacity: 0;
  transform: translateY(-30px);

  pointer-events: auto;
}

.menu-button img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

/* Pink shadow/glow on hover */
.menu-button:hover img {
  transform: scale(1.06);

  filter:
    drop-shadow(0 0 8px rgba(255, 105, 180, 0.9))
    drop-shadow(0 0 18px rgba(255, 105, 180, 0.7))
    drop-shadow(0 0 30px rgba(255, 105, 180, 0.45));
}

.menu-button:active img {
  transform: scale(0.97);

  filter:
    drop-shadow(0 0 6px rgba(255, 105, 180, 0.8))
    drop-shadow(0 0 14px rgba(255, 105, 180, 0.55));
}

/* Buttons drop down one by one */
.side-menu.show .menu-button:nth-child(1) {
  animation: buttonDropIn 0.55s ease forwards;
  animation-delay: 1.1s;
}

.side-menu.show .menu-button:nth-child(2) {
  animation: buttonDropIn 0.55s ease forwards;
  animation-delay: 1.3s;
}

.side-menu.show .menu-button:nth-child(3) {
  animation: buttonDropIn 0.55s ease forwards;
  animation-delay: 1.5s;
}

.side-menu.show .menu-button:nth-child(4) {
  animation: buttonDropIn 0.55s ease forwards;
  animation-delay: 1.7s;
}

.side-menu.show .menu-button:nth-child(5) {
  animation: buttonDropIn 0.55s ease forwards;
  animation-delay: 1.9s;
}

/* Start-page loading screen */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(210, 165, 116, 0.32), transparent 34%),
    linear-gradient(145deg, #2f1d14 0%, #5d3927 45%, #9a6845 100%);
  transition: opacity 0.18s ease;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: translateY(-2vh);
}

.loading-star-wrap {
  position: relative;
  width: 92px;
  height: 86px;
}

.loading-star {
  position: absolute;
  left: 50%;
  top: 0;
  width: 72px;
  height: 68px;
  background: #fff;
  clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 56%, 79% 94%, 50% 72%, 21% 94%, 32% 56%, 2% 35%, 39% 34%);
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.28));
  animation: codedStarBounce 1.35s cubic-bezier(.45,.05,.55,.95) infinite;
}

.loading-star-shadow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62px;
  height: 11px;
  border-radius: 50%;
  background: rgba(35, 17, 9, 0.42);
  filter: blur(1px);
  transform: translateX(-50%);
  animation: codedShadowPulse 1.35s ease-in-out infinite;
}

.loading-label {
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.loading-dots::after {
  content: "";
  display: inline-block;
  width: 1.3em;
  text-align: left;
  animation: codedLoadingDots 1.2s steps(4, end) infinite;
}

@keyframes codedStarBounce {
  0% {
    transform: translateX(-50%) translateY(9px) scale(0.92) rotate(0deg);
  }
  25% {
    transform: translateX(-50%) translateY(-13px) scale(1.04) rotate(90deg);
  }
  50% {
    transform: translateX(-50%) translateY(5px) scale(0.96) rotate(180deg);
  }
  75% {
    transform: translateX(-50%) translateY(-13px) scale(1.04) rotate(270deg);
  }
  100% {
    transform: translateX(-50%) translateY(9px) scale(0.92) rotate(360deg);
  }
}

@keyframes codedShadowPulse {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.42; }
  50% { transform: translateX(-50%) scaleX(0.62); opacity: 0.2; }
}

@keyframes codedLoadingDots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}

.loading-screen.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Background scrolls from top to bottom */
@keyframes backgroundScrollDown {
  from {
    background-position: center top;
  }

  to {
    background-position: center bottom;
  }
}

/* Menu slides in from left */
@keyframes slideMenuInFromLeft {
  from {
    transform: translateX(-110%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Title comes down */
@keyframes titleDropIn {
  from {
    opacity: 0;
    transform: translateY(-35px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Buttons come down */
@keyframes buttonDropIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Mobile version */
@media (max-width: 700px) {
  .side-menu {
    width: 100vw;
    padding: 35px 24px;
  }

  .game-title {
    width: min(420px, 90vw);
  }

  .menu-button {
    width: min(280px, 70vw);
    height: 78px;
  }

  .car {
    transform-origin: left top;
  }

  .vehicle {
    width: calc(var(--width, 150px) * 0.72);
  }

  .figure {
    width: 24px;
  }

  .dog-walker {
    width: 52px;
  }

  .building.house .building-svg {
    width: 100px;
  }

  .building.apartment .building-svg {
    width: 74px;
  }

  .building.shop .building-svg {
    width: 108px;
  }
}

/* Shared-background mode used behind all secondary pages. */
.background-only-mode .side-menu,
.background-only-mode .loading-screen {
  display: none !important;
}

.background-only-mode .background-layer {
  animation: none !important;
  background-position: center bottom;
}

.background-only-mode .street-scene {
  opacity: 1;
  filter: saturate(1.12) brightness(1.03);
}


/* Legacy text-button styling, kept in case a future button falls back to text. */
.menu-button--text {
  min-height: 58px;
  display: grid;
  place-items: center;
  color: #fff4df;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 0 rgba(62, 25, 35, .9), 0 0 10px rgba(255, 150, 190, .55);
}
.menu-button--text span {
  display: block;
  padding: 10px 24px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(132, 52, 75, .92), rgba(70, 24, 48, .96));
  border: 2px solid rgba(255, 220, 190, .72);
  box-shadow: inset 0 0 0 2px rgba(40, 10, 25, .4), 0 8px 18px rgba(0,0,0,.28);
}
.menu-button--text:hover span {
  transform: scale(1.04);
  filter: drop-shadow(0 0 10px rgba(255, 105, 180, .8));
}

/* Exit button on the main index page: same size as the other buttons, sits last in the list. */
.exit-button {
  position: relative;
  top: auto;
  left: auto;
  z-index: 3;
}

/* Locked checkpoint button: visible in the menu but unavailable for now. */
.checkpoint-button {
  position: relative;
  cursor: not-allowed;
}

.checkpoint-button img {
  opacity: 0.58;
  filter: grayscale(0.6);
}

.checkpoint-button:hover img,
.checkpoint-button:active img {
  transform: none;
  filter: grayscale(0.6);
}

.lock-badge {
  position: absolute;
  top: -6px;
  right: 6px;
  font-size: 20px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}


.smoker-female .smoke {
  left: 28px;
  top: 26px;
}

.smoker-male .smoke {
  left: 22px;
  top: 12px;
}

.smoker-female .smoke--b,
.smoker-male .smoke--b {
  left: calc(var(--smoke-left, 0px) + 4px);
}

.smoker-female .smoke--a { left: 47px; top: 46px; }
.smoker-female .smoke--b { left: 52px; top: 40px; }
.smoker-female .smoke--c { left: 44px; top: 36px; }
.smoker-male .smoke--a { left: 66px; top: 38px; }
.smoker-male .smoke--b { left: 74px; top: 30px; }
.smoker-male .smoke--c { left: 60px; top: 24px; }


/* Layering adjustments */
.prop, .vehicle, .figure, .skater, .building { z-index: 5; }
.bus-stop, .vending { z-index: 6; }
.vending-shop-backdrop { z-index: 4; }
.foreground-prop, .hydrant, .bench, .scooter, .bike-rider, .trash-can, .street-sign { z-index: 14; }
.top-foreground, .planter, .stop-sign { z-index: 24; }
.lamp-post, .light-pool { z-index: 30; }

.vending-shop-backdrop .photo-prop { width: 110px; }


/* ===== No filters, hues, tinting, or blend effects ===== */
*,
*::before,
*::after {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}

.sunset-sky {
  opacity: 1 !important;
}

.dark-overlay {
  background: transparent !important;
  opacity: 0 !important;
}

.street-scene,
.street-scene.active,
.background-layer,
.photo-prop,
.photo-prop--cutout,
.photo-prop--framed,
.vehicle-photo,
.figure-photo,
.dog-only-photo,
.skater-photo,
.cloud,
.cloud--photo-white,
.cloud--photo-black {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1;
}


/* Update: keep only the drawn sidewalk/road elements; hide all other decorative drawn overlays */
.skyline, .carnival-glow, .carnival-backdrop, .graffiti, .hoop, .firefly, .light-pool, .dark-overlay { display: none !important; }
/* Smaller bushes */
.bush { transform: scale(calc(var(--scale, 1) * 0.75)) rotate(var(--rotate, 0deg)); }


/* Restored hedge bushes in front of the houses/buildings */
.hedge-return .photo-prop { width: 120px; mix-blend-mode: multiply; filter: saturate(1.05) contrast(1.02); }
.hedge-return { z-index: 6; }

/* Force the uploaded palm trees to be clearly visible above buildings and hedges */
.visible-tree {
  z-index: 12 !important;
  transform-origin: bottom center;
}

.visible-tree .photo-prop {
  display: block !important;
  width: 170px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.hedge-return {
  z-index: 10 !important;
}


/* User-requested palm trees: always visible, overlaid on top of everything, and kept off the sidewalk */
.overlay-tree {
  z-index: 120 !important;
}

.overlay-tree .photo-prop {
  display: block !important;
  width: 185px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.28)) !important;
}


/* Restored hedge bushes */
.bush {
  z-index: 40 !important;
}
.bush .photo-prop {
  width: 135px !important;
  height: auto !important;
  mix-blend-mode: multiply !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: saturate(1.02) contrast(1.02) !important;
}


/* Keep bushes visible at the base of the palm trees */
.bush { z-index: 110 !important; }
.bush .photo-prop { width: 140px !important; }


/* Make the many house-front hedges bigger and ensure they overlay in front of the palm trees */
.bush { z-index: 160 !important; }
.bush .photo-prop { width: 165px !important; }


/* Remove the green drawn grass strip */
.grass-strip { background: transparent !important; background-image: none !important; box-shadow: none !important; }
.grass-strip::before { display: none !important; }


/* Restore the grass image while removing the flat green grass drawing */
.grass-strip {
  background-color: transparent !important;
  background-image: url("images/grass.jpg") !important;
  background-repeat: repeat-x !important;
  background-position: bottom center !important;
  background-size: auto 220% !important;
  box-shadow: 0 2px 0 rgba(20, 30, 14, 0.35) inset !important;
}
.grass-strip::before {
  content: none !important;
  display: none !important;
}


/* Keep hedges on the grass area instead of the sidewalk */
.bush { z-index: 160 !important; }


/* Put trees and bushes underneath foreground props, but still above the houses/background/grass/sidewalk */
.overlay-tree { z-index: 5 !important; }
.bush { z-index: 5 !important; }


/* Extra clouds for a fuller sky */
.cloud--f { top: 7%;  width: 240px; animation: cloudDriftLeft 72s linear infinite; animation-delay: -12s; }
.cloud--g { top: 22%; width: 300px; animation: cloudDriftRight 86s linear infinite; animation-delay: -38s; }
.cloud--h { top: 12%; width: 390px; animation: cloudDriftLeft 110s linear infinite; animation-delay: -55s; }
.cloud--i { top: 1%;  width: 260px; animation: cloudDriftRight 95s linear infinite; animation-delay: -22s; }
.cloud--j { top: 17%; width: 340px; animation: cloudDriftLeft 78s linear infinite; animation-delay: -30s; }
.cloud--k { top: 26%; width: 280px; animation: cloudDriftRight 102s linear infinite; animation-delay: -64s; }


/* Put all people on top of most scene elements, while keeping flowers, stop signs, lamp posts, scooter, and hydrant above them */
.figure,
.photo-walker,
.figure--idle,
.dog-only,
.bike {
  z-index: 18 !important;
}

/* Keep these specific items above the people */
.planter,
.stop-sign,
.lamp-post,
.scooter,
.hydrant {
  z-index: 24 !important;
}

/* Street sign should sit below the people */
.street-sign {
  z-index: 12 !important;
}


/* Remove shadows behind all placed images */
.photo-prop,
.photo-prop--cutout,
.photo-prop--framed,
.vehicle-photo,
.figure-photo,
.dog-only-photo,
.skater-photo,
.cloud,
.cloud--photo-white,
.cloud--photo-black,
.menu-button img,
.taskbar-image,
.lace-underlay {
  box-shadow: none !important;
  filter: none !important;
}

.overlay-tree .photo-prop,
.bush .photo-prop,
.figure-photo,
.vehicle-photo,
.dog-only-photo,
.skater-photo {
  box-shadow: none !important;
  filter: none !important;
}


/* Keep dumpster above the nearby bush, and place the user bike in front of the dumpster */
.dumpster {
  z-index: 170 !important;
}
.bike-front {
  z-index: 180 !important;
}
.bike-front .photo-prop {
  width: 180px !important;
  height: auto !important;
}


/* Make the added parked bike clearly visible in front of the dumpster */
.bike-front {
  z-index: 220 !important;
}
.bike-front .photo-prop {
  width: 235px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* Make the added bike overlay on top of the dumpster and appear larger */
.bike-front {
  z-index: 260 !important;
}
.bike-front .photo-prop {
  width: 285px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.dumpster {
  z-index: 170 !important;
}


/* Put flower-urn planters underneath all people */
.urn-planter {
  z-index: 8 !important;
}


/* Requested layering fixes */
/* Dumpster should be underneath all people */
.dumpster {
  z-index: 12 !important;
}

/* Lampposts should overlay on top of everything */
.lamp-post,
.light-pool {
  z-index: 320 !important;
}

/* Make sure vending machines stay above nearby hedge bushes */
.vending,
.vending-shop-backdrop {
  z-index: 12 !important;
}

/* Keep hedge bushes under the vending machines */
.bush {
  z-index: 5 !important;
}


/* Make the parked user bike clearly visible above the dumpster */
.bike-front {
  z-index: 500 !important;
}
.bike-front .photo-prop {
  width: 360px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}


/* Ensure all people and the moving biker overlay the bus stop */
.figure,
.photo-walker,
.figure--idle,
.dog-only,
.bike-rider {
  z-index: 40 !important;
}

.bus-stop {
  z-index: 12 !important;
}


/* Final bike visibility fix: place it outside the left menu area and remove the white JPEG background */
.bike-front {
  z-index: 500 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.bike-front .photo-prop {
  display: block !important;
  width: 250px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: multiply !important;
  filter: none !important;
}


/* Keep all flower-pot-2.jpg planters above every other scene element */
.flower-pot-overlay {
  z-index: 1000 !important;
}
.flower-pot-overlay .photo-prop {
  position: relative;
  z-index: 1000 !important;
}

/* Keep the pink scooter above every other scene element */
.scooter {
  z-index: 1000 !important;
}


/* ===== Bike parked in front of the dumpster ===== */
/* Transparent PNG now, so no multiply knock-out is needed. Sits above the
   dumpster but still behind the people walking the sidewalk. */
.bike-front {
  z-index: 16 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.bike-front .photo-prop {
  display: block !important;
  width: 150px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  box-shadow: none !important;
}

/* ===== Dogs on the sidewalk ===== */
.dog-only-photo {
  mix-blend-mode: normal !important;
  filter: none !important;
  box-shadow: none !important;
  transform-origin: 50% 92%;
  animation: dogTrot 0.42s ease-in-out infinite;
  /* negative delay staggers each dog's stride so they aren't in lockstep */
  animation-delay: calc(var(--delay, 0s) * -0.13);
}

@keyframes dogTrot {
  0%, 100% { transform: translateY(0)    rotate(-0.7deg); }
  50%      { transform: translateY(-2px) rotate(0.7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dog-only-photo { animation: none; }
}


/* ==================================================================
   Sky: clouds are pinned to a clipped band at the top
   ================================================================== */
/* .sunset-sky is inset:0, so a cloud at top:26% that was 280px tall hung
   well down into the buildings. The band is a hard ceiling: nothing inside
   it can ever paint below 32vh. */
.cloud-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30vh;
  overflow: hidden;
  pointer-events: none;
}

/* Cap cloud size so tall/short viewports don't push them past the band edge.
   These are replaced elements with height:auto, so a max-width/max-height cap
   rescales them proportionally rather than squashing them. Worst case is
   top 36% of 30vh (10.8vh) + 17vh tall = 27.8vh, comfortably inside the band. */
.cloud-band .cloud {
  max-width: 24vw;
  max-height: 17vh;
}

/* Re-spread the clouds inside the band (top % is now relative to the band) */
.cloud--a { top: 2%; }
.cloud--b { top: 26%; }
.cloud--c { top: 0%; }
.cloud--d { top: 34%; }
.cloud--e { top: 14%; }
.cloud--f { top: 8%; }
.cloud--g { top: 30%; }
.cloud--h { top: 20%; }
.cloud--i { top: 4%; }
.cloud--j { top: 24%; }
.cloud--k { top: 36%; }


/* ==================================================================
   Motion fixes: nothing freezes, nothing stacks up
   ================================================================== */

/* Positive animation-delay holds an element on keyframe 0% until the delay
   elapses, so wide items sat half-visible and frozen at the screen edge and
   the street started out empty. Negative delays start each loop already in
   progress: the scene is full and moving on the very first frame. */
.drive-right,
.drive-left,
.walk-right,
.walk-left,
.skate-right,
.figure--idle {
  animation-delay: calc(var(--delay, 0s) * -1);
}

/* Traffic sits on the road, which is the closest band to the viewer, so it
   draws over the sidewalk crowd behind it. */
.vehicle {
  z-index: 60 !important;
}

.ice-cream-truck .vehicle-photo {
  mix-blend-mode: normal !important;
  filter: none !important;
  box-shadow: none !important;
}

/* THE BIG ONE: the earlier reduced-motion block set `animation: none` on
   .vehicle/.figure/.skater/.bike-rider. Those all sit at left:0 and rely on
   transform to place them, so killing the animation collapsed every car and
   pedestrian into a motionless pile at the left edge. Anyone with "reduce
   motion" on in their OS saw exactly that. Travel loops now stay running;
   only the twitchy secondary loops are dropped. */
@media (prefers-reduced-motion: reduce) {
  .drive-right { animation: driveAcrossRight var(--duration, 14s) linear infinite !important; }
  .drive-left  { animation: driveAcrossLeft  var(--duration, 14s) linear infinite !important; }
  .walk-right  { animation: walkAcrossRight  var(--duration, 26s) linear infinite !important; }
  .walk-left   { animation: walkAcrossLeft   var(--duration, 26s) linear infinite !important; }
  .skate-right { animation: skateAcrossRight var(--duration, 10s) linear infinite !important; }
  .bike-rider  { animation: cyclistAcrossAndBack var(--duration, 22s) linear infinite !important; }

  .drive-right,
  .drive-left,
  .walk-right,
  .walk-left,
  .skate-right {
    animation-delay: calc(var(--delay, 0s) * -1) !important;
  }

  /* Dedicated idle people stay put, as intended */
  .figure--idle,
  .skater-svg,
  .dog-only-photo,
  .smoke {
    animation: none !important;
  }
}

/* Small screens: `.figure { width: 24px }` in the 700px breakpoint was
   overriding the photo walkers and dogs, which size from --width, shrinking
   them to thumbnails mid-stride. */
@media (max-width: 700px) {
  .photo-walker { width: calc(var(--width, 50px) * 0.8) !important; }
  .dog-only     { width: calc(var(--width, 120px) * 0.8) !important; }
  .skater       { width: 72px; }
}


/* ==================================================================
   Three-lane traffic, layered by depth
   ================================================================== */
/* The road is bottom 0%-38%. Lane 1 sits nearest the viewer, so it paints
   over lane 2, which paints over lane 3. All three stay above the sidewalk
   crowd behind them. */
.lane-1 { z-index: 72 !important; }
.lane-2 { z-index: 68 !important; }
.lane-3 { z-index: 64 !important; }


/* ==================================================================
   Cyclist: direction flipped, and scaled down to match the pedestrians
   ================================================================== */
/* Same keyframe name as the original, declared later, so this replaces it.
   The scaleX values are swapped: the rider now faces the way it travels
   on both legs of the loop. */
@keyframes cyclistAcrossAndBack {
  0%   { transform: translateX(110vw) scaleX(1); }
  48%  { transform: translateX(-10vw) scaleX(1); }
  50%  { transform: translateX(-10vw) scaleX(-1); }
  98%  { transform: translateX(110vw) scaleX(-1); }
  100% { transform: translateX(110vw) scaleX(1); }
}


/* ==================================================================
   Running kids ride above the sidewalk clutter
   ================================================================== */
/* Above the dumpster (12), vending machines (12), benches (14), the parked
   bike (16) and the pedestrians (40) - but still below the traffic lanes,
   since the road is closer to the viewer than the sidewalk. */
.skater {
  z-index: 45 !important;
}


/* ==================================================================
   FIX: the dogs were never rendering
   ================================================================== */
/* `.figure` sets position:absolute (line ~134) but `.dog-only` re-set it to
   position:relative (line ~1054). Same specificity, later in the file, so
   relative won and every dog fell back into normal document flow. With all
   its siblings absolutely positioned, each dog stacked at the top of
   .street-scene and then `bottom: 40%` shoved it a further 40% UP the
   container - straight off the top of the scene, behind the sky.
   Absolute positioning restores `bottom`/`left` to meaning what the rest of
   the scene assumes they mean. */
.dog-only {
  position: absolute !important;
  bottom: var(--bottom);
  left: 0;
}


/* ==================================================================
   THREE ROWS - LOCKED
   ==================================================================
   This is the single source of truth for traffic geometry. Everything
   is !important and this block is last in the file, so no earlier rule
   in this 2200-line stylesheet can move a car out of its row.

   Road spans bottom 0%-38%. The painted lane markings land at bottom
   12.2% and 25.1%, giving three bands: 0-12.2, 12.2-25.1, 25.1-38.
   One row sits in each band. Row 1 is nearest the viewer so it paints
   over row 2, which paints over row 3.

   Rows 1 and 3 head right, row 2 heads left.
   ================================================================== */

.lane-1,
.lane-2,
.lane-3 {
  position: absolute !important;
  left: 0 !important;
  top: auto !important;
}

.lane-1 { bottom: 5%  !important; z-index: 72 !important; animation-duration: 16s !important; }
.lane-2 { bottom: 16% !important; z-index: 68 !important; animation-duration: 20s !important; }
.lane-3 { bottom: 27% !important; z-index: 64 !important; animation-duration: 26s !important; }

/* Even spacing within a row, expressed as a fraction of that row's own
   cycle. Two cars in a row are half a lap apart, three are a third of a
   lap apart, and the gap never changes because they share a duration -
   so cars in the same row cannot overlap, whatever the durations become
   later. The negative sign starts each car mid-loop, so the road is
   already full on the first frame instead of filling in. */
.lane-1 { animation-delay: calc(-16s * var(--slot, 0) / var(--slots, 1)) !important; }
.lane-2 { animation-delay: calc(-20s * var(--slot, 0) / var(--slots, 1)) !important; }
.lane-3 { animation-delay: calc(-26s * var(--slot, 0) / var(--slots, 1)) !important; }

/* Direction is fixed per row, so no row ever carries oncoming traffic */
.lane-1,
.lane-3 { animation-name: driveAcrossRight !important; }
.lane-2 { animation-name: driveAcrossLeft  !important; }

.lane-1,
.lane-2,
.lane-3 {
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  animation-fill-mode: none !important;
  width: var(--width, 200px) !important;
}

/* Keep the small-screen scale-down that the locked width would otherwise cancel */
@media (max-width: 700px) {
  .lane-1,
  .lane-2,
  .lane-3 { width: calc(var(--width, 200px) * 0.72) !important; }
}


/* ================= In-page destination viewer ================= */
.page-viewer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  background: #fff;
  overflow: hidden;
}

.page-viewer.is-open {
  display: block;
}

.page-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  opacity: 0;
}

.page-viewer.is-loaded .page-frame {
  opacity: 1;
}

.page-white-fade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #fff;
  opacity: 1;
  pointer-events: none;
}

.page-viewer.is-loaded .page-white-fade {
  animation: destinationFadeFromWhite 850ms ease-out forwards;
}

@keyframes destinationFadeFromWhite {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.page-back-button {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 5;
  display: none;
  width: 118px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28));
  transition: transform 150ms ease, filter 150ms ease;
}

.page-viewer.has-back-button .page-back-button {
  display: block;
}

.page-back-button img {
  display: block;
  width: 100%;
  height: auto;
}

.page-back-button:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 6px 11px rgba(0, 0, 0, 0.34));
}

.page-back-button:active {
  transform: scale(0.97);
}

@media (max-width: 700px) {
  .page-back-button {
    top: 12px;
    left: 12px;
    width: 92px;
  }
}