/* ============================================
   NEW YEAR CELEBRATION DECORATIONS
   ============================================ */

/* Confetti Animation - Firework Pop Style */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: confetti-pop 2s ease-out infinite;
}

/* Confetti burst from different positions */
.confetti:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; background: #FFD700; }
.confetti:nth-child(2) { top: 15%; left: 20%; animation-delay: 0s; background: #C0C0C0; }
.confetti:nth-child(3) { top: 15%; left: 20%; animation-delay: 0s; background: #FF69B4; }
.confetti:nth-child(4) { top: 15%; left: 20%; animation-delay: 0s; background: #00CED1; }

.confetti:nth-child(5) { top: 25%; left: 50%; animation-delay: 0.7s; background: #FFD700; }
.confetti:nth-child(6) { top: 25%; left: 50%; animation-delay: 0.7s; background: #9370DB; }
.confetti:nth-child(7) { top: 25%; left: 50%; animation-delay: 0.7s; background: #FF6347; }
.confetti:nth-child(8) { top: 25%; left: 50%; animation-delay: 0.7s; background: #FFD700; }

.confetti:nth-child(9) { top: 20%; left: 80%; animation-delay: 1.4s; background: #C0C0C0; }
.confetti:nth-child(10) { top: 20%; left: 80%; animation-delay: 1.4s; background: #00FA9A; }
.confetti:nth-child(11) { top: 20%; left: 80%; animation-delay: 1.4s; background: #FFD700; }
.confetti:nth-child(12) { top: 20%; left: 80%; animation-delay: 1.4s; background: #FF69B4; }

.confetti:nth-child(13) { top: 40%; left: 30%; animation-delay: 2.1s; background: #C0C0C0; }
.confetti:nth-child(14) { top: 40%; left: 30%; animation-delay: 2.1s; background: #00CED1; }
.confetti:nth-child(15) { top: 40%; left: 30%; animation-delay: 2.1s; background: #FFD700; }
.confetti:nth-child(16) { top: 40%; left: 30%; animation-delay: 2.1s; background: #9370DB; }

.confetti:nth-child(17) { top: 35%; left: 70%; animation-delay: 2.8s; background: #FF6347; }
.confetti:nth-child(18) { top: 35%; left: 70%; animation-delay: 2.8s; background: #C0C0C0; }
.confetti:nth-child(19) { top: 35%; left: 70%; animation-delay: 2.8s; background: #FFD700; }
.confetti:nth-child(20) { top: 35%; left: 70%; animation-delay: 2.8s; background: #00FA9A; }

@keyframes confetti-pop {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 0;
  }
  10% {
    transform: translate(0, 0) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(
      calc((random() - 0.5) * 300px),
      calc(100px + random() * 200px)
    ) rotate(calc(random() * 720deg)) scale(0);
    opacity: 0;
  }
}

/* Specific directions for each confetti piece to create explosion effect */
.confetti:nth-child(1) { animation-name: confetti-pop-1; }
.confetti:nth-child(2) { animation-name: confetti-pop-2; }
.confetti:nth-child(3) { animation-name: confetti-pop-3; }
.confetti:nth-child(4) { animation-name: confetti-pop-4; }
.confetti:nth-child(5) { animation-name: confetti-pop-5; }
.confetti:nth-child(6) { animation-name: confetti-pop-6; }
.confetti:nth-child(7) { animation-name: confetti-pop-7; }
.confetti:nth-child(8) { animation-name: confetti-pop-8; }
.confetti:nth-child(9) { animation-name: confetti-pop-9; }
.confetti:nth-child(10) { animation-name: confetti-pop-10; }
.confetti:nth-child(11) { animation-name: confetti-pop-11; }
.confetti:nth-child(12) { animation-name: confetti-pop-12; }
.confetti:nth-child(13) { animation-name: confetti-pop-13; }
.confetti:nth-child(14) { animation-name: confetti-pop-14; }
.confetti:nth-child(15) { animation-name: confetti-pop-15; }
.confetti:nth-child(16) { animation-name: confetti-pop-16; }
.confetti:nth-child(17) { animation-name: confetti-pop-17; }
.confetti:nth-child(18) { animation-name: confetti-pop-18; }
.confetti:nth-child(19) { animation-name: confetti-pop-19; }
.confetti:nth-child(20) { animation-name: confetti-pop-20; }

/* Individual explosion trajectories */
@keyframes confetti-pop-1 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(-80px, 120px) rotate(360deg); opacity: 0; } }
@keyframes confetti-pop-2 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(60px, 100px) rotate(-360deg); opacity: 0; } }
@keyframes confetti-pop-3 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(40px, 140px) rotate(540deg); opacity: 0; } }
@keyframes confetti-pop-4 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(-100px, 90px) rotate(-540deg); opacity: 0; } }

@keyframes confetti-pop-5 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(90px, 110px) rotate(450deg); opacity: 0; } }
@keyframes confetti-pop-6 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(-70px, 130px) rotate(-450deg); opacity: 0; } }
@keyframes confetti-pop-7 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(50px, 95px) rotate(720deg); opacity: 0; } }
@keyframes confetti-pop-8 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(-85px, 115px) rotate(-720deg); opacity: 0; } }

@keyframes confetti-pop-9 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(75px, 125px) rotate(400deg); opacity: 0; } }
@keyframes confetti-pop-10 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(-95px, 105px) rotate(-400deg); opacity: 0; } }
@keyframes confetti-pop-11 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(45px, 135px) rotate(600deg); opacity: 0; } }
@keyframes confetti-pop-12 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(-65px, 145px) rotate(-600deg); opacity: 0; } }

