/* ===================================
   SEASONAL EFFECTS STYLESHEET
   =================================== */

/* ❄️ CHRISTMAS - SNOW EFFECT */
.snowflakes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  top: -10px;
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
  animation: fall linear infinite;
  opacity: 0.8;
}

@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
  }
}

/* Snowflake variants for natural look */
.snowflake:nth-child(1) { left: 2%; animation-duration: 10s; animation-delay: 0s; font-size: 1.2em; }
.snowflake:nth-child(2) { left: 8%; animation-duration: 12s; animation-delay: 1s; font-size: 0.8em; }
.snowflake:nth-child(3) { left: 15%; animation-duration: 14s; animation-delay: 2s; font-size: 1em; }
.snowflake:nth-child(4) { left: 22%; animation-duration: 11s; animation-delay: 3s; font-size: 1.3em; }
.snowflake:nth-child(5) { left: 30%; animation-duration: 13s; animation-delay: 0.5s; font-size: 0.9em; }
.snowflake:nth-child(6) { left: 38%; animation-duration: 15s; animation-delay: 1.5s; font-size: 1.1em; }
.snowflake:nth-child(7) { left: 45%; animation-duration: 10s; animation-delay: 2.5s; font-size: 0.85em; }
.snowflake:nth-child(8) { left: 52%; animation-duration: 12s; animation-delay: 0.8s; font-size: 1.15em; }
.snowflake:nth-child(9) { left: 60%; animation-duration: 14s; animation-delay: 1.8s; font-size: 0.95em; }
.snowflake:nth-child(10) { left: 68%; animation-duration: 11s; animation-delay: 2.8s; font-size: 1.25em; }
.snowflake:nth-child(11) { left: 75%; animation-duration: 13s; animation-delay: 0.3s; font-size: 0.88em; }
.snowflake:nth-child(12) { left: 82%; animation-duration: 15s; animation-delay: 1.3s; font-size: 1.05em; }
.snowflake:nth-child(13) { left: 90%; animation-duration: 12s; animation-delay: 2.3s; font-size: 0.92em; }
.snowflake:nth-child(14) { left: 95%; animation-duration: 10s; animation-delay: 1.2s; font-size: 1.18em; }
.snowflake:nth-child(15) { left: 5%; animation-duration: 14s; animation-delay: 3.2s; font-size: 0.78em; }
.snowflake:nth-child(16) { left: 12%; animation-duration: 11s; animation-delay: 0.7s; font-size: 1.22em; }
.snowflake:nth-child(17) { left: 19%; animation-duration: 13s; animation-delay: 1.7s; font-size: 0.87em; }
.snowflake:nth-child(18) { left: 27%; animation-duration: 15s; animation-delay: 2.7s; font-size: 1.08em; }
.snowflake:nth-child(19) { left: 35%; animation-duration: 10s; animation-delay: 0.4s; font-size: 0.96em; }
.snowflake:nth-child(20) { left: 42%; animation-duration: 12s; animation-delay: 1.4s; font-size: 1.12em; }
.snowflake:nth-child(21) { left: 50%; animation-duration: 14s; animation-delay: 2.4s; font-size: 0.82em; }
.snowflake:nth-child(22) { left: 57%; animation-duration: 11s; animation-delay: 3.4s; font-size: 1.28em; }
.snowflake:nth-child(23) { left: 65%; animation-duration: 13s; animation-delay: 0.6s; font-size: 0.91em; }
.snowflake:nth-child(24) { left: 72%; animation-duration: 15s; animation-delay: 1.6s; font-size: 1.04em; }
.snowflake:nth-child(25) { left: 80%; animation-duration: 10s; animation-delay: 2.6s; font-size: 0.84em; }
.snowflake:nth-child(26) { left: 87%; animation-duration: 12s; animation-delay: 3.6s; font-size: 1.16em; }
.snowflake:nth-child(27) { left: 93%; animation-duration: 14s; animation-delay: 0.9s; font-size: 0.93em; }
.snowflake:nth-child(28) { left: 3%; animation-duration: 11s; animation-delay: 1.9s; font-size: 1.06em; }
.snowflake:nth-child(29) { left: 10%; animation-duration: 13s; animation-delay: 2.9s; font-size: 0.89em; }
.snowflake:nth-child(30) { left: 17%; animation-duration: 15s; animation-delay: 3.9s; font-size: 1.14em; }

/* 🎃 HALLOWEEN - SPOOKY DECORATIONS */
.halloween-decorations {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* Dark fog overlay */
.halloween-decorations::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(75,0,130,0.15) 50%, rgba(0,0,0,0.3) 100%);
  animation: fog 10s ease-in-out infinite;
  z-index: -1;
}

@keyframes fog {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

/* Floating pumpkins */
.pumpkin {
  position: absolute;
  font-size: 3em;
  animation: hauntedFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 102, 0, 0.8));
}

