/**
 * Christmas Theme CSS
 * Lightweight CSS3 animations and styling for December theme
 * Only loads when isChristmasSeason is true
 */

/* Christmas Color Variables */
:root {
  --christmas-red: #dc2626;
  --christmas-green: #16a34a;
  --christmas-red-light: #ef4444;
  --christmas-green-light: #22c55e;
}

/* Snowflake Container */
.christmas-snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Base Snowflake Styles */
.snowflake {
  position: absolute;
  color: white;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  user-select: none;
  pointer-events: none;
  will-change: transform;
  opacity: 0.6;
}

/* Snowflake Animation */
@keyframes snowfall {
  0% {
    transform: translateY(-100vh) translateX(0);
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) translateX(50px);
    opacity: 0.3;
  }
}

@keyframes snowfall-reverse {
  0% {
    transform: translateY(-100vh) translateX(0);
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) translateX(-50px);
    opacity: 0.3;
  }
}

/* Individual Snowflake Variations */
.snowflake-1 { animation: snowfall 15s linear infinite; animation-delay: 0s; left: 10%; font-size: 0.5em; }
.snowflake-2 { animation: snowfall-reverse 18s linear infinite; animation-delay: 1s; left: 20%; font-size: 0.6em; }
.snowflake-3 { animation: snowfall 12s linear infinite; animation-delay: 2s; left: 30%; font-size: 0.7em; }
.snowflake-4 { animation: snowfall-reverse 20s linear infinite; animation-delay: 0.5s; left: 40%; font-size: 0.5em; }
.snowflake-5 { animation: snowfall 16s linear infinite; animation-delay: 1.5s; left: 50%; font-size: 0.8em; }
.snowflake-6 { animation: snowfall-reverse 14s linear infinite; animation-delay: 2.5s; left: 60%; font-size: 0.6em; }
.snowflake-7 { animation: snowfall 19s linear infinite; animation-delay: 0.8s; left: 70%; font-size: 0.5em; }
.snowflake-8 { animation: snowfall-reverse 17s linear infinite; animation-delay: 1.8s; left: 80%; font-size: 0.7em; }
.snowflake-9 { animation: snowfall 13s linear infinite; animation-delay: 2.2s; left: 90%; font-size: 0.6em; }
.snowflake-10 { animation: snowfall-reverse 21s linear infinite; animation-delay: 0.3s; left: 15%; font-size: 0.5em; }
.snowflake-11 { animation: snowfall 15s linear infinite; animation-delay: 1.2s; left: 25%; font-size: 0.7em; }
.snowflake-12 { animation: snowfall-reverse 18s linear infinite; animation-delay: 2.8s; left: 35%; font-size: 0.6em; }
.snowflake-13 { animation: snowfall 16s linear infinite; animation-delay: 0.6s; left: 45%; font-size: 0.5em; }
.snowflake-14 { animation: snowfall-reverse 14s linear infinite; animation-delay: 1.4s; left: 55%; font-size: 0.8em; }
.snowflake-15 { animation: snowfall 20s linear infinite; animation-delay: 2.1s; left: 65%; font-size: 0.6em; }
.snowflake-16 { animation: snowfall-reverse 17s linear infinite; animation-delay: 0.9s; left: 75%; font-size: 0.5em; }
.snowflake-17 { animation: snowfall 13s linear infinite; animation-delay: 1.7s; left: 85%; font-size: 0.7em; }
.snowflake-18 { animation: snowfall-reverse 19s linear infinite; animation-delay: 2.4s; left: 95%; font-size: 0.6em; }
.snowflake-19 { animation: snowfall 15s linear infinite; animation-delay: 0.4s; left: 5%; font-size: 0.5em; }
.snowflake-20 { animation: snowfall-reverse 18s linear infinite; animation-delay: 1.6s; left: 12%; font-size: 0.7em; }
.snowflake-21 { animation: snowfall 16s linear infinite; animation-delay: 2.3s; left: 22%; font-size: 0.6em; }
.snowflake-22 { animation: snowfall-reverse 14s linear infinite; animation-delay: 0.7s; left: 32%; font-size: 0.5em; }
.snowflake-23 { animation: snowfall 20s linear infinite; animation-delay: 1.3s; left: 42%; font-size: 0.8em; }
.snowflake-24 { animation: snowfall-reverse 17s linear infinite; animation-delay: 2.6s; left: 52%; font-size: 0.6em; }
.snowflake-25 { animation: snowfall 13s linear infinite; animation-delay: 0.2s; left: 62%; font-size: 0.5em; }

/* Christmas Theme Button Overrides */
.christmas-theme .btn-primary {
  background: linear-gradient(135deg, var(--christmas-red) 0%, var(--christmas-red-light) 100%);
  border-color: var(--christmas-red);
  color: white;
  transition: all 0.3s ease;
}

.christmas-theme .btn-primary:hover {
  background: linear-gradient(135deg, var(--christmas-red-light) 0%, var(--christmas-red) 100%);
  border-color: var(--christmas-red-light);
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
  transform: translateY(-2px);
  color: white;
}

.christmas-theme .btn-success {
  background: linear-gradient(135deg, var(--christmas-green) 0%, var(--christmas-green-light) 100%);
  border-color: var(--christmas-green);
  color: white;
}

.christmas-theme .btn-success:hover {
  background: linear-gradient(135deg, var(--christmas-green-light) 0%, var(--christmas-green) 100%);
  border-color: var(--christmas-green-light);
  box-shadow: 0 4px 15px rgba(22, 163, 74, 0.4);
  transform: translateY(-2px);
  color: white;
}

.christmas-theme .btn-outline-primary {
  border-color: var(--christmas-red);
  color: var(--christmas-red);
  background: transparent;
}

.christmas-theme .btn-outline-primary:hover {
  background: linear-gradient(135deg, var(--christmas-green) 0%, var(--christmas-green-light) 100%);
  border-color: var(--christmas-green);
  color: white;
  box-shadow: 0 4px 15px rgba(22, 163, 74, 0.4);
}

/* Holiday Badge Styling */
.holiday-badge {
  background: linear-gradient(135deg, var(--christmas-red) 0%, var(--christmas-green) 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-block;
  animation: gentlePulse 2s ease-in-out infinite;
}

@keyframes gentlePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
}

/* Button Glow Effect */
.christmas-theme .btn-primary,
.christmas-theme .btn-success {
  position: relative;
}

.christmas-theme .btn-primary:hover::before,
.christmas-theme .btn-success:hover::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;
  background: inherit;
  filter: blur(8px);
  opacity: 0.5;
  z-index: -1;
}

/* Mobile Optimization - Reduce snowflakes on small screens */
@media (max-width: 768px) {
  .snowflake {
    opacity: 0.4;
    font-size: 0.8em;
  }
  
  /* Hide some snowflakes on mobile for better performance */
  .snowflake-16,
  .snowflake-17,
  .snowflake-18,
  .snowflake-19,
  .snowflake-20,
  .snowflake-21,
  .snowflake-22,
  .snowflake-23,
  .snowflake-24,
  .snowflake-25 {
    display: none;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .snowflake {
    animation: none;
    opacity: 0.3;
  }
  
  .holiday-badge {
    animation: none;
  }
}