@keyframes confetti-pop-13 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(85px, 100px) rotate(480deg); opacity: 0; } }
@keyframes confetti-pop-14 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(-75px, 120px) rotate(-480deg); opacity: 0; } }
@keyframes confetti-pop-15 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(55px, 110px) rotate(650deg); opacity: 0; } }
@keyframes confetti-pop-16 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(-90px, 130px) rotate(-650deg); opacity: 0; } }

@keyframes confetti-pop-17 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(70px, 140px) rotate(550deg); opacity: 0; } }
@keyframes confetti-pop-18 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(-80px, 95px) rotate(-550deg); opacity: 0; } }
@keyframes confetti-pop-19 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(65px, 125px) rotate(700deg); opacity: 0; } }
@keyframes confetti-pop-20 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 10% { transform: scale(1); opacity: 1; } 100% { transform: translate(-50px, 105px) rotate(-700deg); opacity: 0; } }

/* Sparkling Stars */
.sparkles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

.sparkle {
  position: absolute;
  color: #FFD700;
  font-size: 1.5em;
  animation: sparkle-twinkle 2s ease-in-out infinite;
  text-shadow: 0 0 10px #FFD700, 0 0 20px #FFA500;
}

.sparkle:nth-child(1) { top: 10%; left: 8%; animation-delay: 0s; }
.sparkle:nth-child(2) { top: 25%; left: 20%; animation-delay: 0.4s; }
.sparkle:nth-child(3) { top: 15%; left: 35%; animation-delay: 0.8s; }
.sparkle:nth-child(4) { top: 30%; left: 50%; animation-delay: 1.2s; }
.sparkle:nth-child(5) { top: 20%; left: 65%; animation-delay: 1.6s; }
.sparkle:nth-child(6) { top: 35%; left: 80%; animation-delay: 0.2s; }
.sparkle:nth-child(7) { top: 45%; left: 15%; animation-delay: 0.6s; }
.sparkle:nth-child(8) { top: 55%; left: 40%; animation-delay: 1s; }
.sparkle:nth-child(9) { top: 60%; left: 70%; animation-delay: 1.4s; }
.sparkle:nth-child(10) { top: 70%; left: 25%; animation-delay: 0.3s; }

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

/* New Year Lights Strand */
.new-year-lights {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(to bottom, #1a1a2e 0%, #1a1a2e 50%, transparent 50%);
  padding: 8px 0 15px 0;
  position: relative;
}

.new-year-lights::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FFD700, #C0C0C0, #FFD700);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.ny-light {
  width: 12px;
  height: 18px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
  animation: ny-twinkle 1.5s ease-in-out infinite;
}

.ny-light::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #2c2c2c;
  border-radius: 2px;
}