.pumpkin:nth-child(1) { top: 5%; left: 3%; animation-delay: 0s; animation-duration: 5s; }
.pumpkin:nth-child(2) { top: 15%; right: 5%; animation-delay: 1s; animation-duration: 4.5s; }
.pumpkin:nth-child(3) { top: 60%; left: 8%; animation-delay: 2s; animation-duration: 5.5s; }
.pumpkin:nth-child(4) { bottom: 10%; right: 10%; animation-delay: 0.5s; animation-duration: 4.8s; }
.pumpkin:nth-child(5) { top: 40%; left: 50%; animation-delay: 1.5s; animation-duration: 5.2s; }

/* Flying bats */
.bat {
  position: absolute;
  font-size: 2.5em;
  animation: batFly 12s linear infinite;
  filter: drop-shadow(0 0 10px rgba(139, 0, 139, 0.6));
}

.bat:nth-child(6) { top: 8%; animation-delay: 0s; }
.bat:nth-child(7) { top: 25%; animation-delay: 3s; }
.bat:nth-child(8) { top: 45%; animation-delay: 6s; }
.bat:nth-child(9) { top: 65%; animation-delay: 2s; }
.bat:nth-child(10) { top: 80%; animation-delay: 4s; }

/* Ghosts */
.ghost {
  position: absolute;
  font-size: 3em;
  animation: ghostFloat 8s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
  opacity: 0.7;
}

.ghost:nth-child(11) { top: 20%; left: 15%; animation-delay: 0s; }
.ghost:nth-child(12) { top: 50%; right: 20%; animation-delay: 2s; }
.ghost:nth-child(13) { bottom: 25%; left: 25%; animation-delay: 4s; }

/* Spiders */
.spider {
  position: absolute;
  font-size: 1.8em;
  animation: spiderDrop 8s ease-in-out infinite;
}

.spider:nth-child(14) { left: 20%; animation-delay: 1s; }
.spider:nth-child(15) { left: 40%; animation-delay: 3s; }
.spider:nth-child(16) { left: 60%; animation-delay: 0s; }
.spider:nth-child(17) { left: 80%; animation-delay: 2s; }

/* Skulls */
.skull {
  position: absolute;
  font-size: 2.2em;
  animation: skullSpin 10s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));
}

.skull:nth-child(18) { top: 30%; left: 10%; animation-delay: 0s; }
.skull:nth-child(19) { top: 70%; right: 15%; animation-delay: 2s; }

@keyframes hauntedFloat {
  0%, 100% { 
    transform: translateY(0px) rotate(-5deg);
    filter: drop-shadow(0 0 20px rgba(255, 102, 0, 0.8));
  }
  50% { 
    transform: translateY(-30px) rotate(5deg);
    filter: drop-shadow(0 0 35px rgba(255, 102, 0, 1));
  }
}

@keyframes batFly {
  0% { 
    left: -100px;
    transform: translateY(0) scaleX(1);
  }
  48% {
    transform: translateY(-50px) scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
  98% {
    transform: translateY(50px) scaleX(-1);
  }
  100% { 
    left: calc(100% + 100px);
    transform: translateY(0) scaleX(-1);
  }
}

@keyframes ghostFloat {
  0%, 100% { 
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0.5;
  }
  25% {
    transform: translateY(-40px) translateX(20px) rotate(5deg);
    opacity: 0.8;
  }
  50% { 
    transform: translateY(-20px) translateX(-20px) rotate(-5deg);
    opacity: 0.6;
  }
  75% {
    transform: translateY(-50px) translateX(10px) rotate(3deg);
    opacity: 0.9;
  }
}

@keyframes spiderDrop {
  0%, 90%, 100% {
    top: -50px;
  }
  10%, 80% {
    top: 200px;
  }
}

@keyframes skullSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* 💕 VALENTINE'S DAY - HEARTS */
.hearts-decorations {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.heart {
  position: absolute;
  color: #ff1744;
  font-size: 1.5em;
  animation: rise 10s ease-in infinite;
  opacity: 0.7;
}

@keyframes rise {
  0% {
    bottom: -10%;
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    bottom: 110%;
    transform: translateX(100px) rotate(360deg);
    opacity: 0;
  }
}

.heart:nth-child(1) { left: 10%; animation-duration: 12s; animation-delay: 0s; }
.heart:nth-child(2) { left: 25%; animation-duration: 10s; animation-delay: 2s; }
.heart:nth-child(3) { left: 40%; animation-duration: 14s; animation-delay: 1s; }
.heart:nth-child(4) { left: 55%; animation-duration: 11s; animation-delay: 3s; }
.heart:nth-child(5) { left: 70%; animation-duration: 13s; animation-delay: 0.5s; }
.heart:nth-child(6) { left: 85%; animation-duration: 15s; animation-delay: 1.5s; }

/* 🎉 NEW YEAR - CONFETTI (bonus) */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ffd700;
  top: -10px;
  animation: confetti-fall 5s linear infinite;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.confetti:nth-child(odd) { background: #ff6600; }
.confetti:nth-child(3n) { background: #0066ff; }
.confetti:nth-child(5n) { background: #ff1744; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .snowflake { font-size: 0.8em; }
  .pumpkin { font-size: 2em; }
  .bat { font-size: 1.8em; }
  .ghost { font-size: 2em; }
  .spider { font-size: 1.3em; }
  .skull { font-size: 1.6em; }
  .heart { font-size: 1.2em; }
}