/* ============================================================
   HOME HERO SLIDESHOW
   Additive stylesheet — loaded only by the home page, on top of
   the untouched css/style.css. Photos sit inside .hero-blueprint
   exactly where the single hero photo used to, so the blueprint
   SVG still acts as the fallback/backdrop.
   ============================================================ */

.hero-slideshow {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slide.is-active { opacity: 1; }

.hero-slide picture,
.hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Progress line along the bottom of the hero: fills left-to-right for the
   duration of the current slide, then the slideshow advances. */
.hero-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .18);
  z-index: 3;
}

.hero-progress-line {
  display: block;
  height: 100%;
  width: 0;
  background: #C9A227;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}