/* THE FLUSH FACTOR — animations.css: alle keyframes van de interface. */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes screenEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes menuSlide { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: none; } }

@keyframes msgFade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(4px); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; transform: translateX(-50%) translateY(-3px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
@keyframes floatUp {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(-40px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.8); }
}
@keyframes comboPop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }
.combo-pop { animation: comboPop 0.4s ease; }

@keyframes usablePulse { from { box-shadow: 2px 2px 0 var(--ink), 0 0 0 0 rgba(43, 182, 115, 0.9); } to { box-shadow: 2px 2px 0 var(--ink), 0 0 0 7px rgba(43, 182, 115, 0.55); } }
@keyframes dangerPulse { from { opacity: 0.75; } to { opacity: 1; } }
@keyframes bucketFull { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.07) rotate(4deg); } }
@keyframes clogWarningPulse { from { opacity: 0.8; transform: translateX(-50%) scale(0.97); } to { opacity: 1; transform: translateX(-50%) scale(1.04); } }

@keyframes overflowShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(4px, 2px); }
}
.overflow-shake { animation: overflowShake 0.12s 5; }

@keyframes unclogBanner {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.4) rotate(-6deg); }
  18%  { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(2deg); }
  32%  { opacity: 1; transform: translateX(-50%) scale(1); }
  72%  { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.85) translateY(-28px); }
}
@keyframes levelUpBanner {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3) rotate(-8deg); }
  18%  { opacity: 1; transform: translateX(-50%) scale(1.2) rotate(2deg); }
  32%  { opacity: 1; transform: translateX(-50%) scale(1); }
  75%  { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.9) translateY(-36px); }
}

/* Chaos-effecten */
@keyframes chaosFloat { from { transform: translateY(0) rotate(-10deg); } to { transform: translateY(-18px) rotate(10deg); } }
@keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 0; } }
@keyframes flamingoBounce { from { transform: translateX(-50%) translateY(0) rotate(-5deg); } to { transform: translateX(-50%) translateY(-20px) rotate(5deg); } }
@keyframes discoFlash {
  0%   { background: rgba(255, 0, 128, 0.18); }
  25%  { background: rgba(0, 200, 255, 0.18); }
  50%  { background: rgba(255, 200, 0, 0.18); }
  75%  { background: rgba(0, 255, 100, 0.18); }
  100% { background: rgba(200, 0, 255, 0.18); }
}

/* Schoon! en winkel */
@keyframes sparklePop { 0% { opacity: 0; transform: scale(0.2) rotate(-20deg); } 30% { opacity: 1; transform: scale(1.2) rotate(8deg); } 100% { opacity: 0; transform: scale(0.7) translateY(-26px) rotate(20deg); } }
@keyframes confettiBurst { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--rot)); } }
@keyframes coinFly { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.5); } }
@keyframes scoreBump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-4deg); } }
@keyframes spotlight { 0%, 100% { box-shadow: var(--shadow); } 50% { box-shadow: var(--shadow), 0 0 0 6px var(--duck); } }

/* Minder beweging als het toestel daarom vraagt */
@media (prefers-reduced-motion: reduce) {
  .chaos-disco, .overflow-shake, .tool-btn.usable, .bucket-btn.full { animation: none; }
}

@keyframes rushPulse { from { transform: scale(0.97); } to { transform: scale(1.05); } }