/* ============================================================
   KLEAN KOSMETICS — STORY HERO  (hero.css)
   Mobile-first. Link AFTER style.css:
     <link rel="stylesheet" href="/assets/css/style.css">
     <link rel="stylesheet" href="/assets/css/hero.css">

   Markup contract (index.html + hero.js must match this):

   <body class="reel-in-view">
   <section class="reel" id="reel" aria-roledescription="carousel" aria-label="Featured collections">
     <div class="reel__slides">
       <article class="reel__slide is-active" data-cat="womens">
         <picture class="reel__media">
           <source media="(max-width:768px)" srcset="..." data-hero-mobile="0">
           <img class="reel__img" src="..." alt="" data-hero-slot="0" fetchpriority="high">
         </picture>
         <div class="reel__scrim"></div>
         <div class="reel__copy">
           <h1 class="reel__title">
             <span class="reel__line" style="--i:0"><span>Line one</span></span>
             <span class="reel__line" style="--i:1"><span>Line two</span></span>
           </h1>
           <p class="reel__sub">One short sentence.</p>
           <div class="reel__actions">
             <a class="reel__cta" href="/shop?cat=womens">Shop women's</a>
             <a class="reel__wa" href="https://wa.me/..." aria-label="Order on WhatsApp">svg</a>
           </div>
         </div>
       </article>
       ... more slides ...
     </div>
     <button class="reel__tap reel__tap--prev" aria-label="Previous slide"></button>
     <button class="reel__tap reel__tap--next" aria-label="Next slide"></button>
     <div class="reel__bars">
       <button class="reel__bar is-current" aria-label="Go to slide 1"></button> ...
     </div>
     <nav class="reel__chips" aria-label="Shop by category">
       <a class="reel__chip" data-cat="mens" href="/shop?cat=mens">Men's</a> ...
     </nav>
   </section>

   State classes set by hero.js:
     .reel.is-paused   autoplay paused (hold, hidden tab, offscreen)
     .reel.is-holding  finger held down: copy + chips fade so the photo shows
     .reel[data-dir="next|prev"]  direction of the current transition
     slide: .is-active / .is-entering / .is-leaving
     bar:   .is-done / .is-current        chip: .is-current
     body.reel-in-view  hero is behind the navbar (white nav, hides floating WhatsApp on mobile)
   ============================================================ */

.reel {
  --reel-accent: var(--clr-purple);   /* follows the admin brand colour */
  --reel-ink: #0a0a0a;
  --reel-ease: cubic-bezier(.2, .8, .2, 1);
  --reel-dur: 6000ms;                 /* autoplay time per slide (hero.js can override) */
  --reel-wipe: 650ms;
  --reel-lead: 120ms;                 /* delay before the headline starts to rise */
  --reel-offset: 0px;                 /* no bottom nav: hero fills the full screen */
  --reel-chips-space: 76px;
  --reel-pad: 20px;

  position: relative;
  width: 100%;
  height: calc(100vh - var(--reel-offset));
  height: calc(100svh - var(--reel-offset));
  min-height: 480px;
  max-height: 920px;
  overflow: hidden;
  isolation: isolate;
  background: var(--reel-ink);
  color: #fff;
  font-family: var(--ff-body);
  -webkit-tap-highlight-color: transparent;
}

.reel a { text-decoration: none; }
.reel :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── SLIDES ──────────────────────────────────────────────────── */
.reel__slides { position: absolute; inset: 0; z-index: 1; }

.reel__slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  z-index: 0;
}
.reel__slide.is-leaving { visibility: visible; z-index: 1; }
.reel__slide.is-active  { visibility: visible; z-index: 2; }

.reel__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #1a1a1a;                /* shows while the photo loads */
}
.reel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Scrim: legibility only. Dark at the bottom (copy) and top (navbar). */
.reel__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10,10,10,.5) 0, rgba(10,10,10,0) 120px),
    linear-gradient(to top, rgba(10,10,10,.82) 0, rgba(10,10,10,.5) 36%, rgba(10,10,10,0) 72%);
}

/* ── COPY ────────────────────────────────────────────────────── */
.reel__copy {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: var(--reel-chips-space);
  padding: 0 var(--reel-pad);
  transition: opacity .2s ease;
}

