/* ============================================================================
   BBG EFFECTS LIBRARY — reusable animations/effects ported from the V8 site.
   Link this file where you need effects:  <link rel="stylesheet" href="/website/css/effects.css">
   Every effect is a `.fx-*` class (plus its @keyframes). Uses the brand tokens
   --gold (#C9A84C), --gold-2 (#E5C96A), --cream (#f4efe6) with fallbacks.
   Reduced-motion users get everything calmed down (block at the bottom).
   ========================================================================== */

:root { --fx-gold:#C9A84C; --fx-gold-2:#E5C96A; --fx-cream:#f4efe6; }

/* ── 1. Shimmer text (headlines) ───────────────────────────────────────────
   Gold/cream gradient that sweeps across the text and loops SEAMLESSLY
   (0→200→0, so start = end → no visible cut). V8: H1 + CTA H2.
   Use on: big headlines.  <h1 class="fx-shimmer-text">…</h1>  */
@keyframes fx-shimmer { 0%{background-position:0% 50%;} 50%{background-position:200% 50%;} 100%{background-position:0% 50%;} }
.fx-shimmer-text{
  background:linear-gradient(90deg, var(--cream,#f4efe6) 0%, var(--gold-2,#E5C96A) 30%, var(--cream,#f4efe6) 50%, var(--gold,#C9A84C) 70%, var(--cream,#f4efe6) 100%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:fx-shimmer 4s linear infinite; will-change:background-position;
}

/* ── 2. Brand shimmer (wordmark/logo) ──────────────────────────────────────
   Periodic gold gradient (gold at both ends) sliding with ease-in-out — a
   subtler, premium shimmer for short text. V8: nav brand text.
   Use on: logo / short gold labels.  <span class="fx-brand-shimmer">BBG</span>  */
@keyframes fx-brandShimmer { 0%{background-position:200% center;} 100%{background-position:-200% center;} }
.fx-brand-shimmer{
  background:linear-gradient(120deg, var(--gold,#C9A84C) 0%, var(--gold-2,#E5C96A) 20%, #fff5d4 40%, var(--gold-2,#E5C96A) 60%, var(--gold,#C9A84C) 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:fx-brandShimmer 4s ease-in-out infinite; will-change:background-position;
}

/* ── 3. Fade-up entrance ───────────────────────────────────────────────────
   Fade + rise. V8: staggered hero elements. Pair with .fx-d1…5 for stagger.
   Use on: elements entering on load.  <div class="fx-up fx-d2">…</div>  */
@keyframes fx-up { from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:translateY(0);} }
.fx-up{ animation:fx-up .7s cubic-bezier(.22,.61,.36,1) both; }
.fx-d1{animation-delay:.08s}.fx-d2{animation-delay:.16s}.fx-d3{animation-delay:.24s}.fx-d4{animation-delay:.32s}.fx-d5{animation-delay:.4s}

/* ── 4. Scale-in / Modal-in ────────────────────────────────────────────────
   Gentle pop. V8: generic entrance (scaleIn) + modal entrance (modalIn).
   Use on: cards, modals.  <div class="fx-scale-in">…</div>  */
@keyframes fx-scaleIn { from{opacity:0;transform:scale(.95);} to{opacity:1;transform:scale(1);} }
.fx-scale-in{ animation:fx-scaleIn .45s ease both; }
@keyframes fx-modalIn { from{opacity:0;transform:translateY(30px) scale(.97);} to{opacity:1;transform:translateY(0) scale(1);} }
.fx-modal-in{ animation:fx-modalIn .4s cubic-bezier(.22,.61,.36,1) both; }

/* ── 5. Heartbeat pulse ────────────────────────────────────────────────────
   Continuous double-beat scale. V8: WhatsApp FAB.
   Use on: attention grabbers (FAB, badge).  <a class="fx-heartbeat">…</a>  */
@keyframes fx-heartbeat { 0%,100%{transform:scale(1);} 14%{transform:scale(1.08);} 28%{transform:scale(1);} 42%{transform:scale(1.05);} 70%{transform:scale(1);} }
.fx-heartbeat{ animation:fx-heartbeat 2.4s ease-in-out infinite; }

/* ── 6. Blink dot (status/pill dot) ────────────────────────────────────────
   Opacity pulse. V8: pill status dot.  Use on a small dot element.
   <span class="fx-dot"></span>  (dot styled below; or add .fx-blink to your own) */
@keyframes fx-blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.fx-blink{ animation:fx-blink 1.6s ease-in-out infinite; }
.fx-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--gold,#C9A84C); box-shadow:0 0 8px var(--gold,#C9A84C); animation:fx-blink 1.6s ease-in-out infinite; }

/* ── 7. Glow pulse (feature highlight) ─────────────────────────────────────
   Soft gold box-shadow breathing. V8: highlighted "Growth" plan card.
   Use on: the card you want to stand out.  <div class="card fx-glow">…</div>  */
@keyframes fx-featPulse { 0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0),0 0 40px rgba(201,168,76,.12);} 50%{box-shadow:0 0 0 6px rgba(201,168,76,.08),0 0 60px rgba(201,168,76,.22);} }
.fx-glow{ animation:fx-featPulse 3s ease-in-out infinite; }

/* ── 8. Save pulse (one-shot ring) ─────────────────────────────────────────
   Expanding ring flash for confirmations. V8: admin save feedback.
   Add the class briefly via JS, then remove.  el.classList.add("fx-save"); */
@keyframes fx-savePulse { 0%{box-shadow:0 0 0 0 rgba(201,168,76,.6);} 70%{box-shadow:0 0 0 10px rgba(201,168,76,0);} 100%{box-shadow:0 0 0 0 rgba(201,168,76,0);} }
.fx-save{ animation:fx-savePulse .8s ease-out; }

/* ── 9. Ripple (button click) ──────────────────────────────────────────────
   Radial ripple. V8: buttons. Needs a span appended at the click point:
   JS: create <span class="fx-ripple"> positioned at cursor inside a
   position:relative;overflow:hidden button. */
@keyframes fx-rippleOut { from{opacity:.4;transform:scale(0);} to{opacity:0;transform:scale(4);} }
.fx-ripple{ position:absolute; border-radius:50%; background:rgba(201,168,76,.4); pointer-events:none; transform:scale(0); animation:fx-rippleOut .55s ease-out forwards; }

/* ── 10. Aurora glow (ambient background blobs) ────────────────────────────
   Two slow-drifting radial glows behind a hero. V8: hero background.
   Use: put two .fx-aurora elements (a/b) inside a position:relative section. */
@keyframes fx-auroraA { 0%{transform:scale(1) translateY(0);opacity:.55;} 50%{transform:scale(1.18) translateY(-28px);opacity:.75;} 100%{transform:scale(1) translateY(0);opacity:.55;} }
@keyframes fx-auroraB { 0%{transform:scale(1.1) translateY(0);opacity:.45;} 50%{transform:scale(.9) translateY(20px);opacity:.65;} 100%{transform:scale(1.1) translateY(0);opacity:.45;} }
.fx-aurora{ position:absolute; width:60vw; max-width:640px; aspect-ratio:1; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(201,168,76,.25), transparent 60%); }
.fx-aurora.a{ top:-10%; left:-5%; animation:fx-auroraA 12s ease-in-out infinite; }
.fx-aurora.b{ bottom:-10%; right:-5%; animation:fx-auroraB 14s ease-in-out infinite; }

/* ── 11. Floating particles ────────────────────────────────────────────────
   Golden dots drifting up. V8: section particles. Spawn .sp children via JS
   inside .fx-particles (set each dot's left/animation-duration/delay).  */
@keyframes fx-particleFloat { 0%{transform:translateY(0) translateX(0) scale(1);opacity:0;} 10%{opacity:.7;} 50%{transform:translateY(-60px) translateX(15px) scale(1.2);opacity:.5;} 90%{opacity:.2;} 100%{transform:translateY(-120px) translateX(-10px) scale(.8);opacity:0;} }
.fx-particles{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.fx-particles .sp{ position:absolute; width:4px; height:4px; border-radius:50%; background:var(--gold,#C9A84C); box-shadow:0 0 6px rgba(201,168,76,.4); animation:fx-particleFloat linear infinite; }

/* ── 12. Spinning gradient border ──────────────────────────────────────────
   Rotating conic-gradient outline. V8: spinning borders on featured items.
   Use on a position:relative element.  <div class="fx-spin-border">…</div>  */
@property --fx-grad-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes fx-borderSpin { to{ --fx-grad-angle:360deg; } }
.fx-spin-border{ position:relative; border-radius:16px; }
.fx-spin-border::before{
  content:""; position:absolute; inset:0; padding:1.5px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from var(--fx-grad-angle), transparent 0%, var(--gold-2,#E5C96A) 15%, transparent 35%);
  animation:fx-borderSpin 4s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}

/* ── 13. Ticker (marquee) ──────────────────────────────────────────────────
   Continuous right-to-left scroll (duplicate the content twice inside .fx-ticker
   for a seamless loop). V8: announcement ticker bar. */
@keyframes fx-tickerRTL { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.fx-ticker{ display:flex; width:max-content; animation:fx-tickerRTL 22s linear infinite; }

/* ── 14. Price flip (value change) ─────────────────────────────────────────
   Small fade+rise when a number/price changes. V8: pricing toggle.
   Add via JS on change.  el.classList.add("fx-flip"); (remove on animationend) */
@keyframes fx-priceFlip { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }
.fx-flip{ animation:fx-priceFlip .35s ease both; }

/* ── 15. Shine sweep (buttons/CTAs) ────────────────────────────────────────
   A light streak that sweeps across periodically. Elegant on gold CTAs.
   Use on a button: <a class="btn btn-primary fx-shine">…</a>  */
@keyframes fx-shineSweep { 0%{left:-75%;} 60%,100%{left:125%;} }
.fx-shine{ position:relative; overflow:hidden; }
.fx-shine::after{
  content:""; position:absolute; top:0; left:-75%; width:55%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg); pointer-events:none;
  animation:fx-shineSweep 3.8s ease-in-out infinite;
}

/* ── Reduced motion: calm everything ───────────────────────────────────────*/
@media (prefers-reduced-motion: reduce){
  .fx-shimmer-text,.fx-brand-shimmer,.fx-heartbeat,.fx-blink,.fx-dot,.fx-glow,
  .fx-aurora,.fx-aurora.a,.fx-aurora.b,.fx-particles .sp,.fx-spin-border::before,.fx-ticker{ animation:none !important; }
  .fx-up,.fx-scale-in,.fx-modal-in{ animation-duration:.001ms !important; }
  .fx-shine::after{ animation:none !important; display:none; }
}