/* Eid Celebration Effects */

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

/* Eid Decoration next to Logo */
.eid-decoration {
  position: absolute;
  top: -12px;
  left: -55px;
  width: 50px;
  height: 50px;
  z-index: 10000;
  filter: drop-shadow(0 0 8px rgba(39, 174, 96, 0.6));
  animation: eid-bounce 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes eid-bounce {
  0%, 100% { 
    transform: translateY(0) scale(1);
  }
  50% { 
    transform: translateY(-5px) scale(1.05);
  }
}

/* Balloons */
.balloon {
  position: absolute;
  font-size: 24px;
  bottom: -30px;
  animation: balloon-rise linear infinite;
  filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
}

@keyframes balloon-rise {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-60px) rotate(10deg) scale(1.1);
  }
  100% {
    transform: translateY(-130px) rotate(-10deg) scale(0.9);
    opacity: 0;
  }
}

/* Confetti */
.eid-confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -15px;
  animation: eid-confetti-fall linear infinite;
}

.eid-confetti.green { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.eid-confetti.gold { background: linear-gradient(135deg, #f1c40f, #f39c12); }
.eid-confetti.white { background: linear-gradient(135deg, #ecf0f1, #bdc3c7); }
.eid-confetti.purple { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.eid-confetti.pink { background: linear-gradient(135deg, #e91e63, #c2185b); }
.eid-confetti.blue { background: linear-gradient(135deg, #3498db, #2980b9); }

.eid-confetti:nth-child(odd) { border-radius: 50%; }
.eid-confetti:nth-child(even) { border-radius: 2px; }
.eid-confetti:nth-child(3n) { 
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

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

/* Fireworks */
.eid-firework {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: eid-firework-burst 2.5s ease-out infinite;
}

@keyframes eid-firework-burst {
  0% {
    transform: scale(0);
    opacity: 1;
    box-shadow: none;
  }
  30% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    box-shadow: 
      0 -20px 0 3px currentColor,
      20px 0 0 3px currentColor,
      0 20px 0 3px currentColor,
      -20px 0 0 3px currentColor,
      14px -14px 0 3px currentColor,
      14px 14px 0 3px currentColor,
      -14px -14px 0 3px currentColor,
      -14px 14px 0 3px currentColor;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
    box-shadow: 
      0 -40px 0 0 transparent,
      40px 0 0 0 transparent,
      0 40px 0 0 transparent,
      -40px 0 0 0 transparent,
      28px -28px 0 0 transparent,
      28px 28px 0 0 transparent,
      -28px -28px 0 0 transparent,
      -28px 28px 0 0 transparent;
  }
}

/* Sparkle Stars */
.eid-star {
  position: absolute;
  font-size: 14px;
  animation: eid-star-pop 1.5s ease-in-out infinite;
}

@keyframes eid-star-pop {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* Gift boxes floating */
.gift-box {
  position: absolute;
  font-size: 18px;
  animation: gift-float 4s ease-in-out infinite;
}

@keyframes gift-float {
  0% {
    transform: translateY(0) rotate(-5deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateY(-40px) rotate(5deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-80px) rotate(-5deg);
    opacity: 0;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .eid-decoration {
    width: 40px;
    height: 40px;
    top: -10px;
    left: -45px;
  }
  
  .balloon {
    font-size: 20px;
  }
  
  .eid-confetti {
    width: 7px;
    height: 7px;
  }
  
  #eid-celebration {
    height: 100px;
  }
}