/* ================================================================
   BFPD — ANIMATIONS
   All @keyframes, scroll-triggered classes, transition utilities
   ================================================================ */

/* ===== FADE-UP (scroll triggered) ===== */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ===== EMBER PARTICLE ===== */
.ember {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: floatUp linear forwards;
}

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(1);
  }
  8% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(-100vh) translateX(var(--drift, 30px)) scale(0.2);
  }
}

/* ===== HOLOGRAPHIC BADGE IDLE ===== */
.hl-1 { animation: holoIdle1 6s ease-in-out infinite; }
.hl-2 { animation: holoIdle2 6s ease-in-out infinite; }
.hl-3 { animation: holoIdle3 6s ease-in-out infinite; }
.hl-4 { animation: holoIdle4 6s ease-in-out infinite; }
.hl-5 { animation: holoIdle5 6s ease-in-out infinite; }
.hl-6 { animation: holoIdle6 6s ease-in-out infinite; }
.hl-7 { animation: holoIdle7 6s ease-in-out infinite; }

@keyframes holoIdle1 {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
}
@keyframes holoIdle2 {
  0%, 100% { transform: rotate(10deg); }
  50% { transform: rotate(20deg); }
}
@keyframes holoIdle3 {
  0%, 100% { transform: rotate(20deg); }
  50% { transform: rotate(30deg); }
}
@keyframes holoIdle4 {
  0%, 100% { transform: rotate(30deg); }
  50% { transform: rotate(40deg); }
}
@keyframes holoIdle5 {
  0%, 100% { transform: rotate(40deg); }
  50% { transform: rotate(50deg); }
}
@keyframes holoIdle6 {
  0%, 100% { transform: rotate(50deg); }
  50% { transform: rotate(60deg); }
}
@keyframes holoIdle7 {
  0%, 100% { transform: rotate(60deg); }
  50% { transform: rotate(70deg); }
}

/* Holographic gradient layers */
.holo-badge {
  perspective: 800px;
  cursor: default;
  display: inline-block;
}
.holo-inner {
  position: relative;
  transition: transform 100ms ease-out;
  transform-style: preserve-3d;
}
.holo-inner svg {
  display: block;
}
.hl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: color-dodge;
  pointer-events: none;
  transform-origin: center;
}
.hl-1 { background: linear-gradient(0deg, transparent 30%, rgba(255,0,100,0.2) 50%, transparent 70%); }
.hl-2 { background: linear-gradient(30deg, transparent 30%, rgba(255,100,0,0.15) 50%, transparent 70%); }
.hl-3 { background: linear-gradient(60deg, transparent 30%, rgba(255,200,0,0.15) 50%, transparent 70%); }
.hl-4 { background: linear-gradient(90deg, transparent 30%, rgba(0,255,100,0.12) 50%, transparent 70%); }
.hl-5 { background: linear-gradient(120deg, transparent 30%, rgba(0,100,255,0.15) 50%, transparent 70%); }
.hl-6 { background: linear-gradient(150deg, transparent 30%, rgba(100,0,255,0.12) 50%, transparent 70%); }
.hl-7 { background: linear-gradient(180deg, transparent 30%, rgba(255,0,200,0.1) 50%, transparent 70%); }

/* ===== STRIPE ANIMATION (donate banner) ===== */
@keyframes stripeSlide {
  to { background-position: 1000px 0; }
}

/* ===== PULSE ===== */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.5); }
}

/* ===== SPIN ===== */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== CHECK DRAW ===== */
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

/* ===== SCALE-IN ===== */
.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}
.scale-in.in-view {
  opacity: 1;
  transform: scale(1);
}

/* ===== SLIDE-RIGHT ===== */
.slide-right {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.slide-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* ===== SLIDE-LEFT ===== */
.slide-left {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.slide-left.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* ===== HERO REVEAL ===== */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== CHEVRON BOUNCE ===== */
@keyframes chevronBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* ===== TWINKLE (stars) ===== */
@keyframes twinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-up, .scale-in, .slide-right, .slide-left {
    opacity: 1;
    transform: none;
  }
}