/* ═══════════════════════════════════════════════════════════════════
   BHF Shared Animations — animations.css
   Single source of truth for all keyframes and animation utilities.
   Include in every page: <link rel="stylesheet" href="/animations.css">
   ═══════════════════════════════════════════════════════════════════ */

/* ── OVERLAY & MODAL ENTRANCE ── */
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes boxIn { from { opacity: 0; transform: scale(0.88) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ── PROGRESS & LOADING ── */
@keyframes progressShimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
@keyframes ldPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes ldFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── CARD ENTRANCE ── */
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ── SCROLL REVEAL ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ── FLOATING ELEMENTS ── */
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bgBreath { 0% { opacity: 0.8; } 100% { opacity: 1; filter: hue-rotate(6deg); } }
@keyframes treeFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 33% { transform: translateY(-12px) rotate(1deg); } 66% { transform: translateY(-7px) rotate(-0.5deg); } }

/* ── LEAF ANIMATIONS ── */
@keyframes leafSway { 0%, 100% { transform: rotate(var(--lr,0deg)) translateY(0) scale(1); } 33% { transform: rotate(calc(var(--lr,0deg) + var(--ls,8deg))) translateY(-7px) scale(1.02); } 66% { transform: rotate(calc(var(--lr,0deg) - calc(var(--ls,8deg) * 0.5))) translateY(-3px) scale(0.99); } }
@keyframes leafSway2 { 0%, 100% { transform: rotate(var(--lr,0deg)) translateY(0); } 40% { transform: rotate(calc(var(--lr,0deg) - var(--ls,6deg))) translateY(-10px); } 70% { transform: rotate(calc(var(--lr,0deg) + calc(var(--ls,6deg) * 0.7))) translateY(-4px); } }
@keyframes leafBob { 0%, 100% { transform: rotate(var(--lr,0deg)) scale(1) translateY(0); } 50% { transform: rotate(calc(var(--lr,0deg) + var(--ls,5deg))) scale(1.05) translateY(-12px); } }
@keyframes leafDrift { 0%, 100% { transform: rotate(var(--lr,0deg)) translateX(0); } 50% { transform: rotate(calc(var(--lr,0deg) + var(--ls,7deg))) translateX(8px); } }
@keyframes leafFall { 0% { opacity: 0; transform: translateY(-20px) rotate(0deg) translateX(0); } 8% { opacity: 0.5; } 88% { opacity: 0.2; } 100% { opacity: 0; transform: translateY(calc(100vh + 40px)) translateX(var(--sx,0)) rotate(var(--rot,360deg)); } }
@keyframes bgLeafFloat { 0% { opacity: 0; transform: translateY(100vh) translateX(0) rotate(0deg); } 10% { opacity: 0.3; } 90% { opacity: 0.12; } 100% { opacity: 0; transform: translateY(-80px) translateX(var(--sx,0)) rotate(var(--rot,360deg)); } }

/* ── PARTICLES ── */
@keyframes sparkUp { 0% { opacity: 0; transform: translate(0,0) scale(0.5); } 15% { opacity: 0.8; } 80% { opacity: 0.35; } 100% { opacity: 0; transform: translate(var(--dx,0),var(--dy,-60px)) scale(1.25); } }
@keyframes ffDrift { 0% { opacity: 0; transform: translate(0,0) scale(0.4); } 15% { opacity: var(--ffo,0.7); } 80% { opacity: var(--ffo,0.7); } 100% { opacity: 0; transform: translate(var(--ffx,40px),var(--ffy,-40px)) scale(1.4); } }
@keyframes confettiLeaf { 0% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); } 100% { opacity: 0; transform: translate(var(--tx,50px),var(--ty,-80px)) rotate(var(--tr,360deg)) scale(0.25); } }

/* ── CURSOR LEAF TRAIL ── */
@keyframes curFly { 0% { opacity: 0.9; transform: translate(0,0) rotate(0deg) scale(1); } 100% { opacity: 0; transform: translate(var(--lx,30px),var(--ly,-40px)) rotate(var(--lr,180deg)) scale(0.15); } }

