/* City-specific service-area hero system. Each city receives a distinct scene;
   generated regional plates are paired with owned Hot Tub Shine photography
   and existing South Sound landscape assets. */
.city-hero {
  background-image:
    radial-gradient(circle at 78% 16%, rgba(255, 220, 160, .17), transparent 31%),
    linear-gradient(90deg, rgba(4, 12, 25, .66) 0%, rgba(5, 16, 31, .40) 43%, rgba(5, 16, 31, .07) 76%),
    linear-gradient(180deg, rgba(4, 13, 27, .02) 22%, rgba(7, 25, 47, .54) 100%),
    var(--city-hero) !important;
  background-position: var(--city-position, center) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.city-hero h1,
.city-hero .lead {
  text-shadow: 0 3px 24px rgba(2, 8, 18, .76), 0 1px 4px rgba(2, 8, 18, .92);
}

.city-hero--bonney-lake { --city-hero: url('/assets/img/gallery/img20240817100414-1600.avif'); --city-hero-mobile: url('/assets/img/gallery/img20240817100414-800.avif'); --city-position: center 54%; --city-position-mobile: 60% center; }
.city-hero--buckley { --city-hero: url('/assets/img/ambient/ridgeline-2200.jpg'); --city-hero-mobile: url('/assets/img/ambient/ridgeline-900.jpg'); --city-position: center 42%; }
.city-hero--eatonville { --city-hero: url('/assets/img/ambient/rainier-2200.jpg'); --city-hero-mobile: url('/assets/img/ambient/rainier-900.jpg'); --city-position: center 46%; }
.city-hero--enumclaw { --city-hero: url('/assets/img/ambient/goldridge-2200.jpg'); --city-hero-mobile: url('/assets/img/ambient/goldridge-900.jpg'); --city-position: center 48%; }
.city-hero--lacey { --city-hero: url('/assets/img/ambient/cedars-2200.jpg'); --city-hero-mobile: url('/assets/img/ambient/cedars-900.jpg'); --city-position: center 46%; }
.city-hero--lake-tapps { --city-hero: url('/assets/img/gallery/img20250718140817-1600.avif'); --city-hero-mobile: url('/assets/img/gallery/img20250718140817-800.avif'); --city-position: center 42%; --city-position-mobile: 58% center; }
.city-hero--olympia { --city-hero: url('/assets/img/gallery/img20260430131237-crop34-1600.avif'); --city-hero-mobile: url('/assets/img/gallery/img20260430131237-crop34-800.avif'); --city-position: center 35%; --city-position-mobile: 58% center; }
.city-hero--puyallup { --city-hero: url('/assets/img/ambient/luxdusk-2200.jpg'); --city-hero-mobile: url('/assets/img/ambient/luxdusk-900.jpg'); --city-position: center 48%; }
.city-hero--rainier { --city-hero: url('/assets/img/cities/city-rainier-foothills-1920.webp'); --city-hero-mobile: url('/assets/img/cities/city-rainier-foothills-900.webp'); --city-position: center 50%; }
.city-hero--roy { --city-hero: url('/assets/img/ambient/goldlake-2200.jpg'); --city-hero-mobile: url('/assets/img/ambient/goldlake-900.jpg'); --city-position: center 45%; }
.city-hero--seattle { --city-hero: url('/assets/img/gallery/img20250425143901-1600.avif'); --city-hero-mobile: url('/assets/img/gallery/img20250425143901-800.avif'); --city-position: center 42%; --city-position-mobile: 58% center; }
.city-hero--shelton { --city-hero: url('/assets/img/cities/city-shelton-canal-1920.webp'); --city-hero-mobile: url('/assets/img/cities/city-shelton-canal-900.webp'); --city-position: center 52%; }
.city-hero--south-hill { --city-hero: url('/assets/img/ambient/brightwater-1920.jpg'); --city-hero-mobile: url('/assets/img/ambient/brightwater-900.jpg'); --city-position: center 54%; }
.city-hero--sumner { --city-hero: url('/assets/img/gallery/img20250603113026-1600.avif'); --city-hero-mobile: url('/assets/img/gallery/img20250603113026-800.avif'); --city-position: center 55%; --city-position-mobile: 54% center; }
.city-hero--tacoma { --city-hero: url('/assets/img/ambient/sound-2200.jpg'); --city-hero-mobile: url('/assets/img/ambient/sound-900.jpg'); --city-position: center 46%; }
.city-hero--tumwater { --city-hero: url('/assets/img/cities/city-south-sound-water-1920.webp'); --city-hero-mobile: url('/assets/img/cities/city-south-sound-water-900.webp'); --city-position: center 52%; }
.city-hero--yelm { --city-hero: url('/assets/img/cities/city-yelm-rainier-1920.webp'); --city-hero-mobile: url('/assets/img/cities/city-yelm-rainier-900.webp'); --city-position: center 52%; }

@media (max-width: 900px) {
  .city-hero {
    background-image:
      radial-gradient(circle at 72% 14%, rgba(255, 220, 160, .16), transparent 32%),
      linear-gradient(180deg, rgba(3, 11, 23, .14) 0%, rgba(4, 15, 29, .38) 60%, rgba(8, 29, 52, .70) 100%),
      var(--city-hero-mobile, var(--city-hero)) !important;
    background-position: var(--city-position-mobile, center) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .city-hero { background-attachment: scroll !important; }
}