/* ═══════════════════════════════════════════════════════════════
   hero.css  –  URVI Phase 2 Hero Section
   Full-bleed warm wood-surface background, radial glow overlay,
   giant headline with SVG decorations, three tilted product bags.
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO WRAPPER ────────────────────────────────────────────── */

.hero-v2 {
  position: relative;
  width: 100%;
  overflow: visible;

  /* Two-zone layout: text content top-half, bags bottom-half */
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;

  /* Min height pushes bags into a generous lower zone */
  min-height: 100svh;

  /* Border flush-join with caution marquee below */
  border-bottom: none;
}

/* ── BACKGROUND LAYERS ───────────────────────────────────────── */

/* Layer 1 — bright mustard yellow base */
.hero-v2__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-primary);
}

/* Layer 2 — subtle comic/pop-art sunburst lines style */
.hero-v2__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    105deg,
    transparent 0px,
    transparent 20px,
    rgba(255, 105, 180, 0.06) 20px,
    rgba(255, 105, 180, 0.06) 22px
  );
  pointer-events: none;
}

/* Layer 3 — radial pop glow to contrast the text */
.hero-v2__radial {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse 72% 60% at 50% 28%,
    rgba(255, 255, 255, 0.45)  0%,   /* bright white center glow */
    rgba(255, 105, 180, 0.15) 60%,  /* pink ambient halo */
    transparent               100%
  );
  pointer-events: none;
}

/* Layer 4 — halftone dot texture for that pop-art print feel */
.hero-v2__halftone {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.06) 1.5px,
    transparent 1.5px
  );
  background-size: 24px 24px;
  pointer-events: none;
}

/* ── CONTENT (text + CTA) ────────────────────────────────────── */

.hero-v2__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  padding: var(--space-16) var(--space-8) var(--space-8);
}

/* Eyebrow pill */
.hero-v2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);

  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);

  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);

  animation: popIn 0.4s var(--ease-bounce) 0.05s both;
}

.hero-v2__eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* ── HEADLINE WRAPPER & DECORATIVE SVGs ──────────────────────── */

.hero-v2__headline-wrap {
  position: relative;
  display: inline-block;
}

/* Shared deco styles */
.hero-deco {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5));
}

/* Four-pointed sparkle — top left */
.hero-deco--tl {
  width: clamp(36px, 5vw, 64px);
  height: clamp(36px, 5vw, 64px);
  top: -10px;
  left: -20px;
  animation: floatSpin 8s ease-in-out infinite;
}

/* Triangle — top right */
.hero-deco--tr {
  width: clamp(28px, 4vw, 52px);
  height: clamp(28px, 4vw, 52px);
  top: -14px;
  right: -14px;
  animation: floatBob 5s ease-in-out 1s infinite;
}

/* Star — bottom left */
.hero-deco--bl {
  width: clamp(26px, 3.5vw, 46px);
  height: clamp(26px, 3.5vw, 46px);
  bottom: 10px;
  left: -10px;
  animation: floatBob 6s ease-in-out 0.5s infinite;
}

/* Circle target — bottom right */
.hero-deco--br {
  width: clamp(22px, 3vw, 40px);
  height: clamp(22px, 3vw, 40px);
  bottom: 14px;
  right: -10px;
  animation: floatSpin 10s linear infinite reverse;
}

@keyframes floatBob {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-10px) rotate(8deg); }
}

@keyframes floatSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── MAIN HEADLINE ───────────────────────────────────────────── */

.hero-v2__headline {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 13vw, 10rem);
  line-height: 0.93;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #FFFFFF;

  /* Multi-layer text shadow: black border pop + pink accent depth shadow */
  text-shadow:
    4px  4px  0px var(--color-ink),
    8px  8px  0px var(--color-accent-pink),
    0px  0px 30px rgba(255, 255, 255, 0.4);

  animation: heroHeadlineIn 0.6s var(--ease-snap) 0.1s both;
}

@keyframes heroHeadlineIn {
  from {
    opacity: 0;
    transform: translateY(40px) scaleY(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0)    scaleY(1);
  }
}

/* ── SUBLINE ─────────────────────────────────────────────────── */

.hero-v2__sub {
  font-family: var(--font-body);
  font-size: clamp(var(--text-base), 2.2vw, var(--text-xl));
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: 0.01em;
  animation: slideUp 0.5s var(--ease-snap) 0.22s both;
}

