/* =====================================================================
   Wellness Dream Center — HERO SLIDER
   Three-panel hero: 1) Welcome  2) Gift cards  3) Package builder.
   Built entirely on site.css tokens — reuses .gc-card / .opt vocabulary.
   ===================================================================== */

.hero-slider{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  border-bottom:1px solid var(--line-2);
  height:100dvh;
  min-height:560px;
  display:flex;
  flex-direction:column;
}
.hero-slider-glow{
  position:absolute; top:-12%; right:-6%; width:58%; height:86%; z-index:0; pointer-events:none;
  background:radial-gradient(50% 50% at 62% 40%, rgba(201,162,78,.11), transparent 72%);
  transition:opacity .8s var(--ease);
}

/* viewport + track ------------------------------------------------- */
/* DESKTOP: fixed one-screen height, slide content vertically centered.
   MOBILE/TABLET (<=860): the @media block below switches to a
   content-hugging model (viewport height = active slide, set in JS). */
.hs-viewport{ position:relative; z-index:1; overflow:hidden; flex:1 1 auto; min-height:0; transition:height .5s var(--ease); cursor:grab; touch-action:pan-y; }
.hs-viewport.hs-grabbing{ cursor:grabbing; user-select:none; }
.hs-track{
  display:flex;
  height:100%;
  will-change:transform;
}

.hslide{
  flex:0 0 100%;
  min-width:100%;
  height:100%;
  min-height:0;
  display:flex; align-items:center;
  overflow:hidden;
  padding-top:clamp(78px,10vh,116px);
  padding-bottom:clamp(12px,2vh,26px);
}
.hslide > .container{ max-height:100%; }
.hslide-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.43fr 1.18fr;
  gap:clamp(28px,4vw,64px); align-items:center;
  width:100%; max-height:100%;
}

/* shared in-slide entrance animation -------------------------------- */
.ha{ opacity:0; transform:translateY(26px); }
.hslide.is-active .ha{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.hslide.is-active .ha.d1{ transition-delay:.10s; }
.hslide.is-active .ha.d2{ transition-delay:.20s; }
.hslide.is-active .ha.d3{ transition-delay:.32s; }
.hslide.is-active .ha.d4{ transition-delay:.44s; }
.ha-media{ opacity:0; transform:translateY(30px) scale(.97); }
.hslide.is-active .ha-media{
  opacity:1; transform:none;
  transition:opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay:.14s;
}
@media (prefers-reduced-motion: reduce){
  .ha, .ha-media{ opacity:1 !important; transform:none !important; }
}

.hslide .eyebrow{ display:inline-flex; }
.hslide h1.display{ margin-top:clamp(12px,2vh,22px); font-size:clamp(3.15rem, 2.86vw + 2.97vh, 5.72rem); line-height:1.04; }
.hslide .lead{ margin-top:clamp(12px,1.8vh,22px); max-width:47ch; font-size:18px; line-height:1.6; }
.hs-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:clamp(18px,3vh,36px); }

/* ===== SLIDE 1 · welcome (reuses hero arch + badge) ================= */
.hs-arch{ position:relative; width:max-content; max-width:100%; margin-inline:auto; }
.hs-arch .arch{ aspect-ratio:5/6; height:min(68vh, 780px); width:auto; max-width:100%; }
/* desktop: enlarge the arch photo ~1.3x visually (arch-900 base scale is .9)
   without changing its layout box, so the badge/card positions + one-screen hold */
@media (min-width:861px){
  .hs-arch .arch, .build-arch .arch{ transform:scale(1.17); }
}
.hs-arch img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:861px){
  /* slide 1 gets a larger image + a wider column gap */
  .hslide[data-kind="welcome"] .hslide-grid{ grid-template-columns:1fr 1.15fr; gap:clamp(36px,5vw,90px); }
}
.hs-badge{ position:absolute; left:-4%; bottom:7%; z-index:3; animation:floatY 4.6s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce){ .hs-badge{ animation:none; } }

/* ===== SLIDE 2 · gift cards ======================================== */
.hgc-stage{ position:relative; width:100%; max-width:min(562px, 70vh); margin-inline:auto; aspect-ratio:1.55/1; }
.hgc-stage .gc-card{ box-shadow:0 40px 90px -50px rgba(0,0,0,.9); }

