/* =====================================================================
   BADDEST BOTTLE — pages-fx.css  (Phase 3)
   Fun/viral polish for the menu destinations (About, Social, Track, Cart,
   Login): zoom-pop modal entrances, animated headers, share buttons,
   confetti overlay, animated order-track timeline.
   Additive & revertible. Kill switch: ?nofx=1 / window.BB_DISABLE_FX.
   Respects prefers-reduced-motion.
   ===================================================================== */

/* ---- Modal ZOOM-POP entrances -------------------------------------- */
.loginModal.active .loginModalCard,
.loginModal.active .socialPageCard,
.loginModal.active .aboutModalCard,
.cartModal.active .loginModalCard,
.cartModal.active .cartModalCard{
  animation:bbModalPop .34s cubic-bezier(.16,.9,.3,1.15) both;
}
@keyframes bbModalPop{
  0%  { opacity:0; transform:translateY(26px) scale(.9); filter:blur(6px); }
  60% { opacity:1; filter:blur(0); }
  100%{ opacity:1; transform:none; }
}

/* Animated No Fear accent bar across the top of modal cards */
.loginModalCard, .socialPageCard, .aboutModalCard{ position:relative; overflow:hidden; }
.loginModal.active .loginModalCard::before,
.loginModal.active .socialPageCard::before,
.loginModal.active .aboutModalCard::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#e63329,#ff8a3d,#ffd23f,#e63329);
  background-size:200% 100%;
  animation:bbBarSlide 3.2s linear infinite;
  z-index:5;
}
@keyframes bbBarSlide{ to{ background-position:200% 0; } }

/* Stagger modal content sections in */
.loginModal.active .infoModalSection,
.loginModal.active .aboutModalLockup,
.loginModal.active .socialChallengeStrip{
  animation:bbFadeUp .5s cubic-bezier(.16,.84,.44,1) both;
}
.loginModal.active .infoModalSection:nth-of-type(2){ animation-delay:.08s; }
.loginModal.active .infoModalSection:nth-of-type(3){ animation-delay:.16s; }
.loginModal.active .aboutModalLockup{ animation-delay:.24s; }
@keyframes bbFadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ---- Confetti overlay ---------------------------------------------- */
#bbConfettiCanvas{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:2147483600;
}