/* ── CTA CLUSTER ─────────────────────────────────────────────── */

.hero-v2__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  animation: slideUp 0.5s var(--ease-snap) 0.32s both;
}

/* Shop button styling matching design system */
.hero-v2__shop-btn {
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-12);
  box-shadow: var(--shadow-lg);
  gap: var(--space-3);
}

.hero-v2__shop-btn:hover {
  transform: translate(3px, 3px);
  box-shadow: var(--shadow-hover);
}

/* Stars + review count */
.hero-v2__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 40px;
}

.hero-v2__stars {
  font-size: var(--text-base);
  color: var(--color-accent-pink);
  letter-spacing: 2px;
}

.hero-v2__rating-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink-muted);
}

/* ── PRODUCT BAG SHOWCASE ────────────────────────────────────── */

.hero-v2__bags {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;

  /* Overlapping effect: negative margin pulls bags up */
  margin-top: -20px;
  padding-bottom: 80px;
  gap: 0;

  /* Container limit so bags don't spread too far on ultrawide */
  max-width: 1100px;
  width: 100%;
  margin-inline: auto;
}

/* ── INDIVIDUAL BAG WRAPPERS ─────────────────────────────────── */

.bag-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), z-index 0.4s step-end, opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.bag-wrap:hover {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), z-index 0s step-start;
}

/* Left bag — tilted -12°, slightly behind */
.bag-wrap--left {
  transform: rotate(-12deg) translateX(30px) translateY(20px);
  z-index: 5;
  margin-right: -40px;
}
.bag-wrap--left:hover {
  transform: scale(1.3) rotate(-6deg) translateY(-20px) !important;
  z-index: 100 !important;
}

/* Centre bag — upright, front, tallest */
.bag-wrap--centre {
  transform: translateY(-24px);
  z-index: 15;
}
.bag-wrap--centre:hover {
  transform: scale(1.3) translateY(-50px) !important;
  z-index: 100 !important;
}

.bag-wrap--right {
  transform: rotate(12deg) translateX(-30px) translateY(20px);
  z-index: 5;
  margin-left: -40px;
}
.bag-wrap--right:hover {
  transform: scale(1.3) rotate(6deg) translateY(-20px) !important;
  z-index: 100 !important;
}


/* ── BAG IMAGE ───────────────────────────────────────────────── */

.bag-img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  object-fit: contain;

  /* Crisp pop against the wood background */
  filter:
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.55))
    drop-shadow(0  4px  8px rgba(0, 0, 0, 0.30));

  transition:
    filter    var(--duration-slow) var(--ease-snap),
    transform var(--duration-slow) var(--ease-bounce);
}

.bag-wrap:hover .bag-img {
  filter:
    drop-shadow(0 28px 40px rgba(0, 0, 0, 0.65))
    drop-shadow(0  6px 12px rgba(0, 0, 0, 0.40));
}

/* Entrance animation — bags slide up from below */
.bag-wrap--left   { animation: bagSlideLeft   0.7s var(--ease-bounce) 0.5s both; }
.bag-wrap--centre { animation: bagSlideCentre 0.7s var(--ease-bounce) 0.4s both; }
.bag-wrap--right  { animation: bagSlideRight  0.7s var(--ease-bounce) 0.55s both; }

@keyframes bagSlideCentre {
  from { opacity: 0; transform: translateY(80px); }
  to   { opacity: 1; transform: translateY(-24px); }
}
@keyframes bagSlideLeft {
  from { opacity: 0; transform: rotate(-12deg) translateX(30px) translateY(100px); }
  to   { opacity: 1; transform: rotate(-12deg) translateX(30px) translateY(20px); }
}
@keyframes bagSlideRight {
  from { opacity: 0; transform: rotate(12deg) translateX(-30px) translateY(100px); }
  to   { opacity: 1; transform: rotate(12deg) translateX(-30px) translateY(20px); }
}

/* ── BAG LABEL (badge positioned below each bag) ─────────────── */

.bag-label {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xs);
}

/* ── FLAT SHADOW UNDER EACH BAG ─────────────────────────────── */

.bag-wrap__shadow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 28px;
  background: rgba(0, 0, 0, 0.38);
  border-radius: 50%;
  filter: blur(12px);
  z-index: -1;
}

.bag-wrap__shadow--centre {
  width: 75%;
  height: 36px;
  background: rgba(0, 0, 0, 0.48);
}

