/* ═══════════════════════════════════════════════════════════
   HERO SLIDER — Crossfade carousel
   ═══════════════════════════════════════════════════════════ */
.slider-wrapper{position:absolute;inset:0;z-index:1}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;will-change:opacity}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;animation:slowZoom 12s ease-out forwards}
.slide.active img{animation:slowZoom 12s ease-out forwards}

@keyframes slowZoom{
  0%{transform:scale(1.02)}
  100%{transform:scale(1.10)}
}

/* Dots */
.slider-dots{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  z-index:4;display:flex;gap:.55rem;
  background:rgba(0,0,0,.18);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:.5rem .75rem;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.12);
}
.slider-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.45);border:none;padding:0;
  transition:transform var(--t-base), background var(--t-fast), width var(--t-base);
}
.slider-dot.active{background:#fff;width:28px;border-radius:6px}
.slider-dot:hover{background:rgba(255,255,255,.85)}

/* Arrows */
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:4;width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-base);
}
.slider-arrow:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.4);
  transform:translateY(-50%) scale(1.06);
}
.slider-prev{left:1.25rem}
.slider-next{right:1.25rem}