/* fx.css — keyframes voor brandend geld + binnenvliegend geld */

/* ===================== BRANDEND GELD ===================== */
.burn-stage {
  position: relative;
  width: 168px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 8px 16px rgba(120,40,0,0.25));
}
.burn-note {
  position: relative;
  transform-origin: 50% 80%;
  animation: burnNote 2000ms cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes burnNote {
  0%   { transform: translateY(12px) scale(0.6) rotate(0deg); opacity: 0; filter: brightness(1) saturate(1); }
  16%  { transform: translateY(0) scale(1.06) rotate(0deg); opacity: 1; filter: brightness(1) saturate(1); }
  30%  { transform: translateY(-2px) scale(1) rotate(-1deg); filter: brightness(1) saturate(1.05); }
  62%  { transform: translateY(-10px) scale(0.98) rotate(2deg); opacity: 1; filter: brightness(0.8) saturate(1.2) sepia(0.2); }
  100% { transform: translateY(-46px) scale(0.86) rotate(-3deg); opacity: 0; filter: brightness(0.22) saturate(0.4) sepia(0.6); }
}

.flames {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 150px; height: 70px; pointer-events: none;
  animation: flamesLife 2000ms ease-out forwards;
}
@keyframes flamesLife {
  0%, 10% { opacity: 0; }
  22%     { opacity: 1; }
  78%     { opacity: 1; }
  100%    { opacity: 0; }
}
.flame {
  position: absolute; bottom: 0;
  width: 38px; height: 58px;
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
  background: radial-gradient(ellipse at 50% 85%,
      #fff3b0 0%, #ffd23f 16%, #ff8a1f 42%, #ff3d00 70%, rgba(216,27,0,0) 100%);
  mix-blend-mode: screen;
  filter: blur(0.5px);
  transform-origin: 50% 100%;
}
.flame.fl0 { left: 32px;  animation: flick 360ms ease-in-out infinite alternate; }
.flame.fl1 { left: 56px;  height: 70px; animation: flick 300ms ease-in-out 60ms infinite alternate; }
.flame.fl2 { left: 78px;  height: 52px; animation: flick 420ms ease-in-out 30ms infinite alternate; }
.flame.fl3 { left: 44px;  height: 46px; width: 30px; animation: flick 260ms ease-in-out 90ms infinite alternate; }
.flame.fl4 { left: 70px;  height: 40px; width: 28px; animation: flick 340ms ease-in-out 120ms infinite alternate; }
@keyframes flick {
  0%   { transform: rotate(-45deg) scaleY(0.86) scaleX(1.02) translateY(2px); }
  100% { transform: rotate(-45deg) scaleY(1.12) scaleX(0.94) translateY(-3px); }
}

.embers { position: absolute; inset: 0; pointer-events: none; }
.ember {
  position: absolute; bottom: 14px;
  width: var(--esize); height: var(--esize); border-radius: 50%;
  background: radial-gradient(circle, #ffd23f 0%, #ff6a1f 60%, rgba(255,61,0,0) 100%);
  opacity: 0;
  animation: emberRise var(--ed) ease-out var(--edelay) infinite;
}
@keyframes emberRise {
  0%   { opacity: 0; transform: translate(0,0) scale(1); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--ex), -76px) scale(0.3); }
}
.burn-char { display: none; }

.burn-amount {
  margin-top: 4px;
  font-weight: 600; font-size: 26px; color: var(--ember);
  text-shadow: 0 2px 10px rgba(238,90,31,0.35);
  animation: burnAmount 2000ms cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes burnAmount {
  0%   { opacity: 0; transform: translateY(10px) scale(0.8); }
  22%  { opacity: 1; transform: translateY(0) scale(1); }
  72%  { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(0.96); }
}

/* ===================== BINNENVLIEGEND GELD ===================== */
.fly-bill {
  position: absolute; top: 76%;
  filter: drop-shadow(0 6px 12px rgba(15,110,79,0.22));
  animation: flyUp 1400ms cubic-bezier(0.3,0.9,0.3,1) var(--fdelay) forwards;
}
@keyframes flyUp {
  0%   { opacity: 0; transform: translateY(60px) scale(0.7) rotate(var(--frot)); }
  16%  { opacity: 1; }
  70%  { opacity: 1; transform: translateY(-300px) scale(0.52) rotate(calc(var(--frot) * 0.3)); }
  100% { opacity: 0; transform: translateY(-360px) scale(0.36) rotate(0deg); }
}
.fly-amount {
  position: absolute; top: 13%; left: 50%; transform: translateX(-50%);
  font-weight: 600; font-size: 30px; color: var(--income);
  text-shadow: 0 2px 12px rgba(18,147,106,0.3);
  animation: flyAmount 1500ms cubic-bezier(0.22,1,0.36,1) 200ms forwards;
  opacity: 0;
}
@keyframes flyAmount {
  0%   { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.7); }
  35%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08); }
  55%  { transform: translateX(-50%) translateY(0) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(1); }
}
.fly-glow {
  position: absolute; top: 6%; left: 50%; transform: translate(-50%,-50%);
  width: 260px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(18,147,106,0.22) 0%, rgba(18,147,106,0) 65%);
  animation: flyGlow 1500ms ease-out 150ms forwards; opacity: 0;
}
@keyframes flyGlow {
  0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; }
}

/* ===================== AFVINKEN / STEMPEL ===================== */
@keyframes checkPop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes stampIn {
  0%   { opacity: 0; transform: rotate(-10deg) scale(1.6); }
  60%  { opacity: 1; transform: rotate(-8deg) scale(0.95); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .burn-note, .flames, .ember, .burn-amount,
  .fly-bill, .fly-amount, .fly-glow { animation-duration: 1ms !important; }
}