/* ── GLITCH & EFFECTS ── */
@keyframes glitchFlash { 0% { transform: none; opacity: 1; } 15% { transform: skewX(-2.5deg) translateX(-4px) hue-rotate(80deg); opacity: 0.9; } 30% { transform: skewX(2deg) translateX(4px) hue-rotate(-80deg); opacity: 0.85; } 50% { transform: skewX(-1deg) translateX(-2px) scaleY(1.01) hue-rotate(40deg); opacity: 0.9; } 70% { transform: skewX(0.5deg); opacity: 0.95; } 100% { transform: none; opacity: 1; } }
@keyframes liveGlitch { 0%, 88%, 100% { transform: none; } 89% { transform: skewX(-4deg) hue-rotate(80deg); } 91% { transform: skewX(3deg) translateX(2px); } 93% { transform: none; } 95% { transform: translateX(-1px) skewX(1deg); } }
@keyframes cardSparkle { 0% { opacity: 0; transform: scale(0.4) rotate(0deg) translateY(0); } 30% { opacity: 1; } 70% { opacity: 0.6; } 100% { opacity: 0; transform: scale(1.1) rotate(var(--sr,180deg)) translateY(var(--sy,-20px)); } }
@keyframes dotBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.15; transform: scale(0.7); } }
@keyframes liveBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.2; transform: scale(0.8); } }
@keyframes twBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(82,212,77,0.6); } 50% { box-shadow: 0 0 0 5px rgba(82,212,77,0); } }
@keyframes numGlow { 0% { filter: drop-shadow(0 4px 20px rgba(242,174,46,0.25)); } 100% { filter: drop-shadow(0 8px 45px rgba(242,174,46,0.55)); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes ringPulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes scanLine { 0% { transform: translateY(-2px); opacity: 0; } 5% { opacity: 1; } 95% { opacity: 0.4; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes heroBreathe { 0% { opacity: 0.8; } 100% { opacity: 1; filter: hue-rotate(6deg); } }

/* ── SCROLL PROGRESS ── */
@keyframes scrollPulse { 0%, 100% { transform: scaleY(1); opacity: 0.5; } 50% { transform: scaleY(0.5); opacity: 1; } }

/* ── TICKER ── */
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── GLOW ── */
@keyframes glowPulse { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 1; transform: scale(1.02); } }
@keyframes orbPulse { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.8; } 50% { transform: translateX(-50%) scale(1.12); opacity: 1; } }
@keyframes titleLeafSpin { 0%, 100% { transform: rotate(15deg) scale(1); } 50% { transform: rotate(28deg) scale(1.1); } }

/* ── SKELETON SHIMMER ── */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes avShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── JOIN PAGE ORBS ── */
@keyframes orbFloat1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px,80px) scale(1.1); } }
@keyframes orbFloat2 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(80px,-60px) scale(1.08); } }
@keyframes orbFloat3 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,50px) scale(0.92); } }
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── NEW: FILTER CARD EXIT/ENTRANCE ── */
@keyframes cardExit { to { opacity: 0; transform: scale(0.92) translateY(10px); } }
@keyframes cardEnter { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ── NEW: FORM STEP TRANSITIONS ── */
@keyframes stepSlideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes stepSlideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-40px); } }
@keyframes stepSlideInBack { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes stepSlideOutBack { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }

/* ── NEW: SHAKE (validation error) ── */
@keyframes shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(5px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }

/* ── NEW: CONFETTI BURST ── */
@keyframes confettiBurst { 0% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); } 100% { opacity: 0; transform: translate(var(--cx,60px),var(--cy,-100px)) rotate(var(--cr,720deg)) scale(0.2); } }

/* ── NEW: PARALLAX HELPER ── */
.parallax-layer { will-change: transform; }