/* ---- "Share the movement" buttons ---------------------------------- */
.bbShareRow{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-top:16px;
}
.bbShareLabel{
  font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  color:#ff8a3d; margin-right:2px;
}
.bbShareBtn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,138,61,.4);
  background:linear-gradient(150deg, rgba(230,51,41,.22), rgba(15,10,14,.7));
  color:#fff; font-size:12px; font-weight:800; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.bbShareBtn:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 8px 22px rgba(230,51,41,.4);
  background:linear-gradient(150deg, rgba(230,51,41,.4), rgba(15,10,14,.7));
}
.bbShareBtn svg{ width:15px; height:15px; }
.bbShareBtn.copied{ background:linear-gradient(150deg,#3ddc97,#1c8f63); border-color:#3ddc97; }

/* ---- Animated order-track timeline --------------------------------- */
.orderTrackTimeline li{
  opacity:0; transform:translateX(-14px);
}
.orderTrackTimeline.bb-animate li{
  animation:bbTrackIn .5s cubic-bezier(.16,.84,.44,1) both;
}
.orderTrackTimeline.bb-animate li:nth-child(1){ animation-delay:.05s; }
.orderTrackTimeline.bb-animate li:nth-child(2){ animation-delay:.20s; }
.orderTrackTimeline.bb-animate li:nth-child(3){ animation-delay:.35s; }
.orderTrackTimeline.bb-animate li:nth-child(4){ animation-delay:.50s; }
.orderTrackTimeline.bb-animate li:nth-child(5){ animation-delay:.65s; }
.orderTrackTimeline.bb-animate li:nth-child(6){ animation-delay:.80s; }
@keyframes bbTrackIn{
  from{ opacity:0; transform:translateX(-14px); }
  to  { opacity:1; transform:none; }
}
/* current/live stage pulse */
.orderTrackTimeline li.bb-live::marker,
.orderTrackTimeline li.bb-live{ color:#ff8a3d; }
.orderTrackTimeline li.bb-live{ animation:bbLivePulse 1.8s ease-in-out infinite; }
@keyframes bbLivePulse{ 0%,100%{ text-shadow:0 0 0 rgba(255,138,61,0);} 50%{ text-shadow:0 0 12px rgba(255,138,61,.7);} }

/* count-up numbers get a subtle emphasis while animating */
.bbCountUp{ font-variant-numeric:tabular-nums; }

/* =====================================================================
   FLASHY ABOUT — aurora glow, gradient title, pulsing callout, accent
   bars, and a logo shimmer.
   ===================================================================== */
.aboutModalCard{ position:relative; overflow:hidden; }
.aboutModalCard::after{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(40% 40% at 20% 20%, rgba(230,51,41,.30), transparent 60%),
    radial-gradient(45% 45% at 82% 28%, rgba(255,138,61,.24), transparent 60%),
    radial-gradient(42% 42% at 50% 92%, rgba(255,210,63,.18), transparent 60%);
  filter:blur(24px);
  z-index:0; pointer-events:none;
  animation:bbAboutAurora 14s ease-in-out infinite;
}
.aboutModalCard > *{ position:relative; z-index:1; }
@keyframes bbAboutAurora{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(3%,-3%,0) scale(1.12); }
}

/* Animated gradient title */
#aboutModalTitle{
  background:linear-gradient(90deg,#fff,#ff8a3d,#e63329,#ffd23f,#fff);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:bbAboutTitle 6s linear infinite;
}
@keyframes bbAboutTitle{ to{ background-position:250% 0; } }

/* Pulsing "END SINGLE SERVE PLASTIC USE" callout */
.aboutPlasticCallout{
  display:inline-block;
  text-shadow:0 0 12px rgba(230,51,41,.6);
  animation:bbAboutPulse 2.2s ease-in-out infinite;
}
.aboutModalLockupTagline{ animation:bbAboutPulse 3s ease-in-out infinite; }
@keyframes bbAboutPulse{
  0%,100%{ transform:scale(1); filter:brightness(1); }
  50%    { transform:scale(1.03); filter:brightness(1.28); }
}

/* Section titles get a glowing red accent bar */
.aboutModalCard .infoModalSectionTitle{ position:relative; padding-left:14px; }
.aboutModalCard .infoModalSectionTitle::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:4px;
  border-radius:2px; background:linear-gradient(180deg,#e63329,#ff8a3d);
  box-shadow:0 0 10px rgba(230,51,41,.75);
}

/* Logo lockup shimmer sweep */
.aboutModalLockup{ position:relative; overflow:hidden; }
.aboutModalLockup::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-20deg);
  animation:bbAboutShimmer 4.6s ease-in-out infinite;
}
@keyframes bbAboutShimmer{ 0%{ left:-60%; } 55%,100%{ left:140%; } }

@media (prefers-reduced-motion: reduce){
  .aboutModalCard::after, #aboutModalTitle, .aboutPlasticCallout,
  .aboutModalLockupTagline, .aboutModalLockup::after{
    animation:none !important;
  }
  #aboutModalTitle{ -webkit-text-fill-color:currentColor; color:#fff; }
}

@media (prefers-reduced-motion: reduce){
  .loginModal.active .loginModalCard,
  .loginModal.active .socialPageCard,
  .loginModal.active .aboutModalCard,
  .cartModal.active .loginModalCard,
  .loginModal.active .infoModalSection,
  .loginModal.active .aboutModalLockup,
  .loginModal.active .socialChallengeStrip,
  .orderTrackTimeline.bb-animate li,
  .loginModalCard::before, .socialPageCard::before, .aboutModalCard::before{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .orderTrackTimeline li{ opacity:1 !important; transform:none !important; }
  #bbConfettiCanvas{ display:none !important; }
}