:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #16233a;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; }

.hero {
  position: relative;
  isolation: isolate;
  height: 75svh;
  min-height: 560px;
  overflow: hidden;
  background: #fff;
}

.hero-copy {
  position: absolute;
  z-index: 3;
  top: clamp(2.5rem, 7vh, 5rem);
  left: max(5vw, 1.5rem);
  right: 1rem;
  max-width: 44rem;
}

.hero-copy h1,
.hero-copy .eyebrow {
  font-family: "Arial Rounded MT Bold", "Arial Black", Arial, sans-serif;
  font-weight: 900;
}
.eyebrow {
  margin: 1.15rem 0 0 .2rem;
  color: #2566c1;
  font-size: clamp(.82rem, 1.15vw, 1.15rem);
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(3.2rem, 5.2vw, 6.5rem);
  font-style: italic;
  line-height: 1.12;
  letter-spacing: -.055em;
  color: #fff;
  -webkit-text-stroke: 2.5px #192334;
  paint-order: stroke fill;
  filter: drop-shadow(2px 0 0 #ffcf25) drop-shadow(-2px 0 0 #ffcf25) drop-shadow(0 2px 0 #ffcf25) drop-shadow(0 -2px 0 #ffcf25) drop-shadow(2px 4px 0 #d83c2c);
}
h1 span { color: #fff; white-space: nowrap; }

.scene {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  width: max(94%, 1100px);
  max-width: 1945px;
  transform: translateX(-50%);
  pointer-events: none;
}
.town { display: block; width: 100%; height: auto; }
.road-repair {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 13% 18% at 67% 85.5%, #000 0 85%, transparent 100%);
  mask-image: radial-gradient(ellipse 13% 18% at 67% 85.5%, #000 0 85%, transparent 100%);
  pointer-events: none;
}
.road-extension {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 53%, #000 70%), linear-gradient(to bottom, transparent 55%, #000 69%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 53%, #000 70%), linear-gradient(to bottom, transparent 55%, #000 69%);
  mask-composite: intersect;
  pointer-events: none;
}
.fountain-water {
  position: absolute;
  z-index: 1;
  left: 46.2725%;
  top: 44.1286%;
  width: 7.7121%;
  height: 15.3276%;
  pointer-events: none;
}
.red-car {
  position: absolute;
  z-index: 2;
  width: 12%;
  aspect-ratio: 1160 / 495;
  overflow: visible;
  pointer-events: none;
}
.red-car img {
  position: absolute;
  left: -56.03%;
  top: -61.62%;
  width: 167.67%;
  height: auto;
  max-width: none;
}
.red-car::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 4%;
  top: 80%;
  width: 90%;
  height: 19%;
  border-radius: 50%;
  background: rgba(25, 30, 35, .22);
  filter: blur(3px);
  transform: rotate(12deg);
}
.car-wheel {
  position: absolute;
  z-index: 1;
  width: 8.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #cbd1d5;
  overflow: hidden;
  background: #293137;
  box-shadow: inset 0 0 0 2px #262b30, 0 0 0 1px #262b30;
}
.car-wheel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, #cdd2d5 0 13%, #343b40 14% 20%, transparent 21%),
    repeating-conic-gradient(#d9dde0 0deg 11deg, #293137 12deg 71deg, #d9dde0 72deg);
  transform: rotate(var(--wheel-angle, 0deg));
}
.car-wheel-rear { left: 9.75%; top: 42.2%; }
.car-wheel-front { left: 50%; top: 62.2%; width: 9%; aspect-ratio: .8; }
.cafe-foreground,
.yellow-car-foreground,
.green-pickup-foreground,
.road-lamp-one,
.road-lamp-two,
.pickup-flowers-foreground,
.jeep-flowers-foreground,
.blue-jeep-foreground {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: url('assets/town.png') 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.cafe-foreground {
  z-index: 4;
  clip-path: polygon(17.5% 33%, 19% 29%, 29% 29%, 31.5% 36%, 31.5% 70%, 17.5% 70%);
}
.yellow-car-foreground {
  z-index: 5;
  clip-path: polygon(19% 65%, 23% 64%, 26% 67%, 27% 74%, 26% 77%, 20% 77%, 18.5% 73%);
}
.green-pickup-foreground {
  z-index: 5;
  clip-path: polygon(29% 61%, 35% 60%, 37% 64%, 38% 69%, 37% 73%, 29% 73%, 28% 68%);
}
.blue-jeep-foreground {
  z-index: 5;
  clip-path: polygon(35% 72%, 41% 71%, 45% 73%, 48% 78%, 49% 86%, 48% 92%, 46% 95%, 37% 95%, 34% 88%, 33.5% 78%);
}
.road-lamp-one {
  clip-path: polygon(38.1% 55%, 38.3% 56.1%, 38.9% 57%, 38.6% 59%, 38.35% 59.3%, 38.45% 66.8%, 38.8% 69%, 38.3% 69.6%, 37.5% 69%, 37.8% 66.8%, 37.95% 59.3%, 37.6% 59%, 37.3% 57%, 37.95% 56.1%);
}
.road-lamp-two {
  clip-path: polygon(44.5% 62.8%, 44.7% 63.8%, 45.3% 64.5%, 45% 66.8%, 44.7% 67.2%, 44.8% 74.8%, 45.1% 77%, 44.55% 77.5%, 44% 77%, 44.25% 74.8%, 44.35% 67.2%, 44% 66.8%, 43.7% 64.5%, 44.35% 63.8%);
}
.pickup-flowers-foreground {
  clip-path: polygon(38.438% 67.203%, 38.746% 66.213%, 38.746% 65.718%, 39.209% 65.594%, 39.363% 64.975%, 39.825% 65.347%, 40.185% 66.337%, 40.596% 65.965%, 41.059% 66.460%, 41.367% 68.069%, 42.343% 68.936%, 42.497% 70.421%, 41.470% 71.535%, 38.489% 69.926%);
}
.jeep-flowers-foreground {
  clip-path: polygon(45.170% 75.866%, 45.632% 74.134%, 45.838% 72.401%, 46.043% 70.792%, 46.454% 70.173%, 46.865% 71.163%, 47.020% 72.772%, 47.431% 74.381%, 47.842% 73.020%, 48.561% 72.277%, 49.229% 73.144%, 49.794% 74.010%, 50.411% 73.762%, 50.565% 71.782%, 50.874% 70.545%, 51.285% 71.535%, 51.439% 73.144%, 51.747% 75.619%, 52.261% 75.371%, 52.724% 74.752%, 53.443% 75.124%, 54.060% 75.743%, 54.779% 76.238%, 55.344% 77.847%, 55.653% 78.960%, 56.680% 79.455%, 57.091% 80.446%, 57.091% 82.426%, 56.321% 83.787%, 54.882% 84.777%, 45.272% 77.723%);
}
.patrol-foreground {
  position: absolute;
  z-index: 5;
  left: 68.602%;
  top: 43.936%;
  width: 7.297%;
  height: 10.767%;
  pointer-events: none;
}
.police-figure {
  visibility: hidden;
  position: absolute;
  z-index: 4;
  height: 10.2%;
  aspect-ratio: 2 / 3;
  transform: translateX(-50%);
  filter: drop-shadow(1px 2px 1px rgba(18, 29, 45, .25));
  pointer-events: none;
}
.police-figure img {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.blue-house-walker {
  position: absolute;
  z-index: 5;
  width: auto;
  height: 8.42%;
  aspect-ratio: 2 / 3;
  transform: translateX(-50%);
  filter: drop-shadow(1px 2px 2px rgba(18, 29, 45, .28));
  pointer-events: none;
}
.blue-house-foreground {
  position: absolute;
  z-index: 6;
  inset: 0;
  background: url('assets/town.png') 0 0 / 100% 100% no-repeat;
  clip-path: polygon(0 42%, 12% 42%, 16% 49%, 16% 79%, 14% 82%, 3% 83%, 0 80%);
  pointer-events: none;
}
.police-figure[data-view="front"][data-walking="true"] .police-front-walk,
.police-figure[data-view="back"][data-walking="true"] .police-back-walk,
.police-figure[data-view="front"][data-walking="false"] .police-front-still,
.police-figure[data-view="back"][data-walking="false"] .police-back-still { display: block; }
.hero[data-motion="paused"] .police-figure img { display: none !important; }
.hero[data-motion="paused"] .police-figure[data-view="front"] .police-front-still,
.hero[data-motion="paused"] .police-figure[data-view="back"] .police-back-still { display: block !important; }
@media (prefers-reduced-motion: reduce) {
  .police-figure img { display: none !important; }
  .police-figure[data-view="front"] .police-front-still,
  .police-figure[data-view="back"] .police-back-still { display: block !important; }
}
.police-station-interior, .police-station-door {
  position: absolute;
  left: 70.606%;
  top: 39.604%;
  width: 1.747%;
  height: 5.569%;
  pointer-events: none;
}
.police-station-interior {
  z-index: 2;
  background: linear-gradient(90deg, #634128, #b48147 40%, #c28b4f 54%, #66442c);
  box-shadow: inset 2px 0 2px rgba(36, 29, 25, .55), inset -2px 0 2px rgba(36, 29, 25, .55);
}
.police-station-door { z-index: 3; perspective: 220px; }
.police-station-door::after {
  content: '';
  position: absolute;
  inset: -2px -1px -1px;
  border: solid #245a9b;
  border-width: 2px 1px 1px;
  box-shadow: inset 0 0 1px #e1edf9;
  pointer-events: none;
}
.station-door-left, .station-door-right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-size: 100% 100%;
  backface-visibility: visible;
  box-shadow: 0 1px 2px rgba(14, 25, 42, .3);
}
.station-door-left {
  left: 0;
  background-image: url('assets/station-door-left.png');
  transform-origin: left center;
}
.station-door-right {
  right: 0;
  background-image: url('assets/station-door-right.png');
  transform-origin: right center;
}
.patrol-door {
  position: absolute;
  z-index: 7;
  left: 72.610%;
  top: 46.535%;
  width: 1.696%;
  height: 5.941%;
  pointer-events: none;
}
.patrol-door-panel {
  position: absolute;
  inset: 0;
  background: url('assets/patrol-door.png') center / 100% 100% no-repeat;
  clip-path: polygon(17% 0, 89% 0, 100% 13%, 100% 95%, 4% 100%, 0 36%);
  transform-origin: 14% 55%;
  will-change: transform;
  filter: drop-shadow(1px 1px 1px rgba(15, 24, 32, .28));
}
.patrol-beacon {
  position: absolute;
  z-index: 9;
  left: 72.35%;
  top: 44.06%;
  width: 2.35%;
  height: 1.36%;
  pointer-events: none;
}
.patrol-beacon span {
  position: absolute;
  top: 0;
  width: 48%;
  height: 100%;
  opacity: 0;
  border-radius: 45%;
  mix-blend-mode: screen;
}
.patrol-beacon .beacon-blue {
  left: -12%;
  width: 32%;
  background: radial-gradient(ellipse, #e5ffff 0 12%, #22aaff 34%, rgba(0, 91, 255, .75) 62%, transparent 78%);
  box-shadow: 0 0 3px .5px rgba(0, 106, 255, .8), 0 2px 3px rgba(0, 106, 255, .3);
}
.beacon-red {
  right: 0;
  background: radial-gradient(ellipse, #fff0e8 0 12%, #ff5050 34%, rgba(235, 0, 18, .75) 62%, transparent 78%);
  box-shadow: 0 0 5px 1px rgba(255, 20, 35, .8), 0 3px 6px rgba(255, 20, 35, .35);
}
.patrol-occupant {
  position: absolute;
  z-index: 8;
  left: 73.18%;
  top: 47.28%;
  width: .48%;
  height: 1.36%;
  border-radius: 45% 45% 35% 35%;
  background: linear-gradient(90deg, #c9921b, #ffdc3f 35%, #e8ad24);
  box-shadow: inset -1px 0 1px rgba(54,38,13,.35);
  opacity: 0;
  pointer-events: none;
}
.patrol-occupant::before {
  content: '';
  position: absolute;
  left: -8%;
  top: -35%;
  width: 115%;
  height: 40%;
  border-radius: 50% 50% 15% 15%;
  background: #143e7e;
  box-shadow: 1px 1px 0 #0d2b56;
}
.town-3d {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero[data-three-d="ready"] .character { display: none; }
.elon {
  position: absolute;
  z-index: 10;
  left: 63.5707%;
  bottom: -.3609%;
  width: 16.2%;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(8px 12px 10px rgba(29, 32, 45, .16));
}
.character {
  position: absolute;
  z-index: 2;
  height: 11%;
  aspect-ratio: 100 / 180;
  will-change: transform;
}
.character svg { display: block; width: 100%; height: 100%; overflow: visible; }
.character .leg,
.character .arm,
.character .torso-sway { transform-box: view-box; }
.character .leg--left { transform-origin: 41px 103px; }
.character .leg--right { transform-origin: 59px 103px; }
.character .arm--left { transform-origin: 26px 60px; }
.character .arm--right { transform-origin: 74px 60px; }
.character .torso-sway { transform-origin: 50px 102px; }
.character--walker {
  z-index: 4;
  left: 31%;
  bottom: 9%;
  height: 11.5%;
  animation: stroll 10s linear infinite;
}
.character--walker .leg--left { animation: stride-left .6s ease-in-out infinite alternate; }
.character--walker .leg--right { animation: stride-right .6s ease-in-out infinite alternate; }
.character--walker .arm--left { animation: swing-left .6s ease-in-out infinite alternate; }
.character--walker .arm--right { animation: swing-right .6s ease-in-out infinite alternate; }
.character--walker .torso-sway { animation: walk-bob .3s ease-in-out infinite alternate; }
.character--mechanic {
  left: 39.5%;
  bottom: 46.5%;
  height: 9%;
}
.character--mechanic .arm--right { animation: wrench-turn 1.7s ease-in-out infinite; }
.character--mechanic .torso-sway { animation: lean-work 1.7s ease-in-out infinite; }
.character--officer {
  left: 72%;
  bottom: 47%;
  height: 9%;
}
.character--officer .arm--right { animation: officer-wave 1.8s ease-in-out infinite; }
.character--officer .torso-sway { animation: officer-nod 1.8s ease-in-out infinite; }

@keyframes stroll {
  0% { transform: translate3d(0, 0, 0) scaleX(1); }
  45% { transform: translate3d(clamp(35px, 4vw, 65px), -3px, 0) scaleX(1); }
  50% { transform: translate3d(clamp(35px, 4vw, 65px), -3px, 0) scaleX(-1); }
  95% { transform: translate3d(0, 0, 0) scaleX(-1); }
  100% { transform: translate3d(0, 0, 0) scaleX(1); }
}
@keyframes stroll-mobile {
  0% { transform: translate3d(0, 0, 0) scaleX(-1); }
  45% { transform: translate3d(-58px, 0, 0) scaleX(-1); }
  50% { transform: translate3d(-58px, 0, 0) scaleX(1); }
  95%, 100% { transform: translate3d(0, 0, 0) scaleX(1); }
}
@keyframes stride-left { from { transform: rotate(-23deg); } to { transform: rotate(23deg); } }
@keyframes stride-right { from { transform: rotate(23deg); } to { transform: rotate(-23deg); } }
@keyframes swing-left { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }
@keyframes swing-right { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes walk-bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes wrench-turn {
  0%, 100% { transform: rotate(-20deg); }
  45% { transform: rotate(-63deg); }
  70% { transform: rotate(-38deg); }
}
@keyframes lean-work {
  0%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(6deg); }
}
@keyframes officer-wave {
  0%, 100% { transform: rotate(-45deg); }
  50% { transform: rotate(-95deg); }
}
@keyframes officer-nod { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2deg); } }
.hero[data-motion="paused"] .character,
.hero[data-motion="paused"] .character * { animation-play-state: paused !important; }

.motion-toggle {
  position: absolute;
  z-index: 5;
  top: 1.25rem;
  right: max(5vw, 1.5rem);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid #b8c4d4;
  border-radius: 999px;
  padding: .65rem .9rem;
  color: #163454;
  background: rgba(255,255,255,.92);
  box-shadow: 0 3px 12px rgba(25,42,69,.1);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.motion-toggle:hover, .motion-toggle:focus-visible { border-color: #2063bd; outline: 2px solid transparent; box-shadow: 0 0 0 3px rgba(32,99,189,.18); }
.motion-icon { font-size: .9rem; line-height: 1; }

.bio {
  border-top: 1px solid #ffcf00;
  padding: clamp(4rem, 8vw, 7rem) max(5vw, 1.5rem);
  background: #ffcf00;
  color: #16233a;
}
.bio-inner {
  display: grid;
  grid-template-columns: minmax(8rem, .6fr) minmax(0, 2fr);
  gap: 2rem;
  max-width: 1180px;
  margin: auto;
}
.bio-kicker {
  margin: .5rem 0 0;
  color: #16233a;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
h2 {
  max-width: 20ch;
  margin: 0 0 1.4rem;
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.055em;
}
.bio p:not(.bio-kicker) {
  max-width: 43ch;
  margin: 0;
  color: #16233a;
  font-size: clamp(1.1rem, 1.55vw, 1.4rem);
  line-height: 1.58;
}

@media (max-width: 700px) {
  .hero { min-height: 570px; }
  .hero-copy { top: 2rem; left: 1.25rem; right: 1.25rem; }
  .eyebrow { font-size: .72rem; margin-top: 1rem; }
  h1 { font-size: clamp(2.2rem, 8.7vw, 4.2rem); -webkit-text-stroke-width: 2px; }
  .scene { width: 800px; left: 50%; }
  .elon { left: 64.5707%; width: 20.5%; }
  .character--walker { left: 45%; bottom: 2%; animation-name: stroll-mobile; }
  .character--mechanic { left: 39%; }
  .motion-toggle { top: auto; right: auto; bottom: .8rem; left: 1rem; width: 2.75rem; height: 2.75rem; justify-content: center; padding: 0; font-size: .8rem; }
  .motion-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .bio-inner { grid-template-columns: 1fr; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .character, .character * { animation: none !important; will-change: auto; }
  .motion-toggle { display: none; }
}

.mechanic-layer { position: absolute; z-index: 4; left: 40%; bottom: 49.5%; height: 8.5%; aspect-ratio: 2 / 3; transform: translateX(-50%); filter: drop-shadow(2px 3px 2px rgba(26,32,43,.28)); }
.mechanic-still, .mechanic-animated { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mechanic-still { display: none; }
.hero[data-motion="paused"] .mechanic-animated { display: none; }
.hero[data-motion="paused"] .mechanic-still { display: block; }

@media (prefers-reduced-motion: reduce) {
  .mechanic-animated { display: none; }
  .mechanic-still { display: block; }
}

.police-figure canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.police-figure[data-stride="ready"] img { display: none !important; }
.yellow-shop-foreground {
  position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: url('assets/town.png') 0 0 / 100% 100% no-repeat;
  clip-path: polygon(75.180% 54.208%, 75.283% 51.361%, 76.310% 48.267%, 77.749% 45.173%, 78.983% 43.936%, 79.651% 43.069%, 80.832% 44.307%, 81.912% 46.287%, 83.094% 48.886%, 84.635% 51.609%, 85.714% 53.218%, 85.714% 79.208%, 74.666% 79.950%, 74.203% 66.213%, 75.128% 61.386%);
}

.hero[data-motion="paused"] .police-figure[data-stride="ready"] img { display: none !important; }

.patrol-plants-foreground {
 position:absolute; inset:0; z-index:9; pointer-events:none;
 background:url('assets/town.png') 0 0 / 100% 100% no-repeat;
 clip-path:polygon(70.298% 61.015%, 70.349% 58.168%, 70.966% 56.807%, 70.915% 55.198%, 71.788% 55.198%, 71.788% 53.465%, 72.610% 53.960%, 73.124% 52.723%, 73.895% 53.342%, 74.358% 54.455%, 75.026% 54.208%, 75.283% 56.188%, 74.820% 57.797%, 75.385% 59.406%, 74.872% 61.139%, 75.283% 63.119%, 74.563% 64.728%, 74.512% 70.916%, 73.998% 74.257%, 72.816% 74.752%, 72.610% 72.030%, 73.022% 68.069%, 72.765% 64.851%, 71.737% 64.109%, 70.966% 64.233%);
}
.patrol-door-interior {
 position:absolute; z-index:6; left:72.610%; top:46.535%; width:1.696%; height:5.941%;
 opacity:0; pointer-events:none;
 clip-path:polygon(7% 43%,96% 28%,96% 90%,7% 98%);
 background:#232b30;
 box-shadow:none;
}
.patrol-occupant {
 left:71.65%; top:46.7%; width:.85%; height:2.25%;
 border-radius:25%; transform:skewY(-8deg);
 background:linear-gradient(#59687544,#354b6155),url('assets/police-front-still.png') 50% 17% / 220% 490% no-repeat;
 box-shadow:none;
}
.patrol-occupant::before { display:none; }

.arm-plants-foreground {
 position:absolute; inset:0; z-index:9; pointer-events:none;
 background:url('assets/town.png') 0 0 / 100% 100% no-repeat;
 clip-path:polygon(66.444% 54.208%, 66.341% 53.094%, 66.701% 52.351%, 66.701% 51.485%, 67.061% 51.238%, 67.163% 50.124%, 67.575% 50.743%, 67.883% 50.248%, 68.037% 51.485%, 68.397% 51.733%, 68.499% 52.970%, 68.808% 53.465%, 68.499% 54.579%, 67.831% 55.074%, 67.061% 54.827%);
}

.church-kids { position:absolute; inset:0; width:100%; height:100%; z-index:6; pointer-events:none; }

.left-tree-repair {
 position:absolute; inset:0; z-index:6; pointer-events:none;
 background:url('assets/town-left-tree-removed.png') 0 0 / 100% 100% no-repeat;
 clip-path:polygon(12.8% 45.5%,18.3% 45.5%,18.3% 65%,17.5% 69%,15% 69%,14.8% 61%,12.8% 57%);
}

.left-road-cleanup {
 position:absolute; inset:0; z-index:6; pointer-events:none;
 background:url('assets/town-left-road-cleared.png') 0 0 / 100% 100% no-repeat;
 clip-path:polygon(14.95% 62.3%,19% 62.3%,19% 74%,14.95% 74%);
 mask-image:linear-gradient(to bottom,#000 0%,#000 70.5%,transparent 74%);
}

.yellow-parking-repair,.blue-parking-repair {position:absolute;inset:0;z-index:1;pointer-events:none;background:url('assets/traffic-road-cleared.png') 0 0 / 100% 100% no-repeat;}
.yellow-parking-repair {clip-path:inset(63.6% 72% 20% 18%); mask-image:linear-gradient(to right,transparent 18%,#000 18.7%,#000 27.3%,transparent 28%),linear-gradient(to bottom,transparent 63.6%,#000 64.5%,#000 78.5%,transparent 80%);mask-composite:intersect;}
.blue-parking-repair {clip-path:inset(69.5% 49% 0% 32.8%);mask-image:linear-gradient(to right,transparent 32.8%,#000 33.7%,#000 49.3%,transparent 51%),linear-gradient(to bottom,transparent 69.5%,#000 71%,#000 96.5%,transparent 100%);mask-composite:intersect;}
.traffic-car {position:absolute;z-index:2;aspect-ratio:3/2;pointer-events:none;visibility:hidden;}
.traffic-car img {display:block;width:100%;height:100%;}
.traffic-car::before {content:'';position:absolute;left:6%;top:78%;width:86%;height:18%;background:#1e26322e;border-radius:50%;filter:blur(3px);z-index:-1;transform:rotate(12deg);}
.traffic-wheel {position:absolute;border-radius:50%;overflow:hidden;transform:translate(-50%,-50%);background:#3a4043;}
.traffic-wheel::before {content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#303537 0 16%,transparent 18%),repeating-conic-gradient(#d2d7da 0deg 13deg,#353c40 14deg 60deg);border:1px solid #aeb8c1;transform:rotate(var(--wheel-angle));}
.blue-traffic .rear {left:9.1%;top:67.4%;width:6.8%;aspect-ratio:.65;}
.blue-traffic .front {left:48.5%;top:85.5%;width:8.5%;aspect-ratio:.70;}
.yellow-traffic .rear {left:8.6%;top:65.8%;width:6.6%;aspect-ratio:.60;}
.yellow-traffic .front {left:41.5%;top:82.6%;width:7.5%;aspect-ratio:.62;}

/* Clear the parked-car fragments from existing foreground masks too. */
.cafe-foreground::after,.green-pickup-foreground::after {content:'';position:absolute;inset:0;background:url('assets/traffic-road-cleared.png') 0 0 / 100% 100% no-repeat;}
.cafe-foreground::after {clip-path:inset(64% 72% 20% 18%);}
.green-pickup-foreground::after {clip-path:inset(70.7% 49% 0% 32.8%);}

/* Road repairs sit below traffic; only the house hides emerging cars. */
.left-tree-repair,.left-road-cleanup { z-index:6; }
.blue-house-foreground { z-index:8; background-image:url('assets/town-left-road-cleared.png'); }

.house-garden-foreground {position:absolute;inset:0;z-index:8;pointer-events:none;background:url('assets/town.png') 0 0 / 100% 100% no-repeat;clip-path:polygon(13.875% 75.000%, 15.416% 74.257%, 16.187% 75.743%, 16.804% 75.371%, 17.472% 76.238%, 17.986% 76.114%, 18.499% 77.351%, 19.424% 78.218%, 20.041% 80.074%, 21.223% 81.312%, 22.199% 83.292%, 22.199% 86.386%, 14.645% 90.347%, 13.361% 84.158%);}

/* The parked pickup's two rear caution lights flash together. */
.green-truck-hazards {position:absolute;inset:0;z-index:6;pointer-events:none;}
.green-truck-hazards i {position:absolute;width:.257%;height:.866%;border-radius:35%;background:#ffbd32;box-shadow:0 0 4px 2px #ff9800,0 0 10px 3px #ffad0055;transform:translate(-50%,-50%) skewY(-10deg);animation:pickup-caution 1.2s steps(1,end) infinite;}
.green-truck-hazards i:first-child {left:34.378%;top:66.955%;}
.green-truck-hazards i:last-child {left:37.050%;top:65.718%;}
@keyframes pickup-caution {0%,49.99% {opacity:1;}50%,100% {opacity:0;}}
.hero[data-motion="paused"] .green-truck-hazards i {animation-play-state:paused;}
@media(prefers-reduced-motion:reduce) {.green-truck-hazards i {animation:none;opacity:.5;}}

/* Keep the original right-hand cutout; extend only the foreground driving lane. */
.road-extension {clip-path:polygon(0 0, 56.526% 0, 56.526% 70.545%, 97.225% 100%, 0 100%);}