/* ----------------------------------------------------------------------
   Salt Lake City night skyline behind a hero.
   Sits under .hero__bg (the animated svg) and .hero__bg-overlay, so the
   existing hero treatment is untouched and still paints on top.
   The scrim is baked into the layer stack rather than applied as a flat
   opacity, so the darkening stays even across the photo.
     --slc-veil  how dark the overlay is over the photo
   Two shapes:
     .hero--slc--split  copy sits on one side, scrim lifts on the other
     .hero--slc--even   copy spans the hero, scrim is uniform
   ---------------------------------------------------------------------- */

.hero--slc{position:relative;--slc-veil:0.84}
.hero--slc::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(180deg,
      var(--bg-dark) 0%,
      rgba(10,14,26,var(--slc-veil)) 26%,
      rgba(10,14,26,calc(var(--slc-veil) + 0.05)) 68%,
      var(--bg-dark) 100%),
    url('/images/slc-night-hero.webp');
  background-size:cover, cover;
  background-position:center, center 30%;
  background-repeat:no-repeat, no-repeat;
  filter:saturate(0.88);
}

/* copy on the left, so let the skyline come through on the right */
@media(min-width:900px){
  .hero--slc--split::before{
    background-image:
      linear-gradient(90deg, var(--bg-dark) 0%, rgba(10,14,26,0.78) 34%, rgba(10,14,26,0.3) 72%, rgba(10,14,26,0.12) 100%),
      linear-gradient(180deg, var(--bg-dark) 0%, rgba(10,14,26,0.42) 30%, rgba(10,14,26,0.6) 72%, var(--bg-dark) 100%),
      url('/images/slc-night-hero.webp');
    background-size:cover, cover, cover;
    background-position:center, center, center 44%;
    background-repeat:no-repeat, no-repeat, no-repeat;
  }
}

/* copy spans the hero, so keep the veil even. The frame is pulled up to
   the darker sky band, which keeps the body copy readable at a 70% veil
   without darkening the overlay itself. */
.hero--slc--even::before{
  background-position:center, center 12%;
}
/* The 70% veil alone leaves the body copy short of WCAG AA over the lit
   towers, so a soft band sits behind the text only. The skyline keeps its
   70% treatment everywhere else. */
.hero--slc--even::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(10,14,26,0.36) 24%,
    rgba(10,14,26,0.42) 74%,
    transparent 100%);
}

/* the About hero: lighter veil, so more of the skyline shows through */
.hero--slc--even{--slc-veil:0.70}