/* =====================================================================
   BADDEST BOTTLE — scroll-fx.css
   Additive, self-contained scroll animation layer.
   Safe to remove: delete this file + the <link> and <script> tags in
   index.html and the site reverts to its previous behavior.
   All effects respect prefers-reduced-motion.
   ===================================================================== */

/* ---- Reveal on scroll ------------------------------------------------ */
/* Elements start hidden/offset; .bbfx-in (added by scroll-fx.js when the
   element enters the viewport) animates them into place. */
[data-bbfx]{
  opacity:0;
  will-change:transform,opacity;
  transition:opacity .7s cubic-bezier(.16,.84,.44,1),
             transform .7s cubic-bezier(.16,.84,.44,1),
             filter .7s ease;
}
[data-bbfx].bbfx-in{
  opacity:1;
  transform:none;
  filter:none;
}

/* Directional / flavored variants (bold & flashy defaults) */
[data-bbfx="up"]      { transform:translateY(56px); }
[data-bbfx="down"]    { transform:translateY(-56px); }
[data-bbfx="left"]    { transform:translateX(-64px); }
[data-bbfx="right"]   { transform:translateX(64px); }
[data-bbfx="zoom"]    { transform:scale(.82); filter:blur(6px); }
[data-bbfx="pop"]     { transform:scale(.6) translateY(30px); filter:blur(2px); }
[data-bbfx="rise"]    { transform:translateY(90px) scale(.96); filter:blur(4px); }
[data-bbfx="tiltL"]   { transform:translateY(50px) rotate(-4deg) scale(.94); }
[data-bbfx="tiltR"]   { transform:translateY(50px) rotate(4deg) scale(.94); }
[data-bbfx="blurUp"]  { transform:translateY(48px); filter:blur(10px); }

/* Staggered children: parent gets data-bbfx-stagger, children fade in one
   after another. scroll-fx.js sets --bbfx-i on each child. */
[data-bbfx-stagger] > *{
  opacity:0;
  transform:translateY(44px) scale(.97);
  will-change:transform,opacity;
  transition:opacity .6s cubic-bezier(.16,.84,.44,1),
             transform .6s cubic-bezier(.16,.84,.44,1);
  transition-delay:calc(var(--bbfx-i, 0) * 90ms);
}
[data-bbfx-stagger].bbfx-in > *{
  opacity:1;
  transform:none;
}

/* ---- Parallax -------------------------------------------------------- */
/* scroll-fx.js writes --bbfx-py (px) onto these based on scroll position. */
[data-bbfx-parallax]{
  will-change:transform;
  transform:translate3d(0, var(--bbfx-py, 0px), 0);
}

/* ---- Scroll progress bar (flashy top accent) ------------------------- */
.bbfxProgress{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:100%;
  transform:scaleX(var(--bbfx-progress, 0));
  transform-origin:0 50%;
  background:linear-gradient(90deg,#e63329,#ff8a3d,#ffd23f);
  box-shadow:0 0 12px rgba(230,51,41,.7);
  z-index:2147483000;
  pointer-events:none;
}

/* ---- Hero entrance flair -------------------------------------------- */
.bbfx-hero-ready .bbHeroTitle,
.bbfx-hero-ready .bbHeroLead,
.bbfx-hero-ready .bbHeroActions,
.bbfx-hero-ready .bbHeroPills,
.bbfx-hero-ready .bbHeroVisual{
  animation:bbfxHeroIn .9s cubic-bezier(.16,.84,.44,1) both;
}
.bbfx-hero-ready .bbHeroLead   { animation-delay:.12s; }
.bbfx-hero-ready .bbHeroActions{ animation-delay:.24s; }
.bbfx-hero-ready .bbHeroPills  { animation-delay:.34s; }
.bbfx-hero-ready .bbHeroVisual { animation-delay:.10s; }
@keyframes bbfxHeroIn{
  from{ opacity:0; transform:translateY(40px) scale(.98); filter:blur(8px); }
  to  { opacity:1; transform:none; filter:none; }
}

/* Subtle floating on the hero bottle card for life */
.bbfx-float{
  animation:bbfxFloat 6s ease-in-out infinite;
}
@keyframes bbfxFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-12px); }
}

/* ---- 360 sticky showcase -------------------------------------------- */
/* When scroll-fx pins the 360 preview, it adds this class to give the
   frame a little glow/scale emphasis while scrubbing. */
.preview360Frame.bbfx-spinning{
  filter:drop-shadow(0 24px 60px rgba(230,51,41,.35));
  transition:filter .4s ease;
}

/* ---- Reduced motion: disable everything ----------------------------- */
@media (prefers-reduced-motion: reduce){
  [data-bbfx],
  [data-bbfx-stagger] > *{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
    animation:none !important;
  }
  [data-bbfx-parallax]{ transform:none !important; }
  .bbfx-hero-ready .bbHeroTitle,
  .bbfx-hero-ready .bbHeroLead,
  .bbfx-hero-ready .bbHeroActions,
  .bbfx-hero-ready .bbHeroPills,
  .bbfx-hero-ready .bbHeroVisual,
  .bbfx-float{ animation:none !important; }
  .bbfxProgress{ display:none; }
}