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

@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&family=Poppins:wght@400;500;600;700&display=swap');

@layer base {
  :root {
    --background: 145 40% 8%;
    --foreground: 40 30% 95%;

    --card: 145 35% 12%;
    --card-foreground: 40 30% 95%;

    --popover: 145 35% 12%;
    --popover-foreground: 40 30% 95%;

    --primary: 0 72% 50%;
    --primary-foreground: 40 30% 98%;

    --secondary: 145 50% 25%;
    --secondary-foreground: 40 30% 95%;

    --muted: 145 30% 18%;
    --muted-foreground: 40 20% 70%;

    --accent: 43 96% 56%;
    --accent-foreground: 145 40% 8%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 145 30% 20%;
    --input: 145 30% 20%;
    --ring: 0 72% 50%;

    --radius: 1rem;

    /* Custom Christmas colors */
    --christmas-red: 0 72% 50%;
    --christmas-green: 145 50% 25%;
    --christmas-gold: 43 96% 56%;
    --christmas-snow: 200 30% 98%;
    --christmas-dark: 145 40% 8%;

    /* Gradients */
    --gradient-festive: linear-gradient(135deg, hsl(var(--christmas-red)) 0%, hsl(0, 65%, 35%) 100%);
    --gradient-gold: linear-gradient(135deg, hsl(43, 96%, 56%) 0%, hsl(35, 90%, 45%) 100%);
    --gradient-snow: linear-gradient(180deg, hsl(200, 30%, 98%) 0%, hsl(200, 20%, 90%) 100%);

    /* Shadows */
    --shadow-glow: 0 0 30px hsl(var(--christmas-red) / 0.4);
    --shadow-gold: 0 0 20px hsl(var(--christmas-gold) / 0.5);
  }

  .dark {
    --background: 145 40% 8%;
    --foreground: 40 30% 95%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-body;
    background-image: 
      radial-gradient(ellipse at top, hsl(145, 35%, 15%) 0%, transparent 50%),
      radial-gradient(ellipse at bottom, hsl(0, 50%, 15%) 0%, transparent 50%);
    min-height: 100vh;
  }
}

@layer utilities {
  .font-christmas {
    font-family: 'Henny Penny', cursive;
  }

  .font-body {
    font-family: 'Poppins', sans-serif;
  }

  .text-glow {
    text-shadow: 0 0 10px hsl(var(--christmas-gold) / 0.8),
                 0 0 20px hsl(var(--christmas-gold) / 0.6),
                 0 0 30px hsl(var(--christmas-gold) / 0.4);
  }

  .text-glow-red {
    text-shadow: 0 0 10px hsl(var(--christmas-red) / 0.8),
                 0 0 20px hsl(var(--christmas-red) / 0.6);
  }

  .box-glow {
    box-shadow: 0 0 30px hsl(var(--christmas-red) / 0.3),
                0 4px 20px hsl(0, 0%, 0% / 0.3);
  }

  .box-glow-gold {
    box-shadow: 0 0 30px hsl(var(--christmas-gold) / 0.4),
                0 4px 20px hsl(0, 0%, 0% / 0.3);
  }
}

/* Snowfall animation */
@keyframes snowfall {
  0% {
    transform: translateY(-10vh) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) translateX(20px);
    opacity: 0.3;
  }
}

@keyframes snowfall-slow {
  0% {
    transform: translateY(-10vh) translateX(0);
    opacity: 0.8;
  }
  100% {
    transform: translateY(110vh) translateX(-15px);
    opacity: 0.2;
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px hsl(var(--christmas-red) / 0.4);
  }
  50% {
    box-shadow: 0 0 40px hsl(var(--christmas-red) / 0.7);
  }
}

@keyframes countdown-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

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

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.animate-snowfall {
  animation: snowfall linear infinite;
}

.animate-snowfall-slow {
  animation: snowfall-slow linear infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-countdown {
  animation: countdown-pulse 1s ease-out forwards;
}

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

.animate-shimmer {
  background: linear-gradient(
    90deg,
    hsl(var(--christmas-gold) / 0) 0%,
    hsl(var(--christmas-gold) / 0.5) 50%,
    hsl(var(--christmas-gold) / 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

/* Listening indicator */
@keyframes listening-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.listening-ring {
  animation: listening-pulse 1.5s ease-out infinite;
}

/* Sound wave animation when voice detected */
@keyframes sound-wave {
  0%, 100% { 
    transform: scaleY(0.5); 
    opacity: 0.7;
  }
  50% { 
    transform: scaleY(1.8); 
    opacity: 1;
  }
}

.animate-sound-wave {
  animation: sound-wave 0.4s ease-in-out infinite;
}