/* A moving lens reflection brightens the existing colored artwork only.
   With no painted background, the black portions of the card stay black. */
body .city-grid > a::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0 auto auto 0;
  width: 42%;
  height: 75%;
  z-index: 2;
  pointer-events: none;
  background: none;
  border: 0;
  border-radius: 0;
  opacity: 0;
  transition: none;
  -webkit-backdrop-filter: brightness(2.8) saturate(1.25);
  backdrop-filter: brightness(2.8) saturate(1.25);
  -webkit-mask-image: linear-gradient(105deg, transparent 5%, #0004 32%, #000 50%, #0005 62%, transparent 95%);
  mask-image: linear-gradient(105deg, transparent 5%, #0004 32%, #000 50%, #0005 62%, transparent 95%);
  transform: translateX(-110%);
}

/* Start together on arrival; repeat every 3s, keeping the 1.2s sweep. */
body .city-grid.city-glare-active > a::before {
  animation: city-sketch-glare 3s linear infinite;
}

@keyframes city-sketch-glare {
  0% { transform: translateX(-110%); opacity: 0; }
  3.333% { opacity: 1; }
  40% { transform: translateX(250%); opacity: 1; }
  43.333%, 100% { transform: translateX(250%); opacity: 0; }
}

body.effects-paused .city-grid > a::before {
  animation: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body .city-grid > a::before { animation: none; opacity: 0; }
}

/* Preserve the three-second sweep while suspending invisible filter work. */
body .city-grid.city-effects-idle > a::before { animation-play-state: paused; }