/* ═══════════════════════════════════════════════════════════════
   HERO SLIDER — In Joy Living
   Each slide contains the ORIGINAL .hero grid, so all existing
   hero CSS (desktop / tablet / mobile) keeps working unchanged.
   This file only adds: slider wrapper, fade, controls, and makes
   the entrance animations replay on every slide change.
═══════════════════════════════════════════════════════════════ */

.hero-slider{position:relative;overflow:hidden}
.hero-slider .hero-swiper{width:100%}
.hero-slider .swiper-slide{height:auto}

/* Swiper fade: only the active slide is clickable */
.hero-slider .swiper-fade .swiper-slide{pointer-events:none}
.hero-slider .swiper-fade .swiper-slide-active{pointer-events:auto}

/* ── Entrance animations, driven by the active slide ─────────── */
/* Inactive slides: static (so the outgoing slide stays visible while it fades) */
.hero-slider .hero-eyebrow,
.hero-slider .hero-title,
.hero-slider .hero-sub,
.hero-slider .hero-cta,
.hero-slider .hero-img-wrap,
.hero-slider .hero-badge{opacity:1;animation:none}

/* Active slide (or first slide before Swiper is ready): replay original animations */
.hero-slider .swiper-slide-active .hero-eyebrow,
.hero-slider:not(.is-ready) .swiper-slide:first-child .hero-eyebrow{animation:fadeUp .8s .2s ease both}
.hero-slider .swiper-slide-active .hero-title,
.hero-slider:not(.is-ready) .swiper-slide:first-child .hero-title{animation:fadeUp .8s .4s ease both}
.hero-slider .swiper-slide-active .hero-sub,
.hero-slider:not(.is-ready) .swiper-slide:first-child .hero-sub{animation:fadeUp .8s .6s ease both}
.hero-slider .swiper-slide-active .hero-cta,
.hero-slider:not(.is-ready) .swiper-slide:first-child .hero-cta{animation:fadeUp .8s .8s ease both}
.hero-slider .swiper-slide-active .hero-img-wrap,
.hero-slider:not(.is-ready) .swiper-slide:first-child .hero-img-wrap{animation:fadeIn 1.2s .5s ease both}
.hero-slider .swiper-slide-active .hero-badge,
.hero-slider:not(.is-ready) .swiper-slide:first-child .hero-badge{animation:fadeUp .8s 1.2s ease both}

@media (prefers-reduced-motion:reduce){
  .hero-slider .hero-eyebrow,.hero-slider .hero-title,.hero-slider .hero-sub,
  .hero-slider .hero-cta,.hero-slider .hero-img-wrap,.hero-slider .hero-badge{
    animation:none !important;opacity:1 !important}
}

/* ── Controls (arrows + dots + counter) ──────────────────────── */
.hero-slider-controls{
  position:absolute;left:80px;bottom:36px;z-index:6;
  display:flex;align-items:center;gap:18px;
}
.hero-nav{
  width:42px;height:42px;border-radius:50%;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--warm-white);color:var(--text);
  border:1px solid rgba(45,37,32,.25);
  transition:background .25s,color .25s,border-color .25s;
}
.hero-nav:hover,.hero-nav:focus-visible{background:var(--text);color:var(--warm-white);border-color:var(--text)}
.hero-nav.swiper-button-disabled{opacity:.35;cursor:default;pointer-events:none}

.hero-dots.swiper-pagination{position:static;width:auto;display:flex;align-items:center;gap:8px;transform:none}
.hero-dots .swiper-pagination-bullet{
  width:22px;height:2px;margin:0 !important;border-radius:0;opacity:1;
  background:var(--clay);opacity:.45;transition:width .3s,opacity .3s,background .3s;
}
.hero-dots .swiper-pagination-bullet-active{width:38px;opacity:1;background:var(--terracotta)}

.hero-counter{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;color:var(--mid);
  min-width:52px;text-align:center;
}
.hero-counter-cur{color:var(--text)}

/* ── Tablet & mobile: controls sit below the slide, centred ──── */
@media (max-width:1024px){
  .hero-slider-controls{
    position:static;justify-content:center;
    padding:8px 20px 32px;gap:14px;background:var(--warm-white);
  }
  .hero-nav{width:38px;height:38px}
}
@media (max-width:480px){
  .hero-counter{display:none}
  .hero-dots .swiper-pagination-bullet{width:16px}
  .hero-dots .swiper-pagination-bullet-active{width:28px}
}

/* Slides 2+ use <h2 class="hero-title"> — keep the same mobile <br> behaviour as the h1 */
@media (max-width:768px){
  .hero-slider h2.hero-title br{display:none !important}
}