/* ── RESPONSIVE ADJUSTMENTS ──────────────────────────────────── */

/* Tablet / Small Laptops (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-v2__headline {
    font-size: clamp(4rem, 11vw, 6.5rem);
  }
  .bag-img {
    max-width: 220px;
  }
  .hero-v2__bags {
    gap: var(--space-4);
  }
}

/* Large Phones (481px - 767px) */
@media (max-width: 767px) {
  .hero-v2__content {
    padding-top: var(--space-12);
    padding-bottom: var(--space-4);
  }

  .hero-v2__headline {
    font-size: clamp(3.2rem, 14vw, 5.2rem);
  }

  .hero-v2__cta {
    width: 100%;
    max-width: 320px;
    flex-direction: column;
    gap: var(--space-4);
  }

  .hero-v2__shop-btn {
    width: 100%;
    justify-content: center;
  }

  .hero-v2__bags {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 0 !important;
    max-width: 100%;
    overflow: visible !important;
    padding-inline: var(--space-4);
    padding-bottom: 80px !important;
  }

  .bag-wrap {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), z-index 0.4s step-end !important;
  }

  .bag-img {
    max-width: 110px !important;
  }

  .bag-wrap--left {
    transform: rotate(-12deg) translateX(15px) translateY(10px) !important;
    margin-right: -20px !important;
    z-index: 5 !important;
  }

  .bag-wrap--centre {
    transform: translateY(-12px) !important;
    z-index: 15 !important;
  }

  .bag-wrap--right {
    transform: rotate(12deg) translateX(-15px) translateY(10px) !important;
    margin-left: -20px !important;
    z-index: 5 !important;
  }

  .bag-label {
    font-size: 8px !important;
    padding: 2px 6px !important;
    border-width: 1.5px !important;
    bottom: -6px !important;
  }

  /* Tap Interaction scale up exactly 2x */
  .hero-v2__bags.has-active .bag-wrap.active.bag-wrap--left {
    transform: scale(2) rotate(-6deg) translateY(-20px) !important;
    z-index: 100 !important;
  }
  .hero-v2__bags.has-active .bag-wrap.active.bag-wrap--centre {
    transform: scale(2) translateY(-40px) !important;
    z-index: 100 !important;
  }
  .hero-v2__bags.has-active .bag-wrap.active.bag-wrap--right {
    transform: scale(2) rotate(6deg) translateY(-20px) !important;
    z-index: 100 !important;
  }
}

/* Small Phones (≤ 480px) */
@media (max-width: 480px) {
  .hero-v2__content {
    padding-top: var(--space-8);
    gap: var(--space-4);
  }

  .hero-v2__headline {
    font-size: clamp(2.6rem, 16vw, 4rem);
  }

  .hero-deco {
    /* Reposition and scale down decorative SVGs to avoid clipping at 375px/320px */
    transform: scale(0.6);
  }

  .hero-deco--tl {
    top: -24px;
    left: -28px;
  }

  .hero-deco--tr {
    top: -28px;
    right: -24px;
  }

  .hero-deco--bl {
    bottom: -15px;
    left: -20px;
  }

  .hero-deco--br {
    bottom: -15px;
    right: -20px;
  }

  .hero-v2__bags {
    gap: 0 !important;
    padding-bottom: 0 !important;
    height: 220px !important; /* Scale down carousel height for small phones */
  }

  .bag-img {
    max-width: 95px !important;
  }
}

/* Extra Small Phones (320px) */
@media (max-width: 360px) {
  .hero-deco {
    display: none !important; /* Hide sparkles at extremely narrow widths to prevent horizontal scroll */
  }
  .hero-v2__bags {
    height: 195px !important; /* Scale down carousel height for extra small phones */
  }
  .bag-img {
    max-width: 80px !important;
  }
}

/* ── ACTIVE SELECTION STATES (ARCADE STYLE) ─────────────────── */

.hero-v2__bags.has-active .bag-wrap {
  opacity: 1.0;
}

.hero-v2__bags.has-active .bag-wrap.active {
  opacity: 1;
  z-index: 100 !important;
}