/* ── SCROLL REVEAL CLASSES ── */
.rv, .rv-l, .rv-r, .rv-up { opacity: 0; transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.rv { transform: translateY(28px); }
.rv-l { transform: translateX(-30px); }
.rv-r { transform: translateX(30px); }
.rv-up { transform: translateY(28px); }
.rv.on, .rv-l.on, .rv-r.on, .rv-up.on { opacity: 1; transform: none; }

/* ── NEW: FILTER ANIMATION CLASSES ── */
.cc.hiding { animation: cardExit 0.25s ease forwards; }
.cc.showing { animation: cardEnter 0.35s cubic-bezier(0.22,1,0.36,1) forwards; }

/* ── NEW: FORM STEP ANIMATION CLASSES ── */
.step-panel { position: relative; }
.step-panel.slide-out { animation: stepSlideOut 0.3s ease forwards; }
.step-panel.slide-in { animation: stepSlideIn 0.3s ease forwards; }
.step-panel.slide-out-back { animation: stepSlideOutBack 0.3s ease forwards; }
.step-panel.slide-in-back { animation: stepSlideInBack 0.3s ease forwards; }

/* ── NEW: SHAKE CLASS ── */
.shake { animation: shake 0.4s ease; }

/* ═══════════════════════════════════════════════════════════════════
   FEATURE SET 2 — 15 new features
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. 3D TILT ON CARDS ── */
.mcard-leaf-wrap { perspective: 800px; transform-style: preserve-3d; }
.mcard-leaf-wrap .mcard-leaf-bg { transition: transform 0.15s ease-out; will-change: transform; }

/* ── 2. TYPING EFFECT ── */
@keyframes typingCursor { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.tw-cursor { display:inline-block;width:2px;height:1.1em;background:var(--gold,#f2ae2e);margin-left:2px;vertical-align:text-bottom;animation:typingCursor 0.8s step-end infinite; }

/* ── 3. SCROLL PROGRESS BAR ── */
#scroll-progress { position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#f2ae2e,#6A5ACD,#52d44d);z-index:10000;width:0%;transition:width 0.1s linear;pointer-events:none; }

/* ── 4. STICKY HEADER SHRINK ── */
.nav { transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; }
.nav.stuck { padding: 0.4rem 1.5rem !important; background: rgba(5,16,10,0.97) !important; box-shadow: 0 2px 20px rgba(0,0,0,0.5) !important; backdrop-filter: blur(12px); }
.nav.stuck .n-logo-img { width: 32px !important; height: 32px !important; }
.nav.stuck .n-logo-text { font-size: 0.85rem !important; }

/* ── 5. ANIMATED STAT COUNTER ── */
@keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.stat-num { display: inline-block; }

/* ── 6. LIVE STATUS PULSE ── */
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(82,212,77,0.7); } 50% { box-shadow: 0 0 0 6px rgba(82,212,77,0); } }
.live-dot { width:8px;height:8px;border-radius:50%;background:#52d44d;display:inline-block;animation:livePulse 2s ease infinite; }

/* ── 7. IMAGE SKELETON LOADERS ── */
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 50%; }

/* ── 8. CURSOR TRAIL PARTICLES ── */
.cursor-particle { position:fixed;pointer-events:none;z-index:9999;font-size:14px;animation:curFly 0.8s ease forwards; }

/* ── 9. PAGE TRANSITION ── */
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
body { animation: pageFadeIn 0.4s ease-out; }

/* ── 10. BACK TO TOP ── */
#back-to-top { position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;border-radius:50%;background:rgba(242,174,46,0.15);border:1px solid rgba(242,174,46,0.3);color:#f2ae2e;font-size:1.2rem;cursor:pointer;z-index:9990;opacity:0;transform:translateY(20px);transition:opacity 0.3s,transform 0.3s,background 0.2s;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px); }
#back-to-top.visible { opacity:1;transform:translateY(0); }
#back-to-top:hover { background:rgba(242,174,46,0.3); }

/* ── 11. GRADIENT ANIMATION ON HERO ── */
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.hero-gradient { background-size: 200% 200%; animation: gradientShift 8s ease infinite; }

/* ── 12. HOVER GLOW ON NAV LINKS ── */
.n-link { position: relative; transition: color 0.2s; }
.n-link::after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: var(--gold, #f2ae2e); transition: width 0.3s ease, left 0.3s ease; border-radius: 2px; }
.n-link:hover::after, .n-link.nav-active::after { width: 100%; left: 0; }

/* ── 13. MEMBER CARD FLIP ── */
.card-flip-container { perspective: 1000px; }
.card-flip-inner { transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); transform-style: preserve-3d; position: relative; }
.card-flip-container.flipped .card-flip-inner { transform: rotateY(180deg); }
.card-flip-front, .card-flip-back { backface-visibility: hidden; }
.card-flip-back { transform: rotateY(180deg); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   WCAG 2.1 — disable all non-essential animations for motion-sensitive users
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rv, .rv-l, .rv-r, .rv-up { opacity: 1; transform: none; }
  .cc.hiding, .cc.showing { animation: none; }
  .step-panel.slide-out, .step-panel.slide-in,
  .step-panel.slide-out-back, .step-panel.slide-in-back { animation: none; }
  .shake { animation: none; }
  .tw-cursor { animation: none; opacity: 1; }
  #scroll-progress { display: none; }
  .cursor-particle { display: none; }
  .live-dot { animation: none; }
  .hero-gradient { animation: none; }
  body { animation: none; }
}