/* =====================================================
   Piofly — Animations
   All @keyframes + money particle system + UI transitions
   ===================================================== */

/* ── Entrance ────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Loading / Pulse ─────────────────────────────────── */
@keyframes pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
@keyframes pulseSoft {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Gold glow ───────────────────────────────────────── */
@keyframes goldGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255, 138, 0,0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 138, 0,0); }
}
@keyframes goldPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255, 138, 0,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 138, 0,0); }
}
@keyframes blueGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,143,200,0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(0,143,200,0); }
}

/* ── Shimmer (progress bars, cards) ─────────────────── */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
@keyframes sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes borderFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── Finz Bird ───────────────────────────────────────── */
@keyframes finz-breathe {
  0%,100% { transform: translateX(-50%) scaleY(1) translateY(0); }
  50%      { transform: translateX(-50%) scaleY(1.025) translateY(-4px); }
}
@keyframes pio-happy {
  0%,100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  25%      { transform: translateX(-50%) translateY(-14px) rotate(-8deg); }
  75%      { transform: translateX(-50%) translateY(-12px) rotate(8deg); }
}
@keyframes pio-excited {
  0%,100% { transform: translateX(-50%) scale(1); }
  25%      { transform: translateX(-50%) scale(1.12) rotate(-4deg); }
  75%      { transform: translateX(-50%) scale(1.12) rotate(4deg); }
}
@keyframes pio-sad {
  0%,100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50%      { transform: translateX(-50%) translateY(3px) rotate(-4deg); }
}
@keyframes pio-motivation {
  0%,100% { transform: translateX(-50%) scale(1); filter: drop-shadow(0 0 0px var(--gold)); }
  50%      { transform: translateX(-50%) scale(1.08); filter: drop-shadow(0 0 12px var(--gold)); }
}
@keyframes pio-blink {
  0%,88%,100% { transform: scaleY(1); }
  92%,96%     { transform: scaleY(0.08); }
}
@keyframes pio-jump {
  0%,100% { transform: translateY(0); }
  40%      { transform: translateY(-20px) scale(1.08,0.95); }
  60%      { transform: translateY(-16px) scale(0.95,1.05); }
}
@keyframes prm-wing-l {
  0%,100% { transform: rotate(0deg); transform-origin: right center; }
  50%      { transform: rotate(-18deg); transform-origin: right center; }
}
@keyframes prm-wing-r {
  0%,100% { transform: rotate(0deg); transform-origin: left center; }
  50%      { transform: rotate(18deg); transform-origin: left center; }
}
@keyframes fai-aura-pulse {
  0%,100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.15); opacity: 0; }
}

/* ── Battle pass XP bar ──────────────────────────────── */
@keyframes bp-liquid {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes bp-confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ── Money particle system ───────────────────────────── */
@keyframes moneyFloat {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  70%  { opacity: 0.8; }
  100% { transform: translateY(-120px) rotate(30deg) scale(0.7); opacity: 0; }
}
@keyframes coinSpin {
  0%   { transform: translateY(0) rotateY(0deg); opacity: 1; }
  100% { transform: translateY(-140px) rotateY(720deg); opacity: 0; }
}
@keyframes dollarRain {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}
@keyframes sparkle {
  0%,100% { transform: scale(0) rotate(0deg); opacity: 0; }
  50%      { transform: scale(1) rotate(180deg); opacity: 1; }
}
@keyframes coinBounce {
  0%       { transform: translateY(0) scale(1); opacity: 1; }
  30%      { transform: translateY(-40px) scale(1.1); }
  55%      { transform: translateY(-15px) scale(0.95); }
  75%      { transform: translateY(-25px) scale(1.05); }
  90%      { transform: translateY(-8px) scale(0.98); }
  100%     { transform: translateY(-80px) scale(0.8); opacity: 0; }
}

/* ── Money particle DOM elements ─────────────────────── */
.money-particle {
  position: fixed; pointer-events: none; z-index: 9999;
  font-size: 1.4rem; user-select: none;
  animation: moneyFloat 1.4s ease-out forwards;
}
.money-particle.coin {
  animation: coinSpin 1.2s ease-out forwards;
}
.money-particle.rain {
  position: fixed;
  animation: dollarRain 2.2s ease-in forwards;
}
.money-sparkle {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold);
  animation: sparkle 0.6s ease-out forwards;
}

/* ── Confetti ────────────────────────────────────────── */
.confetti-piece {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 8px; height: 8px; border-radius: 2px;
  animation: bp-confetti-fall 2.5s ease-in forwards;
}

/* ── Animate-in class (scroll trigger) ──────────────── */
.animate-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}
.animate-in-delay-1 { animation-delay: 0.1s; }
.animate-in-delay-2 { animation-delay: 0.2s; }
.animate-in-delay-3 { animation-delay: 0.3s; }

/* ── Float cards (hero visual) ───────────────────────── */
@keyframes floatCard1 {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes floatCard2 {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
.float-card-animate-1 { animation: floatCard1 4s ease-in-out infinite; }
.float-card-animate-2 { animation: floatCard2 5s ease-in-out infinite; }

/* ── Number count-up animation ───────────────────────── */
@keyframes countUp {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.count-up { animation: countUp 0.4s ease-out forwards; }

/* ── Typing cursor ───────────────────────────────────── */
@keyframes blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}
.typing-cursor::after {
  content: '|'; animation: blink 0.9s ease-in-out infinite;
  color: var(--primary); font-weight: 300;
}

/* ── Background circle decoration ───────────────────── */
@keyframes rotateOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}