/* layered cards */
.hgc-stage .gc-card.lay-back{
  transform:rotate(-9deg) translate(-12%,12%) scale(.9);
  filter:brightness(.62) saturate(.85); z-index:0;
}
.hgc-stage .gc-card.lay-mid{
  transform:rotate(5deg) translate(9%,7%) scale(.95);
  filter:brightness(.8) saturate(.9); z-index:1;
}
.hgc-stage .gc-card.lay-front{
  z-index:2;
  animation:gcFloat 6.2s var(--ease) infinite;
}
@keyframes gcFloat{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-12px) rotate(-1.2deg); } }
@media (prefers-reduced-motion: reduce){ .hgc-stage .gc-card.lay-front{ animation:none; } }

.gc-note{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(.92rem,1.5vw,1.08rem); color:var(--ink-soft); line-height:1.4;
}
.gc-note b{ font-style:normal; font-weight:500; color:var(--gold-soft); }
.gc-num{ font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; color:var(--faint); text-transform:uppercase; }

/* flying "sent" tag */
.hgc-fly{
  position:absolute; top:-6%; right:-2%; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:#1a1306; background:var(--gold-soft);
  padding:.6em 1em; border-radius:100px;
  box-shadow:0 16px 36px -16px rgba(201,162,78,.7);
  opacity:0; transform:translateY(14px) scale(.85);
}
.hgc-fly svg{ width:14px; height:14px; }
.hslide.is-active .hgc-fly{ animation:flyIn 5.4s var(--ease) .9s infinite; }
@keyframes flyIn{
  0%{ opacity:0; transform:translateY(14px) scale(.85); }
  10%,46%{ opacity:1; transform:translateY(0) scale(1); }
  60%,100%{ opacity:0; transform:translateY(-10px) scale(.92); }
}
@media (prefers-reduced-motion: reduce){ .hslide.is-active .hgc-fly{ animation:none; opacity:1; transform:none; } }

/* denomination chips that pulse */
.hgc-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hgc-chip{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--ink-soft); background:var(--bg-2); border:1px solid var(--line);
  border-radius:100px; padding:.56em 1.05em; transition:.4s var(--ease);
}
.hgc-chip.hot{ border-color:var(--gold); background:rgba(201,162,78,.12); color:#fff; transform:translateY(-2px); }

/* ===== SLIDE 3 · package builder ==================================== */
.hbuild{
  position:relative; width:100%; max-width:538px; margin-inline:auto;
  background:var(--bg-1); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(18px,2.4vw,28px);
  box-shadow:0 40px 100px -54px rgba(0,0,0,.9);
}
.hbuild::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg, rgba(201,162,78,.10), transparent 42%);
}
.hbuild > *{ position:relative; z-index:1; }
.hbuild-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.hbuild-k{ font-family:var(--mono); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.hbuild-badge{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-soft); border:1px solid var(--gold-line); background:rgba(201,162,78,.07);
  border-radius:100px; padding:.34em .8em;
}
.hbuild-title{ font-family:var(--serif); font-weight:500; font-size:1.3rem; margin-top:14px; letter-spacing:-.01em; }

