@import "tailwindcss";

:root {
  --background: #f5f3ff;
  --foreground: #1e1b4b;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-nunito), 'Nunito', sans-serif;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

/* ── Custom animations ────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

@keyframes bounce-in {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.06); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-6px); }
  80%       { transform: translateX(6px); }
}

@keyframes pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes star-spin {
  0%   { transform: rotate(0deg)   scale(0); opacity: 0; }
  50%  { transform: rotate(180deg) scale(1.3); opacity: 1; }
  100% { transform: rotate(360deg) scale(1);   opacity: 1; }
}

@keyframes confetti-drop {
  0%   { transform: translateY(-40px) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(120px) rotate(540deg); opacity: 0; }
}

@layer utilities {
  .animate-float      { animation: float      3s ease-in-out infinite; }
  .animate-bounce-in  { animation: bounce-in  0.55s ease-out forwards; }
  .animate-shake      { animation: shake      0.45s ease-in-out; }
  .animate-pop        { animation: pop        0.4s  ease-out  forwards; }
  .animate-star-spin  { animation: star-spin  0.8s  ease-out  forwards; }
}