@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #0f172a;
  --foreground: #e2e8f0;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* ─── Budget River Animations ─────────────────────────── */

@keyframes waterFlow {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes riverCurrent {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -24; }
}

@keyframes droplet {
  0% { transform: translateY(0) scale(1); opacity: 0.8; }
  80% { opacity: 0.4; }
  100% { transform: translateY(50px) scale(0.2); opacity: 0; }
}

@keyframes ripple {
  0% { r: 2; opacity: 0.6; }
  100% { r: 14; opacity: 0; }
}

@keyframes waveFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes poolWave {
  0% { d: path("M0,8 Q15,4 30,8 T60,8 T90,8 V20 H0 Z"); }
  50% { d: path("M0,8 Q15,12 30,8 T60,8 T90,8 V20 H0 Z"); }
  100% { d: path("M0,8 Q15,4 30,8 T60,8 T90,8 V20 H0 Z"); }
}

@keyframes shimmer {
  0% { opacity: 0.3; }
  50% { opacity: 0.7; }
  100% { opacity: 0.3; }
}

@keyframes mergeSplash {
  0% { rx: 2; ry: 1; opacity: 0.5; }
  100% { rx: 20; ry: 4; opacity: 0; }
}