/* PZGL Studios homepage map motion (2026-09-01)
   Ambient traffic drawn over the existing city artwork inside .map-stage.
   The black copy sits above the desaturated map; the coloured copy sits above
   the colour map under the same cursor mask the map already uses. */

.pzgl-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.pzgl-motion-ink { z-index: 1; }

.pzgl-motion-tint {
  z-index: 2;
  -webkit-mask-image: radial-gradient(circle 165px at var(--mx) var(--my), #000 0 66%, #000000eb 70%, #0000006b 86%, transparent 100%);
  mask-image: radial-gradient(circle 165px at var(--mx) var(--my), #000 0 66%, #000000eb 70%, #0000006b 86%, transparent 100%);
}

@media (max-width: 900px) {
  .pzgl-motion-tint {
    -webkit-mask-image: radial-gradient(circle 120px at var(--mx) var(--my), #000 0 62%, #000c 76%, transparent 100%);
    mask-image: radial-gradient(circle 120px at var(--mx) var(--my), #000 0 62%, #000c 76%, transparent 100%);
  }
}

/* Sized by script to the cropped content box of the map image, so the
   traffic stays registered with the drawing at every viewport. */
.pzgl-motion-frame {
  position: absolute;
  top: 0;
  left: 0;
}

.pzgl-motion-frame svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pzgl-veh {
  offset-rotate: 0deg;
  animation-name: pzgl-run;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pzgl-veh.pzgl-rev { animation-direction: reverse; }

@keyframes pzgl-run {
  0%   { offset-distance: 0%; opacity: 0; }
  5%   { opacity: var(--o, .8); }
  95%  { opacity: var(--o, .8); }
  100% { offset-distance: 100%; opacity: 0; }
}

.pzgl-train {
  offset-rotate: auto;
  animation: pzgl-run var(--d) cubic-bezier(.45, 0, .55, 1) infinite;
}

.pzgl-lamp { animation: pzgl-flicker var(--d) steps(1, end) infinite; }

@keyframes pzgl-flicker {
  0%, 44%   { opacity: 0; }
  46%, 92%  { opacity: .95; }
  94%, 100% { opacity: .25; }
}

/* Stopping the animation would leave every vehicle stacked at the start of its
   path, so the whole overlay is withdrawn instead and the map is left as it is. */
@media (prefers-reduced-motion: reduce) {
  .pzgl-motion { display: none; }
}