.hbuild-rows{ list-style:none; margin:clamp(12px,2vh,18px) 0 4px; padding:0; display:flex; flex-direction:column; gap:clamp(7px,1.1vh,9px); }
.hbuild-row{
  display:flex; align-items:center; gap:13px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:13px;
  padding:clamp(.6em,1.2vh,.78em) 1em; cursor:pointer;
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.hbuild-row:hover{ border-color:var(--gold-line); transform:translateX(3px); }
.hbuild-row .hb-tick{
  width:21px; height:21px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--line); display:grid; place-items:center;
  color:transparent; transition:.35s var(--ease);
}
.hbuild-row .hb-tick svg{ width:12px; height:12px; }
.hbuild-row .hb-name{ font-size:.94rem; font-weight:500; color:var(--ink-soft); flex:1; min-width:0; }
.hbuild-row .hb-sub{ display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:3px; }
.hbuild-row .hb-price{ font-family:var(--mono); font-size:.82rem; color:var(--faint); white-space:nowrap; transition:color .35s; }
.hbuild-row.on{ border-color:var(--gold); background:rgba(201,162,78,.10); }
.hbuild-row.on .hb-name{ color:#fff; }
.hbuild-row.on .hb-price{ color:var(--gold-soft); }
.hbuild-row.on .hb-tick{ background:var(--gold); border-color:var(--gold); color:#1a1306; }
.hbuild-row.just{ animation:hbPop .5s var(--ease); }
@keyframes hbPop{ 0%{ transform:scale(.98); } 45%{ transform:scale(1.015); } 100%{ transform:scale(1); } }

.hbuild-total{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.hbuild-total .lbl{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.hbuild-total .amt{ font-family:var(--serif); font-weight:300; font-size:2rem; letter-spacing:-.02em; color:var(--ink); }
.hbuild-total .amt small{ font-family:var(--sans); font-size:.42em; color:var(--muted); margin-inline-start:.3em; letter-spacing:.04em; }
.hbuild-save{ font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; color:var(--gold-soft); margin-top:6px; text-align:end; opacity:0; transition:opacity .5s; }
.hbuild-save.show{ opacity:1; }

/* slide 3 · builder card floating on an arched image (mirrors hero slide 1) */
.build-arch{ position:relative; width:max-content; max-width:100%; margin-inline:auto;
  --bld-x:var(--bld-xd,-5%); --bld-y:var(--bld-yd,-2%); --bld-scale:var(--bld-sd,.5); }
.build-arch .arch{ aspect-ratio:5/6; height:min(68vh,780px); width:auto; max-width:100%; position:relative; }
.build-arch .arch img{ width:100%; height:100%; object-fit:cover; }
.build-arch .arch::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,11,10,.12) 0%, rgba(12,11,10,.5) 80%); pointer-events:none; }
.build-arch .hbuild{ position:absolute; left:var(--bld-x); bottom:var(--bld-y); transform:scale(var(--bld-scale)); transform-origin:bottom left; width:min(80%, 360px); margin:0; z-index:3;
  animation:bldFloat 5.5s ease-in-out infinite;
  background:rgba(15,13,12,.8); backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 30px 80px -36px rgba(0,0,0,.95); }
@keyframes bldFloat{ 0%,100%{ transform:translateY(0) scale(var(--bld-scale)); } 50%{ transform:translateY(-11px) scale(var(--bld-scale)); } }
@media (prefers-reduced-motion: reduce){ .build-arch .hbuild{ animation:none; } }

/* ===== slider chrome (dots + arrows + counter) ===================== */
.hero-slider > .container{ flex:0 0 auto; }
.hs-ui{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
  padding-block:clamp(12px,1.6vh,22px) clamp(16px,2.4vh,30px);
}
.hs-dots{ display:flex; align-items:center; gap:14px; }
.hs-dot{
  position:relative; display:inline-flex; align-items:center; gap:11px;
  background:none; border:0; cursor:pointer; padding:6px 2px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); transition:color .35s var(--ease);
}
.hs-dot .hs-dot-line{ position:relative; width:34px; height:2px; border-radius:2px; background:var(--line); overflow:hidden; transition:width .4s var(--ease); }
.hs-dot .hs-dot-line::after{ content:""; position:absolute; inset:0; width:0; background:var(--gold); border-radius:2px; }
.hs-dot:hover{ color:var(--ink-soft); }
.hs-dot.on{ color:var(--gold); }
.hs-dot.on .hs-dot-line{ width:62px; }
.hs-dot.on .hs-dot-line::after{ width:100%; transition:width var(--hs-dur,5.5s) linear; }
.hs-dot.on.paused .hs-dot-line::after{ transition:none; }

.hs-arrows{ display:flex; gap:10px; }
.hs-arrows .carousel-btn{ width:46px; height:46px; }