/* Enlarge active product bag by scale(2) and shift up */
.hero-v2__bags.has-active .bag-wrap.active.bag-wrap--left {
  transform: scale(2) rotate(-6deg) translateY(-20px) !important;
}
.hero-v2__bags.has-active .bag-wrap.active.bag-wrap--centre {
  transform: scale(2) translateY(-50px) !important;
}
.hero-v2__bags.has-active .bag-wrap.active.bag-wrap--right {
  transform: scale(2) rotate(6deg) translateY(-20px) !important;
}

/* Glowing highlight drop shadow on active product bag image */
.hero-v2__bags.has-active .bag-wrap.active .bag-img {
  filter: 
    drop-shadow(0 0 20px rgba(250, 204, 21, 0.8)) 
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.55));
}

/* ── DUAL LAYOUT DISPLAY TOGGLE ──────────────────────── */
.hero-v2__bags--desktop {
  display: flex !important;
}
.hero-v2__bags.mobile-marquee-wrapper {
  display: none !important;
}

/* Ensure jars are perfectly straight */
.bag-wrap--straight {
  transform: none !important;
  margin: 0 30px; /* Clear gap between jars */
  transition: transform 0.3s ease, z-index 0.3s ease;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

@media (max-width: 767px) {
  .hero-v2 {
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .hero-v2__content {
    padding-top: var(--space-12) !important;
    padding-bottom: 0 !important;
  }

  .hero-v2__rating {
    margin-bottom: 0 !important; /* Spacing handled strictly by marquee margin-top */
  }

  /* Reduce Shop Now button by 20% on mobile viewports */
  #hero-shop-btn {
    font-size: 14px !important; /* 20% smaller */
    height: 44px !important; /* 20% smaller */
    min-height: 44px !important;
    padding: 0 24px !important;
    box-shadow: 4px 4px 0 var(--color-ink) !important;
  }

  .hero-v2__bags--desktop {
    display: none !important;
  }

  /* 1. Lock the Wrapper: Strict height, prevent vertical scrolling/dragging, block vertical overflow */
  .hero-v2__bags.mobile-marquee-wrapper {
    display: block !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important; /* Allow normal page scrolling without dragging jars vertically */
    width: 100% !important;
    position: relative !important;
    height: 180px !important; /* Tight height to enforce exactly 10px padding above/below 160px jars */
    margin-top: 10px !important; /* Exactly 10px spacing above the slider (under ratings) */
    margin-bottom: 10px !important; /* Exactly 10px spacing below the slider (above warning ticker) */
    padding: 0 !important;
  }

  /* 2. Freeze the Track Alignment: Force display flex, align items center, and height 100% */
  .marquee-track {
    display: flex !important;
    align-items: center !important; /* Center-align jars vertically within the track */
    height: 100% !important;
    width: max-content;
    animation: infiniteScroll 12s linear infinite; /* Premium smooth animation speed */
  }

  /* Pauses the auto-scroll when a product is clicked */
  .marquee-track.paused {
    animation-play-state: paused;
  }

  /* Enforce uniform width and height for all jars to ensure spacing consistency */
  .bag-img {
    height: 160px !important; /* Scaled down to remove transparent canvas padding */
    width: 110px !important;  
    object-fit: contain !important; 
  }

  /* 3. Remove Vertical Margins/Transforms: Ensure absolute zero vertical movement */
  .bag-wrap--straight {
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    transition: transform 0.3s ease, z-index 0.3s ease;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center !important; /* Center-align inside track */
  }

  /* Straight pop-up effect on tap */
  .bag-wrap--straight.active {
    transform: scale(1.15) !important; /* Constrained scale to fit inside 180px height without clipping actual product */
    z-index: 50 !important;
  }

  /* Moves track exactly 50% left to loop the duplicated items perfectly */
  @keyframes infiniteScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
  }
}

/* Responsive Scaling for Small Screens */
@media (max-width: 480px) {
  .hero-v2__bags.mobile-marquee-wrapper {
    height: 150px !important; /* Tight height scaled down */
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .bag-img {
    height: 130px !important; /* Scale down proportionally for small viewports */
    width: 90px !important;
  }
  .bag-wrap--straight {
    margin-left: 12px !important;
    margin-right: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 360px) {
  .hero-v2__bags.mobile-marquee-wrapper {
    height: 130px !important; /* Tight height scaled down */
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .bag-img {
    height: 110px !important; /* Scale down proportionally for extra small viewports */
    width: 75px !important;
  }
  .bag-wrap--straight {
    margin-left: 8px !important;
    margin-right: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}