/* ============================================================
   HERO CAROUSEL — top promotional bar
   Auto-advancing slides w/ animated entrances, arrows, dots,
   progress bar, pause-on-hover, swipe + keyboard.
   ============================================================ */

.hcar-band{ padding-top:clamp(20px,3vw,34px); padding-bottom:clamp(8px,2vw,18px); }

.hcar{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  height:clamp(340px,40vw,440px);
  isolation:isolate;
}

/* ---- slides (stacked, crossfade) ---- */
.hcar__slide{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;
  gap:clamp(20px,4vw,56px);
  padding:clamp(26px,4vw,56px);
  opacity:0; visibility:hidden;
  transform:scale(1.02);
  transition:opacity .7s ease, transform .7s ease, visibility 0s linear .7s;
  color:#fff;
}
.hcar__slide[data-active]{
  opacity:1; visibility:visible; transform:scale(1);
  transition:opacity .7s ease, transform .7s ease;
  z-index:2;
}

/* per-slide background themes */
.s-sale{   background:linear-gradient(120deg, oklch(0.40 0.16 28), oklch(0.55 0.19 35) 55%, oklch(0.68 0.17 58)); }
.s-bot{    background:linear-gradient(135deg, var(--tg-deep), var(--tg) 60%, oklch(0.60 0.14 250)); }
.s-coupon{ background:linear-gradient(135deg, oklch(0.30 0.05 60), oklch(0.46 0.13 72)); }
.s-alerts{ background:linear-gradient(135deg, oklch(0.42 0.10 205), oklch(0.56 0.13 225)); }

/* decorative soft orbs */
.hcar__slide::before,
.hcar__slide::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.16), transparent 70%);
}
.hcar__slide::before{ width:380px; height:380px; top:-140px; right:8%; }
.hcar__slide::after{ width:260px; height:260px; bottom:-130px; left:-40px; }

/* ---- copy ---- */
.hcar__copy{ position:relative; z-index:2; }
.hcar__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px);
}
.hcar__copy h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(26px,3.8vw,46px); letter-spacing:-.025em; line-height:1.02;
  margin-top:16px; text-wrap:balance;
}
.hcar__copy h2 b{ color:#ffd76a; }
.hcar__copy p{
  font-size:clamp(14px,1.8vw,18px); line-height:1.45;
  color:rgba(255,255,255,.92); margin-top:14px; max-width:42ch;
}
.hcar__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hcar .btn--white{ background:#fff; color:var(--ink); box-shadow:0 12px 28px rgba(0,0,0,.22); display:inline-flex; align-items:center; gap:9px; }
.hcar .btn--white:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(0,0,0,.3); background:#fff; }
.hcar .btn--white svg{ width:19px; height:19px; }
.hcar .btn--clear{ background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.5); }
.hcar .btn--clear:hover{ background:rgba(255,255,255,.24); transform:translateY(-2px); }

/* ---- mascot art ---- */
.hcar__art{ position:relative; z-index:2; display:grid; place-items:center; }
.hcar__art .mascot-orb{ width:clamp(170px,22vw,280px); aspect-ratio:1; }
.s-sale   .mascot-orb{ background:radial-gradient(circle at 50% 42%, #f8806b, #f4694f 72%); }
.s-bot    .mascot-orb{ background:radial-gradient(circle at 50% 42%, #f8806b, #f4694f 72%); }
.s-coupon .mascot-orb{ background:radial-gradient(circle at 50% 42%, #f8806b, #f4694f 72%); }
.s-alerts .mascot-orb{ background:radial-gradient(circle at 50% 42%, #f8806b, #f4694f 72%); }
.hcar__coin{
  position:absolute; z-index:3;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:21px; color:#7a4d00;
  background:linear-gradient(160deg,#ffd76a,#f5a623);
  box-shadow:0 8px 20px rgba(0,0,0,.24), inset 0 2px 0 rgba(255,255,255,.5);
}
.hcar__coin.k1{ top:4%; left:6%; }
.hcar__coin.k2{ bottom:8%; right:4%; width:38px; height:38px; font-size:16px; }

/* ---- entrance animations (only when slide active) ---- */
@media (prefers-reduced-motion: no-preference){
  .hcar__slide[data-active] .hcar__eyebrow{ animation:hc-rise .6s .05s both; }
  .hcar__slide[data-active] .hcar__copy h2{ animation:hc-rise .6s .15s both; }
  .hcar__slide[data-active] .hcar__copy p{ animation:hc-rise .6s .25s both; }
  .hcar__slide[data-active] .hcar__cta{ animation:hc-rise .6s .35s both; }
  .hcar__slide[data-active] .mascot-orb{ animation:hc-pop .7s .15s both; }
  .hcar__slide[data-active] .hcar__coin.k1{ animation:hc-pop .6s .4s both, hc-bob 4s 1s ease-in-out infinite; }
  .hcar__slide[data-active] .hcar__coin.k2{ animation:hc-pop .6s .52s both, hc-bob 4.6s 1.2s ease-in-out infinite; }
}
@keyframes hc-rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }
@keyframes hc-pop{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:scale(1); } }
@keyframes hc-bob{ 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-12px) rotate(4deg);} }

/* ---- arrows ---- */
.hcar__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.9); color:var(--ink);
  border:none; box-shadow:var(--shadow-md); cursor:pointer;
  transition:background .2s, transform .2s;
}
.hcar__nav:hover{ background:#fff; transform:translateY(-50%) scale(1.08); }
.hcar__nav svg{ width:22px; height:22px; }
.hcar__nav.prev{ left:16px; }
.hcar__nav.next{ right:16px; }

/* ---- dots ---- */
.hcar__dots{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:5;
  display:flex; gap:9px;
}
.hcar__dots button{
  width:9px; height:9px; border-radius:999px; border:none; cursor:pointer;
  background:rgba(255,255,255,.45); padding:0;
  transition:width .3s, background .3s;
}
.hcar__dots button[aria-current="true"]{ width:28px; background:#fff; }

/* ---- progress bar ---- */
.hcar__progress{
  position:absolute; left:0; right:0; bottom:0; height:4px; z-index:5;
  background:rgba(255,255,255,.18);
}
.hcar__progress i{
  display:block; height:100%; width:0;
  background:rgba(255,255,255,.9);
  transition:width .15s linear;
}

/* ---- responsive ---- */
@media (max-width:780px){
  .hcar{ height:auto; }
  .hcar__slide{
    grid-template-columns:1fr; text-align:center;
    padding:clamp(28px,7vw,40px) clamp(20px,6vw,30px) 46px;
    gap:18px;
    position:relative;
  }
  /* on mobile, render only the active slide in normal flow */
  .hcar__slide:not([data-active]){ display:none; }
  .hcar__slide[data-active]{ display:grid; }
  .hcar__art{ order:-1; }
  .hcar__art .mascot-orb{ width:clamp(130px,38vw,180px); }
  .hcar__copy p{ margin-inline:auto; }
  .hcar__cta{ justify-content:center; }
  .hcar__nav{ width:38px; height:38px; }
  .hcar__nav.prev{ left:8px; } .hcar__nav.next{ right:8px; }
}