@media (max-width:860px){
  /* MOBILE/TABLET only: hug content so slides 2 & 3 lose the empty
     top/bottom band and the big gap before the arrows. Desktop is
     untouched (it keeps the fixed one-screen layout above). */
  .hero-slider{ height:auto; min-height:0; }
  .hs-viewport{ flex:0 0 auto; height:auto; }
  .hs-track{ height:auto; align-items:flex-start; }
  .hslide{ height:auto; overflow:visible; padding-top:calc(clamp(82px,11vh,110px) + 32px); padding-bottom:clamp(18px,2.5vh,30px); }
  .hslide > .container{ max-height:none; }

  /* flatten the text column so heading / image / paragraph / cta can interleave */
  .hslide-grid{ display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:clamp(14px,2.4vh,26px); max-height:none; }
  .hslide-grid > div:not(.ha-media){ display:contents; }

  /* stacking order — tablet: heading · image · paragraph · cta */
  .hslide .eyebrow{ order:1; justify-content:center; }
  .hslide h1.display{ order:2; margin-top:0; font-size:clamp(2rem, 4.4vw + 1vh, 3rem); }
  .hslide-grid > .ha-media{ order:3; width:100%; }
  .hslide .lead{ order:4; margin-top:0; margin-inline:auto; max-width:52ch; font-size:16px; }
  .hslide[data-kind="gift"] .lead{ margin-top:24px; }
  .hslide .hgc-chips{ order:4; justify-content:center; margin-top:0; }
  .hs-cta{ order:5; margin-top:0; justify-content:center; }

  .hs-arch{ width:100%; max-width:min(780px, 96vw); margin-inline:auto; }
  .hs-arch .arch{ width:100%; height:auto; aspect-ratio:5/6; max-height:88vh; }
  .hgc-stage{ max-width:min(378px, 41vh); }
  .hbuild{ max-width:378px; }
  .hs-badge{ left:auto; right:4%; bottom:5%; transform:scale(.86); transform-origin:bottom right; }

  /* slide 2 (gift) stacked spacing: title→42 · cards→20 · prices→64 */
  .hslide[data-kind="gift"] .hslide-grid{ gap:0; }
  .hslide[data-kind="gift"] h1.display{ margin-top:clamp(10px,1.6vh,16px); }
  .hslide[data-kind="gift"] .hslide-grid > .ha-media{ margin-top:42px; }
  .hslide[data-kind="gift"] .hgc-chips{ margin-top:20px; }
  .hslide[data-kind="gift"] .hs-cta{ margin-top:64px; }

  /* slide 3 · keep the builder card floating ON the arched image at every breakpoint */
  .build-arch{ width:100%; max-width:min(728px,94vw);
    --bld-x:var(--bld-xt,-5%); --bld-y:var(--bld-yt,-2%); --bld-scale:var(--bld-st,.5); }
  .build-arch .arch{ width:100%; height:auto; max-height:80vh; }
}
@media (max-height:680px) and (min-width:861px){
  .hs-arch .arch{ height:min(72vh, 572px); }
  .hgc-stage{ max-width:min(515px, 65vh); }
  .hslide h1.display{ font-size:clamp(2rem, 1.6vw + 1.8vh, 3.2rem); }
}
@media (max-width:640px){
  /* mobile: hide the gold divider line on hero eyebrows */
  .hslide .eyebrow::before, .hslide .eyebrow::after{ display:none; }
  /* mobile: hide the paragraph, and shrink the welcome image to 0.9x */
  .build-arch{ --bld-x:var(--bld-xm,-5%); --bld-y:var(--bld-ym,-2%); --bld-scale:var(--bld-sm,.5); }
  .hslide .lead{ display:none; }
  .hslide h1.display{ margin-bottom:0; }
  .hs-arch{ max-width:min(700px, 92vw); }
  .hgc-stage{ max-width:min(378px, 41vh); }
  /* stack the buttons vertically, like the other slides */
  .hs-cta{ flex-direction:column; align-items:center; }
  .hs-cta .btn{ width:100%; max-width:360px; justify-content:center; }
}
@media (max-width:560px){
  .hs-ui{ flex-direction:column-reverse; align-items:center; gap:14px; padding-block:10px 16px; }
  .hs-dots{ justify-content:center; gap:10px; }
  .hs-dot span:not(.hs-dot-line){ display:none; }
  .hs-dot .hs-dot-line{ width:22px; }
  .hs-dot.on .hs-dot-line{ width:40px; }
  .hs-arrows{ justify-content:center; }
  .hslide{ padding-top:calc(clamp(70px,9vh,96px) + 32px); }
  .hslide h1.display{ font-size:clamp(1.9rem, 7vw, 2.6rem); }
  .hgc-chips{ justify-content:center; }
  .hs-cta .btn{ justify-content:center; }
}