@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

@layer base {
  body {
    @apply antialiased;
  }
}

@layer components {
  /* Custom vibrant button styles if needed beyond utility classes */
  .vibrant-shadow {
    box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1);
  }

  .vibrant-shadow:active {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
    transform: translate(6px, 6px);
  }
}

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

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Brutalist design accents */
.brutalist-border {
  border: 4px solid black;
}

.brutalist-card {
  @apply bg-white rounded-3xl border-4 border-black;
  box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);
}

.brutalist-card:hover {
  box-shadow: 12px 12px 0px 0px rgba(0, 0, 0, 1);
  transform: translate(-4px, -4px);
}

/* Introduction Page Styles */
.intro-hero-image {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-bottom: 4px solid black;
}

.intro-badge {
  @apply inline-block px-4 py-1 rounded-full border-2 border-black font-black text-xs uppercase tracking-widest mb-4;
}

.intro-title {
  @apply text-3xl md:text-6xl font-black text-slate-900 mb-4 md:mb-6 leading-tight;
}

.intro-description {
  @apply text-slate-600 text-base md:text-xl leading-relaxed mb-6 md:mb-10;
}

.start-btn {
  @apply w-full md:w-auto px-8 py-4 md:px-12 md:py-5 bg-pink-500 text-white font-black text-xl md:text-2xl rounded-2xl border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:bg-pink-600 active:translate-x-1 active:translate-y-1 active:shadow-none transition-all;
}

.stats-grid {
  @apply grid grid-cols-3 gap-0 border-t-4 border-black bg-slate-50;
}

.stat-item {
  @apply p-3 md:p-6 text-center border-r-4 last:border-r-0 border-black;
}

.stat-value {
  @apply block text-lg md:text-2xl font-black text-slate-900;
}

.stat-label {
  @apply block text-[10px] md:text-xs font-bold text-slate-500 uppercase tracking-wider;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Correct Animations */
@keyframes correct-pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.anim-correct-pop {
  animation: correct-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes correct-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
.anim-correct-bounce {
  animation: correct-bounce 0.6s ease;
}

@keyframes correct-rotate {
  0% {
    transform: rotate(-10deg) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}
.anim-correct-rotate {
  animation: correct-rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes correct-flip {
  0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-20deg);
  }
  60% {
    transform: perspective(400px) rotateY(10deg);
  }
  80% {
    transform: perspective(400px) rotateY(-5deg);
  }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
.anim-correct-flip {
  animation: correct-flip 0.8s ease-out forwards;
}

@keyframes correct-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 20px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}
.anim-correct-pulse {
  animation: correct-pulse 0.6s ease-out;
}

@keyframes correct-elastic {
  0% {
    transform: translateY(100%) scaleY(2);
    opacity: 0;
  }
  60% {
    transform: translateY(-20%) scaleY(0.9);
    opacity: 1;
  }
  80% {
    transform: translateY(10%) scaleY(1.1);
  }
  100% {
    transform: translateY(0) scaleY(1);
  }
}
.anim-correct-elastic {
  animation: correct-elastic 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Wrong Animations */
@keyframes wrong-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}
.anim-wrong-shake {
  animation: wrong-shake 0.5s ease-in-out;
}

@keyframes wrong-wobble {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
  75% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.anim-wrong-wobble {
  animation: wrong-wobble 0.4s ease-in-out;
}

@keyframes wrong-shrink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
    filter: grayscale(1);
  }
  100% {
    transform: scale(1);
  }
}
.anim-wrong-shrink {
  animation: wrong-shrink 0.4s ease;
}

@keyframes wrong-tilt {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-15deg);
  }
  40% {
    transform: rotate(12deg);
  }
  60% {
    transform: rotate(-8deg);
  }
  80% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0);
  }
}
.anim-wrong-tilt {
  animation: wrong-tilt 0.5s ease-in-out;
}

@keyframes wrong-glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-5px, 5px);
  }
  40% {
    transform: translate(-5px, -5px);
  }
  60% {
    transform: translate(5px, 5px);
  }
  80% {
    transform: translate(5px, -5px);
  }
  100% {
    transform: translate(0);
  }
}
.anim-wrong-glitch {
  animation: wrong-glitch 0.3s linear;
}

@keyframes wrong-sink {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0);
  }
}
.anim-wrong-sink {
  animation: wrong-sink 0.4s ease-in-out;
}

/* Particle/Juice Styles */
.juice-particle {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  animation: particle-float 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes particle-float {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translate(0, 0) scale(1.2) rotate(45deg);
  }
  100% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(0);
    opacity: 0;
  }
}

/* Screen Flashes */
.screen-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
}

.flash-success {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, transparent 70%);
  animation: flash-anim 0.6s ease-out forwards;
}

.flash-error {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%);
  animation: flash-anim 0.6s ease-out forwards;
}

@keyframes flash-anim {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  20% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* Glowing Feedback */
.glow-success {
  box-shadow:
    0 0 30px rgba(34, 197, 94, 0.5),
    8px 8px 0px 0px rgba(0, 0, 0, 1) !important;
}

.glow-error {
  box-shadow:
    0 0 30px rgba(239, 68, 68, 0.5),
    8px 8px 0px 0px rgba(0, 0, 0, 1) !important;
}

/* Big Emoji Pop */
.big-emoji-pop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8rem;
  z-index: 110;
  pointer-events: none;
  animation: emoji-pop-anim 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes emoji-pop-anim {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-20deg);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.2) rotate(10deg);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -150%) scale(0.5);
    opacity: 0;
  }
}

/* Ribbon / Confetti Streamers */
.ribbon-particle {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  width: 12px;
  height: 24px;
  animation: ribbon-fall 2.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes ribbon-fall {
  0% {
    transform: translate(0, 0) rotate(0deg) skew(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--tr)) skew(20deg);
    opacity: 0;
  }
}

/* Raindrop Style Particles */
.rain-particle {
  position: fixed;
  top: -50px;
  pointer-events: none;
  z-index: 100;
  animation: rain-fall var(--duration) linear forwards;
}

@keyframes rain-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0;
  }
}

/* Fountain Style Particles */
.fountain-particle {
  position: fixed;
  bottom: -50px;
  left: 50%;
  pointer-events: none;
  z-index: 100;
  animation: fountain-burst var(--duration) cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

@keyframes fountain-burst {
  0% {
    transform: translate(-50%, 0) scale(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translate(calc(-50% + var(--tx) * 0.2), calc(var(--ty) * 0.5)) scale(1.2);
  }
  100% {
    transform: translate(calc(-50% + var(--tx)), var(--ty)) scale(0) rotate(var(--tr));
    opacity: 0;
  }
}