/*
 * Hero Slider — Stylesheet
 * Pixel-perfect port of the React / Framer Motion slider.
 * Pair with: hero-slider.js (GSAP animation engine)
 */

/* ─── Global base reset (prevents overflow on all devices) ── */
html,
body {
  margin:     0;
  padding:    0;
  width:      100%;
  overflow-x: hidden;
}

/* ─── Reset & base ────────────────────────────────────────── */
#hero-slider *,
#hero-slider *::before,
#hero-slider *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Outer wrapper ───────────────────────────────────────── */
.hs-outer {
  /* 100% instead of 100vw — avoids scrollbar-triggered overflow */
  width:      100%;
  height:     100svh;
  min-height: 100dvh;
  position:   relative;
  overflow:   hidden;
  font-family: 'Plus Jakarta Sans', sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

/* ─── Background gradient layers (A / B ping-pong) ───────── */
.hs-bg {
  position:    absolute;
  inset:       0;
  z-index:     0;
  will-change: opacity;
}

/* ─── Radial glow overlay layers ─────────────────────────── */
.hs-glow {
  position:       absolute;
  inset:          0;
  z-index:        1;
  pointer-events: none;
  will-change:    opacity;
}

/* ─── Centre stage container ─────────────────────────────── */
.hs-center {
  position:        absolute;
  inset:           0;
  z-index:         2;
  display:         flex;
  align-items:     center;
  justify-content: center;
  /* Clip the giant word so it never creates a horizontal scrollbar */
  overflow:        hidden;
}

/* ─── Background word (Fredoka One, giant) ───────────────── */
.hs-word-wrap {
  position:       absolute;
  inset:          0;
  display:        flex;
  align-items:    center;
  justify-content: center;
  z-index:        3;
  pointer-events: none;
  overflow:       hidden;
  will-change:    transform, opacity;
}

.hs-word {
  font-family:    'Fredoka One', cursive;
  font-size:      clamp(100px, 26vw, 300px);
  color:          rgba(255, 255, 255, 0.92);
  letter-spacing: -0.01em;
  line-height:    1;
  white-space:    nowrap;
}

/* ─── Product image wrapper ──────────────────────────────── */
.hs-product-wrap {
  position:    absolute;
  z-index:     6;
  will-change: transform, opacity;
}

.hs-product-circle {
  width:       clamp(240px, 50vmin, 560px);
  height:      clamp(240px, 50vmin, 560px);
  flex-shrink: 0;
  /* No border-radius / overflow:hidden — show product as full transparent PNG */
}

.hs-product-circle img {
  width:          100%;
  height:         100%;
  object-fit:     contain;
  display:        block;
  pointer-events: none;
  filter:         drop-shadow(0 24px 52px rgba(0, 0, 0, 0.35));
}

/* ─── Bottom-left content block ──────────────────────────── */
.hs-content {
  position:       absolute;
  bottom:         clamp(44px, 7vh, 80px);
  left:           clamp(24px, 5vw, 72px);
  z-index:        10;
  display:        flex;
  flex-direction: column;
  gap:            clamp(8px, 1.2vh, 14px);
  /* Wide enough on tablets, cap on large desktops */
  max-width:      clamp(260px, 38vw, 480px);
  will-change:    transform, opacity;
}

.hs-desc {
  font-family:          'Plus Jakarta Sans', sans-serif;
  font-size:            clamp(12px, 1.3vw, 15px);
  color:                rgba(255, 255, 255, 0.82);
  line-height:          1.65;
  margin:               0;
  display:              -webkit-box;
  -webkit-line-clamp:   2;
  -webkit-box-orient:   vertical;
  overflow:             hidden;
}

.hs-price {
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-size:      clamp(28px, 3.8vw, 52px);
  font-weight:    400;
  color:          #fff;
  letter-spacing: -0.01em;
  line-height:    1;
}

/* ─── CTA button row ─────────────────────────────────────── */
.hs-btns {
  display:     flex;
  gap:         clamp(10px, 1.4vw, 16px);
  flex-wrap:   wrap;
  align-items: center;
}

.hs-btn {
  padding:         clamp(13px, 1.6vh, 18px) clamp(28px, 3.2vw, 52px);
  border-radius:   50px;
  font-size:       clamp(11px, 1.15vw, 15px);
  font-family:     'Plus Jakarta Sans', sans-serif;
  cursor:          pointer;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  transition:      transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  white-space:     nowrap;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  line-height:     1;
  min-height:      clamp(44px, 5.2vh, 56px);
  min-width:       clamp(120px, 11vw, 170px);
}

/* Outline / ghost button */
.hs-btn-outline {
  border:             2px solid rgba(255, 255, 255, 0.9);
  background:         transparent;
  color:              #fff;
  font-weight:        400;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter:    blur(6px);
}

.hs-btn-outline:hover {
  background: rgba(255, 255, 255, 0.16);
  transform:  translateY(-2px);
}

/* Solid / filled button */
.hs-btn-solid {
  border:     2px solid rgba(255, 255, 255, 0.9);
  background: #fff;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.hs-btn-solid:hover {
  transform:  translateY(-2px) scale(1.03);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

/* ─── Bottom-right navigation arrows ─────────────────────── */
.hs-arrows {
  position:    absolute;
  bottom:      clamp(44px, 7vh, 80px);
  right:       clamp(24px, 5vw, 72px);
  z-index:     10;
  display:     flex;
  gap:         10px;
  align-items: center;
}

.hs-arrow {
  width:         clamp(36px, 4vw, 50px);
  height:        clamp(36px, 4vw, 50px);
  border-radius: 50%;
  border:        2px solid rgba(255, 255, 255, 0.7);
  background:    rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #fff;
  transition:    background 0.22s ease, transform 0.22s ease;
  flex-shrink:   0;
}

.hs-arrow:hover {
  background: rgba(255, 255, 255, 0.28);
  transform:  scale(1.1);
}

.hs-arrow svg {
  width:   13px;
  height:  13px;
  display: block;
}

/* ─── Bottom-centre dot indicators ───────────────────────── */
.hs-dots {
  position:  absolute;
  bottom:    clamp(16px, 2.5vh, 28px);
  left:      50%;
  transform: translateX(-50%);
  display:   flex;
  gap:       7px;
  z-index:   10;
  align-items: center;
}

.hs-dot {
  height:        7px;
  border-radius: 4px;
  border:        none;
  cursor:        pointer;
  padding:       0;
  flex-shrink:   0;
  background:    rgba(255, 255, 255, 0.38);
  width:         7px;
  transition:    width 0.3s ease, background 0.3s ease;
}

.hs-dot.active {
  width:      26px;
  background: rgba(255, 255, 255, 0.95);
}


/* ════════════════════════════════════════════════════════════
   TABLET  (769 px – 1024 px wide, portrait or landscape)
   Bridge between mobile portrait and full desktop.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  .hs-product-circle {
    width:  clamp(280px, 44vmin, 400px);
    height: clamp(280px, 44vmin, 400px);
  }

  .hs-word {
    font-size: clamp(110px, 22vw, 200px);
  }

  .hs-content {
    max-width: clamp(300px, 44vw, 440px);
    left:      clamp(24px, 4vw, 48px);
    bottom:    clamp(40px, 6vh, 64px);
  }

  .hs-arrows {
    right:  clamp(24px, 4vw, 48px);
    bottom: clamp(40px, 6vh, 64px);
  }

  .hs-btn {
    font-size:  13px;
    min-height: 48px;
  }
}


/* ════════════════════════════════════════════════════════════
   MOBILE  (≤ 768 px wide — portrait and landscape)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Stage: sized for visible hero (100svh - 172px top+bottom chrome) ── */
  .hs-center {
    bottom:   auto;
    height:   45vh;
    overflow: hidden;
  }

  /* ── Word: sits at BOTTOM of stage = below product image ──── *
   *  align-items: flex-end pushes the span to the stage floor.  *
   *  font-size uses vw so even "CITRUS" (6 chars) stays 1 line. *
   *  max-width + overflow: hidden = hard single-line backstop.   */
  .hs-word-wrap {
    align-items:    flex-end;
    padding-bottom: 10px;
  }

  .hs-word {
    /* JS fitWordFont() overrides this with the precise measured value.
       The clamp() here is just a safe CSS fallback before JS runs —
       lower minimum (20px) prevents very long titles from hard-clipping. */
    font-size:     clamp(20px, 15.5vw, 86px);
    max-width:     88vw;
    overflow:      hidden;
    text-overflow: clip;
    white-space:   nowrap;
  }

  /* ── Product: centred in the 60vh stage as before ────────── */
  .hs-product-circle {
    width:  clamp(175px, 47.5vw, 230px);
    height: clamp(175px, 47.5vw, 230px);
  }

  /* ── Content: always just below the center stage bottom ──── *
   *  .hs-center = height:45vh on mobile, so the word's lowest   *
   *  pixel is at 45vh from hero top. calc(45vh + 10px) gives a  *
   *  clean 10px clearance so the word never sits on the text.   */
  .hs-content {
    top:        calc(45vh + 10px);
    bottom:     auto;
    left:       20px;
    right:      20px;
    width:      calc(100% - 40px);
    max-width:  none;
    z-index:    10;
    gap:        14px !important;
    row-gap:    14px !important;
    overflow:   hidden;
  }

  .hs-desc {
    font-size:    13px;
    line-height:  1.65;
    -webkit-line-clamp: 2;
  }

  /* Extra padding-top as a direct, gap-independent spacer */
  .hs-price {
    font-size:     clamp(26px, 7vw, 34px);
    padding-top:   6px;
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
    max-width:     100%;
  }

  /* ── Buttons ─────────────────────────────────────────────── */
  .hs-btns {
    gap:         12px;
    flex-wrap:   nowrap;
    padding-top: 6px;
  }

  .hs-btn {
    font-size:       12px;
    padding:         14px 22px;
    min-height:      46px;
    min-width:       0;
    flex:            1 1 auto;
    justify-content: center;
    overflow:        hidden;
    text-overflow:   ellipsis;
  }

  /* ── Arrows hidden — swipe + dots navigate ───────────────── */
  .hs-arrows {
    display: none;
  }

  .hs-dot {
    height: 8px;
  }

  .hs-dots {
    bottom: 14px;
    gap:    8px;
  }
}


/* ════════════════════════════════════════════════════════════
   VERY SMALL  (≤ 360 px, e.g. Galaxy A / older SE)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {

  .hs-center {
    height: 44vh;
  }

  .hs-product-circle {
    width:  clamp(155px, 46vw, 185px);
    height: clamp(155px, 46vw, 185px);
  }

  /* Even smaller font so 6-char word fits on a 360px screen */
  .hs-word {
    font-size: clamp(46px, 14vw, 68px);
    max-width: 96vw;
  }

  .hs-content {
    top: 47%;
    gap: 8px;
  }

  .hs-price {
    font-size: 25px;
  }

  .hs-btn {
    font-size:  11px;
    padding:    11px 16px;
    min-height: 42px;
  }
}


