/* ============================================================
   HERO PHOTO CASCADE  —  optional, self-contained feature
   Three photos slowly cross-fade behind the landing, under a
   heavy white veil so the logo + stats stay crisp.

   TO REMOVE COMPLETELY:
     1. delete this file (hero-cascade.css)
     2. delete the <link ... hero-cascade.css> line in index.html
     3. delete the <div class="hero-cascade"> ... </div> inside .hero
   Nothing else in the site depends on it.
   ============================================================ */

.hero-cascade{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-cascade .hc-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;filter:grayscale(.06) brightness(1.02);animation:hcFade 27s linear infinite;will-change:opacity,transform}
.hero-cascade .hc-slide:nth-child(1){animation-delay:0s}
.hero-cascade .hc-slide:nth-child(2){animation-delay:9s}
.hero-cascade .hc-slide:nth-child(3){animation-delay:18s}
@keyframes hcFade{
  0%{opacity:0;transform:scale(1.05)}
  7%{opacity:1}
  30%{opacity:1}
  37%{opacity:0}
  100%{opacity:0;transform:scale(1.13)}
}
/* the dark veil — raise/lower the alphas to make photos fainter/stronger.
   Lower alpha = photos show through more; higher = logo/stats stay crisper. */
.hero-cascade::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,24,40,.58) 0%,rgba(6,24,40,.40) 46%,rgba(6,24,40,.80) 100%)}

/* keep the hero content + tagline strip above the cascade */
.hero > .hero-content,.hero > .tagline-strip{position:relative;z-index:2}

@media (prefers-reduced-motion: reduce){
  .hero-cascade .hc-slide{animation:none}
  .hero-cascade .hc-slide:nth-child(1){opacity:1}
}