/* =============================================
   HERO SLIDER — assets/css/hero-slider.css
   Cross-fade slider with dot navigation
   ============================================= */

/* Slider container */
.hero-slider{
  position:relative;
  overflow:hidden;
  width:100%;
}

/* All slides: hidden by default */
.hero-slide{
  display:none;
}

/* Active slide: in-flow, visible */
.hero-slide.active{
  display:block;
  position:relative;
  z-index:2;
  animation:dpaeSlideIn .7s ease;
}

/* Leaving slide: overlays while fading out (set by JS) */
.hero-slide.leaving{
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:3;
  animation:dpaeSlideOut .7s ease forwards;
}

@keyframes dpaeSlideIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes dpaeSlideOut{
  from{opacity:1}
  to{opacity:0}
}

/* Hide the .hero-banner in slider context — 
   background comes from per-slide inline style, not a separate div */
.hero-slider .hero-banner{
  display:none !important;
}

/* Dot navigation */
.hero-dots{
  position:absolute;
  bottom:50px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  z-index:10;
}

/* Individual dot */
.hero-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  border:none;
  cursor:pointer;
  transition:background .25s, transform .25s;
  padding:0;
}
.hero-dot:hover{
  background:rgba(255,255,255,.8);
}

/* Active dot */
.hero-dot.active{
  background:var(--gold);
  transform:scale(1.2);
}

/* Responsive */
@media(max-width:860px){
  .hero-dots{
    display:none;
  }
}