/* ════════════════════════════════════════════════════
   HERO SLIDESHOW  (hero-slideshow.css)
   Images sit on the right half of the hero and
   crossfade every 5 s. A CSS mask fades left→right
   so the text column stays fully readable.
   ════════════════════════════════════════════════════ */

.hero-slideshow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  z-index: 0;
  overflow: hidden;
  /* Left edge transparent → right edge fully opaque */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 18%,
    rgba(0, 0, 0, 0.60) 38%,
    black 60%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 18%,
    rgba(0, 0, 0, 0.60) 38%,
    black 60%
  );
}

.hero-slideshow .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: paused;
}

.hero-slideshow .slide.active {
  opacity: 1;
  animation-play-state: running;
}

.slide-1 { background-image: url('../images/image_1_hero.png'); animation-name: heroZoom1; }
.slide-2 { background-image: url('../images/image_2_hero.png'); animation-name: heroZoom2; }
.slide-3 { background-image: url('../images/image_3_hero.png'); animation-name: heroZoom3; }
.slide-4 { background-image: url('../images/image_4_hero.png'); animation-name: heroZoom4; }

.slide-1-about { background-image: url('../images/image_1_about.png'); animation-name: heroZoom1; }
.slide-2-about { background-image: url('../images/image_2_about.png'); animation-name: heroZoom2; }
.slide-3-about { background-image: url('../images/image_3_about.png'); animation-name: heroZoom3; }

/* Ken Burns — unique origin per slide */
@keyframes heroZoom1 {
  from { transform: scale(1.00) translate( 0%,  0%); }
  to   { transform: scale(1.07) translate(-1.5%, -1%); }
}
@keyframes heroZoom2 {
  from { transform: scale(1.00) translate( 0%,  0%); }
  to   { transform: scale(1.08) translate( 1%, -1.5%); }
}
@keyframes heroZoom3 {
  from { transform: scale(1.00) translate( 0%,  0%); }
  to   { transform: scale(1.06) translate(-1%,  1%); }
}
@keyframes heroZoom4 {
  from { transform: scale(1.00) translate( 0%,  0%); }
  to   { transform: scale(1.09) translate( 1.5%, 0.5%); }
}

/* Dot indicators */
.hero-slideshow-dots {
  position: absolute;
  bottom: 44px;
  right: 44px;
  display: flex;
  gap: 8px;
  z-index: 3;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}

.hero-dot.active {
  background: white;
  border-color: white;
  transform: scale(1.4);
}

/* Ensure hero text is above the slideshow */
.hero-inner {
  position: relative;
  z-index: 1;
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-slideshow {
    width: 100%;
    opacity: 0.2;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-slideshow-dots {
    bottom: 20px;
    right: 20px;
  }
}