/* =====================================================================
   BADDEST BOTTLE — motion-fx.css
   Animated icons + per-section motion-graphic backgrounds.
   Additive & non-destructive. Pairs with motion-fx.js.
   Remove this file + its <link>/<script> tags to fully revert.
   Respects prefers-reduced-motion.
   ===================================================================== */

:root{
  --mfx-red:#e63329;
  --mfx-orange:#ff8a3d;
  --mfx-gold:#ffd23f;
  --mfx-eco:#3ddc97;
  --mfx-ice:#4fd1ff;
}

/* ---- Section stacking: put motion graphics BEHIND content ----------- */
.bbHero, .bbSection{ position:relative; }
.bbHero > *:not(.mfxLayer),
.bbSection > *:not(.mfxLayer){ position:relative; z-index:1; }

.mfxLayer{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  border-radius:inherit;
}

/* ---- Drifting gradient orbs (all sections) -------------------------- */
.mfxOrb{
  position:absolute;
  width:var(--s,340px);
  height:var(--s,340px);
  left:var(--x,10%);
  top:var(--y,10%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,
              var(--c1,rgba(230,51,41,.55)),
              transparent 62%);
  filter:blur(14px);
  opacity:.55;
  will-change:transform;
  animation:mfxDrift var(--d,18s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
@keyframes mfxDrift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  33%    { transform:translate3d(28px,-22px,0) scale(1.08); }
  66%    { transform:translate3d(-20px,18px,0) scale(.95); }
}

/* ---- Generic floating particles ------------------------------------ */
.mfxParticle{
  position:absolute;
  left:var(--x,50%);
  bottom:-40px;
  width:var(--s,14px);
  height:var(--s,14px);
  color:var(--c,var(--mfx-orange));
  opacity:0;
  will-change:transform,opacity;
  animation:mfxRise var(--d,9s) linear infinite;
  animation-delay:var(--delay,0s);
}
.mfxParticle svg{ width:100%; height:100%; display:block; }
@keyframes mfxRise{
  0%   { transform:translateY(0) translateX(0) rotate(0deg) scale(var(--sc,1)); opacity:0; }
  10%  { opacity:var(--op,.85); }
  90%  { opacity:var(--op,.85); }
  100% { transform:translateY(-120vh) translateX(var(--drift,20px)) rotate(var(--spin,180deg)) scale(var(--sc,1)); opacity:0; }
}

/* Confetti falls instead of rising (apparel) */
.mfxParticle.mfxFall{
  top:-40px; bottom:auto;
  animation-name:mfxFallAnim;
}
@keyframes mfxFallAnim{
  0%   { transform:translateY(0) rotate(0deg); opacity:0; }
  10%  { opacity:.9; }
  90%  { opacity:.9; }
  100% { transform:translateY(120vh) translateX(var(--drift,30px)) rotate(var(--spin,540deg)); opacity:0; }
}

/* Pulsing concentric grip rings (benefits) */
.mfxRing{
  position:absolute;
  left:var(--x,80%); top:var(--y,50%);
  width:var(--s,80px); height:var(--s,80px);
  margin:calc(var(--s,80px) / -2) 0 0 calc(var(--s,80px) / -2);
  border:2px solid var(--mfx-red);
  border-radius:50%;
  opacity:0;
  animation:mfxPulse var(--d,3.4s) ease-out infinite;
  animation-delay:var(--delay,0s);
}
@keyframes mfxPulse{
  0%  { transform:scale(.4); opacity:.0; }
  25% { opacity:.55; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ---- Animated icons ------------------------------------------------- */
.mfxIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.15em;
  height:1.15em;
  vertical-align:-0.18em;
  color:var(--mfx-orange);
}
.mfxIcon svg{ width:100%; height:100%; display:block; overflow:visible; }

/* Title icon badge */
.mfxTitleIcon{
  width:1.9rem; height:1.9rem;
  margin-right:.55rem;
  border-radius:12px;
  background:linear-gradient(140deg,rgba(230,51,41,.22),rgba(255,138,61,.12));
  border:1px solid rgba(255,138,61,.35);
  box-shadow:0 6px 18px rgba(230,51,41,.25);
  color:var(--mfx-gold);
  flex:0 0 auto;
  animation:mfxBadgeIn .6s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes mfxBadgeIn{
  from{ transform:translateY(8px) scale(.6) rotate(-12deg); opacity:0; }
  to  { transform:none; opacity:1; }
}
/* let title sit inline with its badge */
.bbSectionTitle.mfxHasIcon,
#bbMissionTitle.mfxHasIcon{ display:inline-flex; align-items:center; }

/* Card icon chips */
.mfxCardIcon{
  width:2.6rem; height:2.6rem;
  margin-bottom:.6rem;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,rgba(255,138,61,.18),rgba(230,51,41,.10));
  border:1px solid rgba(255,138,61,.30);
  color:var(--mfx-gold);
}

/* --- per-icon motion --- */
.mfxSpin   { animation:mfxSpin 6s linear infinite; transform-origin:50% 50%; }
@keyframes mfxSpin{ to{ transform:rotate(360deg); } }

.mfxTwinkle{ animation:mfxTwinkle 2.4s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes mfxTwinkle{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.18); opacity:.75; } }

.mfxBeat   { animation:mfxBeat 1.6s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes mfxBeat{ 0%,100%{ transform:scale(1);} 15%{ transform:scale(1.25);} 30%{ transform:scale(1);} 45%{ transform:scale(1.15);} }

.mfxBob    { animation:mfxBob 3s ease-in-out infinite; }
@keyframes mfxBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }

.mfxSwing  { animation:mfxSwing 3.2s ease-in-out infinite; transform-origin:50% 12%; }
@keyframes mfxSwing{ 0%,100%{ transform:rotate(-7deg);} 50%{ transform:rotate(7deg);} }

.mfxDraw   { stroke-dasharray:var(--len,120); stroke-dashoffset:var(--len,120);
             animation:mfxDraw 2.2s ease forwards; }
@keyframes mfxDraw{ to{ stroke-dashoffset:0; } }

/* Hero grip-ring accent behind the bottle card */
.mfxHeroRings{
  position:absolute; right:6%; top:12%;
  width:min(46%,420px); aspect-ratio:1; pointer-events:none;
}
.mfxHeroRings span{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(255,138,61,.28);
  animation:mfxHeroRing 5s ease-out infinite;
}
.mfxHeroRings span:nth-child(2){ animation-delay:1.6s; }
.mfxHeroRings span:nth-child(3){ animation-delay:3.2s; }
@keyframes mfxHeroRing{
  0%{ transform:scale(.35); opacity:0; }
  25%{ opacity:.6; }
  100%{ transform:scale(1); opacity:0; }
}

/* =====================================================================
   AGGRESSIVE "NO FEAR" MODE — angular, high-contrast, blood-red/black.
   ===================================================================== */

/* Harder, faster orbs with a red core */
.mfxLayer.mfxAggro .mfxOrb{
  filter:blur(8px);
  opacity:.7;
  animation-duration:calc(var(--d,18s) * .55);
}

/* Angular SHARDS — hard-edged red slivers that drift + rotate hard */
.mfxShard{
  position:absolute;
  left:var(--x,50%); top:var(--y,40%);
  width:var(--w,120px); height:var(--h,26px);
  background:linear-gradient(90deg,transparent,var(--c,rgba(230,51,41,.9)),transparent);
  clip-path:polygon(0 50%, 18% 0, 100% 42%, 82% 100%);
  opacity:0;
  filter:drop-shadow(0 0 6px rgba(230,51,41,.5));
  will-change:transform,opacity;
  animation:mfxShard var(--d,6s) cubic-bezier(.7,0,.3,1) infinite;
  animation-delay:var(--delay,0s);
}
@keyframes mfxShard{
  0%{ transform:translate3d(var(--fromx,-120px),0,0) rotate(var(--r0,-18deg)) scaleX(.4); opacity:0; }
  12%{ opacity:.9; }
  55%{ opacity:.9; }
  100%{ transform:translate3d(var(--tox,120px),0,0) rotate(var(--r1,14deg)) scaleX(1.2); opacity:0; }
}

/* SLASH streaks — thin diagonal lasers that whip across the section */
.mfxSlash{
  position:absolute;
  left:var(--x,-10%); top:var(--y,30%);
  width:var(--len,60%); height:2px;
  background:linear-gradient(90deg,transparent, #ff3b2f 40%, #ffd23f 70%, transparent);
  box-shadow:0 0 10px rgba(255,59,47,.8);
  transform:rotate(var(--ang,-22deg)) translateX(-120%);
  opacity:0;
  animation:mfxSlash var(--d,3.4s) cubic-bezier(.85,0,.15,1) infinite;
  animation-delay:var(--delay,0s);
}
@keyframes mfxSlash{
  0%{ transform:rotate(var(--ang,-22deg)) translateX(-140%); opacity:0; }
  8%{ opacity:1; }
  40%{ opacity:1; }
  55%{ transform:rotate(var(--ang,-22deg)) translateX(160%); opacity:0; }
  100%{ transform:rotate(var(--ang,-22deg)) translateX(160%); opacity:0; }
}

/* Faster, harder particle rise/fall in aggro sections */
.mfxLayer.mfxAggro .mfxParticle{ filter:drop-shadow(0 0 4px rgba(230,51,41,.5)); }

/* CHROMATIC GLITCH title — RGB split + hard jitter */
.mfxGlitch{
  animation:mfxGlitchShake 3.6s steps(1,end) infinite;
  will-change:transform,filter;
}
@keyframes mfxGlitchShake{
  0%,88%,100%{ transform:translate3d(0,0,0); filter:none; }
  89%{ transform:translate3d(-3px,1px,0); filter:drop-shadow(2px 0 0 #ff2a2a) drop-shadow(-2px 0 0 #14e0ff); }
  90%{ transform:translate3d(3px,-1px,0); filter:drop-shadow(-3px 0 0 #ff2a2a) drop-shadow(3px 0 0 #14e0ff); }
  91%{ transform:translate3d(-2px,0,0) skewX(4deg); filter:drop-shadow(2px 0 0 #ff2a2a) drop-shadow(-2px 0 0 #14e0ff); }
  92%{ transform:translate3d(2px,1px,0); filter:none; }
  93%{ transform:translate3d(0,0,0) skewX(-3deg); filter:drop-shadow(-2px 0 0 #ff2a2a) drop-shadow(2px 0 0 #14e0ff); }
  94%{ transform:none; filter:none; }
}

/* Aggressive constant micro-shake for icons */
.mfxShake{ animation:mfxShake 2.6s steps(1,end) infinite; transform-origin:50% 50%; }
@keyframes mfxShake{
  0%,80%,100%{ transform:translate(0,0) rotate(0); }
  82%{ transform:translate(-1.5px,1px) rotate(-4deg); }
  84%{ transform:translate(1.5px,-1px) rotate(4deg); }
  86%{ transform:translate(-1px,0) rotate(-3deg); }
  88%{ transform:translate(1px,1px) rotate(2deg); }
}

/* MISSION TICKER — aggressive scrolling slogan band */
.mfxTicker{
  position:absolute;
  left:0; width:100%;
  overflow:hidden;
  white-space:nowrap;
  pointer-events:none;
  z-index:0;
  opacity:.16;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mfxTicker.mfxTickerTop{ top:6px; }
.mfxTicker.mfxTickerBottom{ bottom:6px; }
.mfxTickerTrack{
  display:inline-block;
  white-space:nowrap;
  font-weight:900;
  font-size:clamp(28px,7vw,84px);
  letter-spacing:-.02em;
  line-height:1;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,59,47,.9);
  animation:mfxTickerScroll var(--td,26s) linear infinite;
}
.mfxTicker.mfxTickerRev .mfxTickerTrack{ animation-direction:reverse; }
@keyframes mfxTickerScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* Aggressive scanline flash over the hero */
.mfxScan{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(0deg,rgba(255,59,47,.05) 0 2px,transparent 2px 5px);
  mix-blend-mode:screen;
  opacity:.5;
  animation:mfxScanRoll 6s linear infinite;
}
@keyframes mfxScanRoll{ 0%{ background-position:0 0; } 100%{ background-position:0 40px; } }

/* Harder title badge: sharp corners, red glow */
.mfxLayer.mfxAggro ~ * .mfxTitleIcon,
.mfxTitleIcon.mfxAggroChip{
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(255,59,47,.5), 0 8px 22px rgba(230,51,41,.4);
}

/* =====================================================================
   CALMER MOTION — slow every background layer so it drifts instead of
   darting. Durations are scaled off each element's own --d/--td so the
   randomised per-element timing is preserved, just slower. Tweak the
   multipliers to taste (higher = slower/calmer).
   ===================================================================== */
.mfxOrb{ animation-duration:calc(var(--d,18s) * 1.6) !important; }
.mfxLayer.mfxAggro .mfxOrb{ animation-duration:calc(var(--d,18s) * 1.5) !important; }
.mfxShard{ animation-duration:calc(var(--d,6s) * 2) !important; }
.mfxSlash{ animation-duration:calc(var(--d,3.4s) * 2.4) !important; }
.mfxParticle{ animation-duration:calc(var(--d,9s) * 1.8) !important; }
.mfxRing{ animation-duration:calc(var(--d,3.4s) * 1.7) !important; }
.mfxTickerTrack{ animation-duration:calc(var(--td,26s) * 1.7) !important; }
.mfxScan{ animation-duration:11s !important; }
.mfxGlitch{ animation-duration:7s !important; }        /* glitches less often */
.mfxShake{ animation-duration:4.6s !important; }
.mfxHeroRings span{ animation-duration:8s !important; }
.mfxSpin{ animation-duration:12s !important; }

/* ---- Reduced motion: freeze it all --------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mfxOrb,.mfxParticle,.mfxRing,.mfxHeroRings span,
  .mfxSpin,.mfxTwinkle,.mfxBeat,.mfxBob,.mfxSwing,.mfxDraw,
  .mfxTitleIcon,.mfxShard,.mfxSlash,.mfxGlitch,.mfxShake,
  .mfxTickerTrack,.mfxScan{ animation:none !important; }
  .mfxParticle,.mfxRing,.mfxShard,.mfxSlash,.mfxScan{ display:none !important; }
  .mfxTicker{ display:none !important; }
  .mfxDraw{ stroke-dashoffset:0 !important; }
}