.reel__title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 17.5vw, 7rem);   /* keep each line to about 10 characters */
  line-height: .88;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.reel__line { display: block; overflow: hidden; padding-top: .04em; }
.reel__line > span { display: block; }
.reel__line + .reel__line { padding-left: .5em; }   /* stepped second line gives the headline its rhythm */

.reel__sub {
  max-width: 30ch;
  margin-top: 14px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255,255,255,.9);
}

.reel__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.reel__cta {
  flex: 1 1 auto;
  max-width: 320px;
  height: 52px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--reel-accent);
  color: #fff;
  font-family: var(--ff-condensed);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .03em;
  transition: transform .15s ease, filter .15s ease;
}
.reel__cta:active { transform: scale(.97); }
.reel__wa {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--clr-wa);
  color: #fff;
  transition: transform .15s ease;
}
.reel__wa:active { transform: scale(.94); }
.reel__wa svg { width: 26px; height: 26px; }

@media (hover: hover) {
  .reel__cta:hover { filter: brightness(.9); }
  .reel__wa:hover  { transform: scale(1.06); }
}

/* ── ENTRANCE MOTION ─────────────────────────────────────────── */
/* Leaving slides keep their final state, so nothing moves while the next one wipes in. */
.reel__slide.is-active .reel__line > span {
  animation: reel-rise .9s var(--reel-ease) both;
  animation-delay: calc(var(--reel-lead) + var(--i, 0) * 90ms);
}
.reel__slide.is-active .reel__sub {
  animation: reel-fade .6s ease both;
  animation-delay: calc(var(--reel-lead) + 300ms);
}
.reel__slide.is-active .reel__actions {
  animation: reel-fade .6s ease both;
  animation-delay: calc(var(--reel-lead) + 400ms);
}
.reel__slide.is-leaving .reel__line > span,
.reel__slide.is-leaving .reel__sub,
.reel__slide.is-leaving .reel__actions { animation: none; }

/* Slide change: the new slide wipes in from the side that was tapped. */
.reel[data-dir="next"] .reel__slide.is-entering { animation: reel-wipe-next var(--reel-wipe) var(--reel-ease) both; --reel-lead: calc(var(--reel-wipe) * .5); }
.reel[data-dir="prev"] .reel__slide.is-entering { animation: reel-wipe-prev var(--reel-wipe) var(--reel-ease) both; --reel-lead: calc(var(--reel-wipe) * .5); }
.reel[data-dir="next"] .reel__slide.is-entering .reel__img { animation: reel-img-next var(--reel-wipe) var(--reel-ease) both; }
.reel[data-dir="prev"] .reel__slide.is-entering .reel__img { animation: reel-img-prev var(--reel-wipe) var(--reel-ease) both; }

