/* New Year Celebration Effects - Header Only */

#celebration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  pointer-events: none;
  overflow: visible;
  z-index: 99999;
}

/* Santa Hat on Logo */
.brand__logo {
  position: relative;
}

.brand__link {
  position: relative;
}

/* Santa Claus next to Logo - Left side */
.santa-claus {
  position: absolute;
  top: -15px;
  left: -55px;
  width: 55px;
  height: 65px;
  z-index: 10000;
  filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
  animation: santa-wave 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes santa-wave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(2deg); }
  75% { transform: translateY(-3px) rotate(-2deg); }
}

/* Snow */
.snowflake {
  position: absolute;
  color: #fff;
  font-size: 14px;
  top: -20px;
  opacity: 0.9;
  animation: snow-fall linear infinite;
  text-shadow: 0 0 5px rgba(255,255,255,0.8);
}

@keyframes snow-fall {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100px) rotate(360deg) translateX(15px);
    opacity: 0.5;
  }
}

/* Confetti - More colorful */
.confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  top: -10px;
  opacity: 0;
  animation: confetti-fall linear infinite;
}

.confetti.gold { background: linear-gradient(135deg, #ffd700, #ffec8b); }
.confetti.red { background: linear-gradient(135deg, #ff4757, #ff6b81); }
.confetti.green { background: linear-gradient(135deg, #2ed573, #7bed9f); }
.confetti.blue { background: linear-gradient(135deg, #1e90ff, #70a1ff); }
.confetti.silver { background: linear-gradient(135deg, #dfe6e9, #b2bec3); }
.confetti.purple { background: linear-gradient(135deg, #a55eea, #8854d0); }

.confetti:nth-child(odd) { border-radius: 2px; }
.confetti:nth-child(even) { border-radius: 50%; }
.confetti:nth-child(3n) { 
  border-radius: 0; 
  transform: rotate(45deg);
}

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

/* Fireworks - Better effect */
.firework {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: firework-burst 2s ease-out infinite;
}

@keyframes firework-burst {
  0% {
    transform: scale(0);
    opacity: 1;
    box-shadow: none;
  }
  20% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    box-shadow: 
      0 -15px 0 2px currentColor,
      15px 0 0 2px currentColor,
      0 15px 0 2px currentColor,
      -15px 0 0 2px currentColor,
      10px -10px 0 2px currentColor,
      10px 10px 0 2px currentColor,
      -10px -10px 0 2px currentColor,
      -10px 10px 0 2px currentColor;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
    box-shadow: 
      0 -30px 0 0 transparent,
      30px 0 0 0 transparent,
      0 30px 0 0 transparent,
      -30px 0 0 0 transparent,
      20px -20px 0 0 transparent,
      20px 20px 0 0 transparent,
      -20px -20px 0 0 transparent,
      -20px 20px 0 0 transparent;
  }
}

/* Sparkle Stars */
.sparkle-star {
  position: absolute;
  font-size: 12px;
  color: #ffd700;
  animation: sparkle-twinkle 1.5s ease-in-out infinite;
  text-shadow: 0 0 10px #ffd700;
}

@keyframes sparkle-twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Glowing border on ALL headers */
.site-header::after,
.shop-header::after,
.software-header::after,
.invoice-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent, 
    #ff4757, 
    #ffd700, 
    #2ed573, 
    #1e90ff, 
    #ffd700, 
    #ff4757, 
    transparent
  );
  background-size: 200% 100%;
  animation: glow-slide 3s linear infinite;
  z-index: 201;
}

/* tv-header glow line - positioned below controls bar (header 60px + controls 60px = 120px) */
.controls-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent, 
    #ff4757, 
    #ffd700, 
    #2ed573, 
    #1e90ff, 
    #ffd700, 
    #ff4757, 
    transparent
  );
  background-size: 200% 100%;
  animation: glow-slide 3s linear infinite;
  z-index: 201;
}

@keyframes glow-slide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* tv-header - disable ::after */
.tv-header::after {
  display: none;
}

/* Note: tv-header uses position:fixed, so ::after still works because fixed also establishes positioning context */
.shop-header,
.software-header,
.invoice-header {
  position: relative;
}

@keyframes glow-slide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Responsive */
@media (max-width: 768px) {
  .santa-claus {
    width: 45px;
    height: 55px;
    top: -10px;
    left: -45px;
  }
  
  .snowflake {
    font-size: 10px;
  }
  
  .confetti {
    width: 5px;
    height: 5px;
  }
  
  #celebration {
    height: 100px;
  }
}