.ny-light.gold {
  background: radial-gradient(circle at 30% 30%, #FFD700, #FFA500);
  box-shadow: 0 0 15px #FFD700, 0 0 25px #FFA500;
  animation-delay: 0s;
}

.ny-light.silver {
  background: radial-gradient(circle at 30% 30%, #E8E8E8, #C0C0C0);
  box-shadow: 0 0 15px #E8E8E8, 0 0 25px #C0C0C0;
  animation-delay: 0.3s;
}

.ny-light.purple {
  background: radial-gradient(circle at 30% 30%, #9370DB, #663399);
  box-shadow: 0 0 15px #9370DB, 0 0 25px #663399;
  animation-delay: 0.6s;
}

.ny-light.cyan {
  background: radial-gradient(circle at 30% 30%, #00CED1, #008B8B);
  box-shadow: 0 0 15px #00CED1, 0 0 25px #008B8B;
  animation-delay: 0.9s;
}

.ny-light.pink {
  background: radial-gradient(circle at 30% 30%, #FF69B4, #FF1493);
  box-shadow: 0 0 15px #FF69B4, 0 0 25px #FF1493;
  animation-delay: 1.2s;
}

@keyframes ny-twinkle {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    filter: brightness(1.3);
    transform: scale(1.1);
  }
}

/* Firework Bursts */
.fireworks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9997;
  overflow: hidden;
}

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

.firework:nth-child(1) { top: 20%; left: 20%; background: #FFD700; animation-delay: 0s; }
.firework:nth-child(2) { top: 30%; left: 80%; background: #FF69B4; animation-delay: 1s; }
.firework:nth-child(3) { top: 50%; left: 50%; background: #00CED1; animation-delay: 2s; }
.firework:nth-child(4) { top: 40%; left: 30%; background: #9370DB; animation-delay: 3s; }
.firework:nth-child(5) { top: 60%; left: 70%; background: #FFD700; animation-delay: 4s; }

@keyframes firework-burst {
  0% {
    transform: scale(0);
    opacity: 1;
    box-shadow: 0 0 0 0 currentColor,
                0 0 0 0 currentColor,
                0 0 0 0 currentColor,
                0 0 0 0 currentColor;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
    box-shadow: 0 -60px 0 -4px currentColor,
                60px 0 0 -4px currentColor,
                0 60px 0 -4px currentColor,
                -60px 0 0 -4px currentColor;
  }
}

/* Clock/Celebration Icons */
.celebration-icons {
  font-size: 2em;
  animation: celebration-bounce 3s ease-in-out infinite;
  display: inline-block;
}

@keyframes celebration-bounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) rotate(-5deg);
  }
  75% {
    transform: translateY(-10px) rotate(5deg);
  }
}

/* New Year Header Enhancement */
.new-year-header {
  background:white;
  border-bottom: 3px solid #FFD700;
  position: relative;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.new-year-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #FFD700 0px,
    #FFD700 20px,
    #C0C0C0 20px,
    #C0C0C0 40px,
    #FFD700 40px,
    #FFD700 60px
  );
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 0;
  }
}

/* Glowing Text Effect for Headers */
.glow-text {
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8),
               0 0 20px rgba(255, 215, 0, 0.6),
               0 0 30px rgba(255, 215, 0, 0.4);
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8),
                 0 0 20px rgba(255, 215, 0, 0.6),
                 0 0 30px rgba(255, 215, 0, 0.4);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 215, 0, 1),
                 0 0 30px rgba(255, 215, 0, 0.8),
                 0 0 40px rgba(255, 215, 0, 0.6);
  }
}

/* 2025 Badge/Decoration */
.year-badge {
  display: inline-block;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #1a1a2e;
  font-weight: bold;
  padding: 5px 15px;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.9);
  }
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .celebration-icons {
    font-size: 1.5em;
  }

  .new-year-lights {
    padding: 5px 0 10px 0;
  }

  .ny-light {
    width: 8px;
    height: 12px;
  }

  .confetti {
    width: 8px;
    height: 8px;
  }

  .sparkle {
    font-size: 1em;
  }

  .year-badge {
    font-size: 0.9em;
    padding: 4px 12px;
  }
}

@media (max-width: 480px) {
  .celebration-icons {
    font-size: 1.2em;
  }

  .ny-light {
    width: 6px;
    height: 10px;
  }

  .confetti {
    width: 6px;
    height: 6px;
  }

  .sparkle {
    font-size: 0.8em;
  }

  .year-badge {
    font-size: 0.8em;
    padding: 3px 10px;
  }
}

/* ============================================
   END NEW YEAR CELEBRATION DECORATIONS
   ============================================ */