@keyframes reel-rise      { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes reel-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes reel-fill      { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes reel-wipe-next { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes reel-wipe-prev { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes reel-img-next  { from { transform: translateX(14%) scale(1.08); } to { transform: none; } }
@keyframes reel-img-prev  { from { transform: translateX(-14%) scale(1.08); } to { transform: none; } }

/* ── TAP ZONES (left third = back, rest = forward) ───────────── */
/* They stop above the buttons and chips so those stay tappable. */
.reel__tap {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: calc(var(--reel-chips-space) + 64px);
  background: none;
  border: 0;
  padding: 0;
}
.reel__tap--prev { left: 0; width: 34%; }
.reel__tap--next { left: 34%; right: 0; }
.reel__tap:focus-visible { outline-offset: -6px; }

/* ── PROGRESS BARS ───────────────────────────────────────────── */
.reel__bars {
  position: absolute;
  z-index: 5;
  top: calc(var(--navbar-h) + 2px);
  left: 0;
  right: 0;
  display: flex;
  gap: 4px;
  padding: 0 var(--reel-pad);
}
.reel__bar {
  position: relative;
  flex: 1;
  height: 24px;                       /* tap target; the visible bar is 3px */
  padding: 0;
  border: 0;
  background: none;
}
.reel__bar::before,
.reel__bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
}
.reel__bar::before { background: rgba(255,255,255,.32); }
.reel__bar::after  { background: #fff; transform: scaleX(0); transform-origin: left; }
.reel__bar.is-done::after { transform: scaleX(1); }
.reel__bar.is-current::after { animation: reel-fill var(--reel-dur) linear forwards; }
.reel.is-paused .reel__bar.is-current::after { animation-play-state: paused; }

/* ── CATEGORY CHIPS ──────────────────────────────────────────── */
.reel__chips {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  gap: 8px;
  padding: 0 var(--reel-pad);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  transition: opacity .2s ease;
}
.reel__chips::-webkit-scrollbar { display: none; }
.reel__chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255,255,255,.5);
  background: rgba(10,10,10,.5);
  color: #fff;
  font-family: var(--ff-condensed);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .03em;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.reel__chip.is-current { background: #fff; border-color: #fff; color: var(--reel-ink); }

/* Holding a finger down hides the UI so the photo can be seen. */
.reel.is-holding .reel__copy,
.reel.is-holding .reel__chips { opacity: 0; }

/* ── NAVBAR OVER THE HERO ────────────────────────────────────── */
/* The navbar is transparent, so it needs light text while the hero is behind it. */
body.reel-in-view .navbar__logo,
body.reel-in-view .navbar__nav a,
body.reel-in-view .navbar__cart { color: #fff; }
body.reel-in-view .navbar__nav a::after { background: #fff; }
body.reel-in-view .hamburger span { background: #fff; }

/* The hero has its own WhatsApp button, so hide the floating one while it is on screen. */
@media (max-width: 768px) {
  .float-wa { transition: opacity .25s ease, transform .25s ease; }
  body.reel-in-view .float-wa { opacity: 0; transform: scale(.8); pointer-events: none; }
}

/* ── TABLET / SMALL LAPTOP ───────────────────────────────────── */
@media (min-width: 769px) {
  .reel { --reel-pad: 40px; }
  .reel__title { font-size: clamp(5rem, 12vw, 8rem); }
}

/* ── SHORT LANDSCAPE PHONES ──────────────────────────────────── */
@media (max-height: 560px) {
  .reel { min-height: 440px; }
  .reel__title { font-size: clamp(2.6rem, 11vh, 4.5rem); }
  .reel__sub { display: none; }
}

/* ── DESKTOP: split layout, headline overlaps the photo edge ─── */
@media (min-width: 900px) {
  .reel {
    --reel-pad: max(48px, 5vw);
    min-height: 640px;
    height: min(100svh, 880px);
  }
  .reel__slide { background: var(--reel-ink); }
  .reel__media { left: 38%; }
  .reel__scrim {
    background:
      linear-gradient(to bottom, rgba(10,10,10,.5) 0, rgba(10,10,10,0) 140px),
      linear-gradient(90deg, var(--reel-ink) 0, var(--reel-ink) 38%, rgba(10,10,10,.6) 38%, rgba(10,10,10,0) 72%);
  }
  .reel__copy {
    left: var(--reel-pad);
    right: auto;
    bottom: 132px;
    width: min(62vw, 900px);
    padding: 0;
  }
  .reel__title { font-size: clamp(6.5rem, 10.5vw, 11rem); }
  .reel__sub { max-width: min(30ch, calc(38vw - var(--reel-pad) - 16px)); }
  .reel__actions { max-width: calc(38vw - var(--reel-pad) - 16px); }
  .reel__cta { flex: 0 1 auto; }

  .reel__tap { top: var(--navbar-h); bottom: 0; }
  .reel__tap--prev { left: 38%; right: auto; width: 22%; cursor: w-resize; }
  .reel__tap--next { left: 60%; right: 0; cursor: e-resize; }

  .reel__bars {
    top: auto;
    bottom: 92px;
    left: var(--reel-pad);
    right: auto;
    width: min(340px, 26vw);
    padding: 0;
  }
  .reel__chips {
    left: var(--reel-pad);
    right: auto;
    bottom: 28px;
    width: calc(38% - var(--reel-pad));
    padding: 0;
    flex-wrap: wrap;
    overflow: visible;
  }
}

/* ── REDUCED MOTION ──────────────────────────────────────────── */
/* hero.js also skips autoplay in this mode; people move through slides themselves. */
@media (prefers-reduced-motion: reduce) {
  .reel *, .reel *::before, .reel *::after {
    animation: none !important;
    transition: none !important;
  }
  .reel__bar.is-current::after { transform: scaleX(1); }
}