/* ═══ CONFETTI ═══ */
.hb-confetti {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  animation: hb-confetti-drop 1.3s ease forwards;
}
@keyframes hb-confetti-drop {
  0%   { transform: translateY(0) rotate(0deg) scale(1);   opacity: 1; }
  100% { transform: translateY(220px) rotate(720deg) scale(.5); opacity: 0; }
}

/* ═══ FLY-TO-CART ═══ */
.hb-fly-emoji {
  position: fixed;
  font-size: 22px;
  pointer-events: none;
  z-index: 9997;
  animation: hb-fly-anim 0.7s ease-in forwards;
}
@keyframes hb-fly-anim {
  0%   { transform: scale(1.2) translate(0,0); opacity: 1; }
  60%  { transform: scale(0.8) translate(var(--fx), var(--fy)); opacity: 1; }
  100% { transform: scale(0.3) translate(var(--fx), var(--fy)); opacity: 0; }
}

/* ═══ FLOATING LEAVES ═══ */
.hb-leaf {
  position: absolute;
  font-size: 18px;
  opacity: 0.5;
  animation: hb-leaf-fall linear infinite;
  pointer-events: none;
  user-select: none;
}
@keyframes hb-leaf-fall {
  0%   { transform: translateY(-40px) rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.45; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

#hb-leaves-mount {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; /* BUG FIX #4: kept low so all UI sections (z-index ≥ 2) render above */
  overflow: hidden;
}
#hb-fly-mount {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9997;
  overflow: hidden;
}

/* ═══ CART BAR BOUNCE ═══ */
@keyframes hb-cart-bounce {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-6px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(-3px); }
}
#hb-cart-bar.hb-bounce {
  animation: hb-cart-bounce 0.4s ease;
}

/* ═══ ITEM GLOW ON ADD ═══ */
@keyframes hb-glow-pop {
  0%   { box-shadow: 0 0 0 0 rgba(56,178,106,0); }
  30%  { box-shadow: 0 0 0 8px rgba(56,178,106,0.45); }
  100% { box-shadow: 0 0 0 0 rgba(56,178,106,0); }
}
.hb-pcard.hb-glow { animation: hb-glow-pop 0.6s ease; }

/* ═══ PROGRESS BAR (top scroll) ═══ */
#hb-scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--green-glow), #25d366, var(--amber));
  z-index: 999999;
  transition: width 0.1s;
  pointer-events: none;
}

/* ═══ FADE IN ON SCROLL ═══ */
.hb-fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.42s ease, transform 0.42s ease;
}
.hb-fade-in.hb-visible {
  opacity: 1;
  transform: translateY(0);
}