/* Preserve the approved artwork and layout; only its diamond moves.
   Fourteen artwork units translate to roughly 3–8 screen pixels. */
body.city-page #city-art .city-banner-art {
  filter: none;
  pointer-events: none;
}
.city-banner-diamond {
  animation: city-diamond-hover 7.5s ease-in-out infinite;
}
@keyframes city-diamond-hover {
  0%, 100% { transform: translateY(0); filter: brightness(1.05); }
  50% { transform: translateY(-14px); filter: brightness(1.25); }
}
/* A faint pool of city-colored light breathes from the diamond center. */
.city-banner-aura {
  opacity: .45;
  animation: city-diamond-radiance 7.5s ease-in-out infinite;
}
@keyframes city-diamond-radiance {
  0%, 100% { opacity: .45; }
  50% { opacity: .85; }
}
/* The interior light expands across the diamond at the top of its hover,
   then contracts toward the center as it lowers. Keep the facet lines clear. */
.city-banner-fill {
  transform-origin: 836px 280px;
  transform: scale(.4);
  opacity: .3;
  mix-blend-mode: screen;
  animation: city-diamond-fill 7.5s ease-in-out infinite;
}
@keyframes city-diamond-fill {
  0%, 100% { transform: scale(.4); opacity: .3; }
  50% { transform: scale(1.4); opacity: .8; }
}
body.effects-paused :is(.city-banner-diamond, .city-banner-aura, .city-banner-fill) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .city-banner-diamond, .city-banner-aura, .city-banner-fill { animation: none; }
}

/* Offscreen banners retain their pose without continuously repainting filters. */
.city-banner-art.city-effects-idle :is(.city-banner-diamond, .city-banner-aura, .city-banner-fill) {
  animation-play-state: paused;
}