/* ════════════════════════════════════════════════════════════
   MOBILE — LANDSCAPE  (height ≤ 500 px)
   ════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {

  .hs-center {
    bottom:   auto;
    height:   70vh;
    overflow: hidden;
  }

  .hs-word {
    font-size: clamp(56px, 18vh, 110px);
  }

  .hs-product-circle {
    width:  clamp(120px, 36vh, 175px);
    height: clamp(120px, 36vh, 175px);
  }

  .hs-content {
    top:       68%;
    bottom:    auto;
    left:      20px;
    right:     auto;
    max-width: min(50vw, 300px);
    gap:       5px;
  }

  .hs-desc {
    font-size:          12px;
    -webkit-line-clamp: 1;
  }

  .hs-price {
    font-size: clamp(18px, 5vh, 26px);
  }

  .hs-btn {
    font-size:  11px;
    padding:    9px 16px;
    min-height: 40px;
  }

  .hs-btns {
    gap: 7px;
  }

  .hs-arrows {
    display: flex;
    bottom:  12px;
    right:   16px;
  }

  .hs-arrow {
    width:  36px;
    height: 36px;
  }

  .hs-dots {
    bottom: 8px;
  }
}

/* ── Floating Ingredients (T5) ─────────────────────────────── */
.hs-ing-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 22;
}
.hs-ing-layer img {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.30));
  will-change: transform;
}
.t5-ing-0{top:8%;    right:6%;  width:clamp(50px,6.2vw,86px);animation:t5IngA 4.0s ease-in-out 0.0s  infinite}
.t5-ing-1{top:8%;    left:7%;   width:clamp(42px,5.2vw,72px);animation:t5IngB 5.3s ease-in-out 0.7s  infinite}
.t5-ing-2{top:42%;   right:2%;  width:clamp(44px,5.6vw,78px);animation:t5IngC 3.6s ease-in-out 1.4s  infinite}
.t5-ing-3{top:40%;   left:3%;   width:clamp(38px,4.8vw,66px);animation:t5IngD 6.0s ease-in-out 0.3s  infinite}
.t5-ing-4{bottom:9%; right:7%;  width:clamp(46px,5.8vw,80px);animation:t5IngE 4.5s ease-in-out 1.9s  infinite}
.t5-ing-5{bottom:8%; left:7%;   width:clamp(40px,5.0vw,70px);animation:t5IngF 5.6s ease-in-out 0.6s  infinite}
.t5-ing-6{top:23%;   right:20%; width:clamp(34px,4.3vw,60px);animation:t5IngA 3.3s ease-in-out 2.2s  infinite}
.t5-ing-7{top:23%;   left:20%;  width:clamp(32px,4.0vw,56px);animation:t5IngB 4.8s ease-in-out 1.1s  infinite}
@keyframes t5IngA{0%,100%{transform:translateY(0) rotate(0) scale(1)}33%{transform:translateY(-16px) rotate(11deg) scale(1.05)}66%{transform:translateY(8px) rotate(-6deg) scale(.97)}}
@keyframes t5IngB{0%,100%{transform:translateX(0) rotate(0) scale(1)}25%{transform:translateX(13px) rotate(-11deg) scale(1.07)}75%{transform:translateX(-9px) rotate(8deg) scale(.94)}}
@keyframes t5IngC{0%,100%{transform:rotate(0) scale(1) translateY(0)}50%{transform:rotate(18deg) scale(1.11) translateY(-11px)}}
@keyframes t5IngD{0%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(9px,-14px) rotate(13deg)}80%{transform:translate(-6px,6px) rotate(-8deg)}}
@keyframes t5IngE{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.14) rotate(-17deg)}}
@keyframes t5IngF{0%,100%{transform:translateY(0) rotate(0) scale(1)}20%{transform:translateY(-20px) rotate(9deg) scale(1.07)}55%{transform:translateY(-9px) rotate(-4deg) scale(.95)}78%{transform:translateY(-16px) rotate(6deg) scale(1.03)}}
@media(max-width:640px){.t5-ing-2,.t5-ing-3,.t5-ing-6,.t5-ing-7{display:none}}