/* Ramadan Celebration Effects */

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

/* Crescent Moon with Star next to Logo */
.ramadan-moon {
  position: absolute;
  top: -8px;
  left: -55px;
  width: 50px;
  height: 50px;
  z-index: 10000;
  pointer-events: none;
  animation: moon-float 4s ease-in-out infinite;
}

.ramadan-moon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
}

@keyframes moon-float {
  0%, 100% { 
    transform: translateY(0) rotate(-5deg);
  }
  50% { 
    transform: translateY(-3px) rotate(5deg);
  }
}

/* Real Fanoos (Ramadan Lantern) */
.fanoos {
  position: absolute;
  top: -40px;
  width: 30px;
  height: 50px;
  animation: fanoos-swing linear infinite;
}

.fanoos::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #DAA520, #B8860B);
  border-radius: 2px 2px 0 0;
}

.fanoos::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 38px;
  background: linear-gradient(180deg, 
    #8B0000 0%, 
    #DC143C 20%, 
    #FF6347 40%,
    #FFD700 50%,
    #FF6347 60%,
    #DC143C 80%,
    #8B0000 100%
  );
  border-radius: 5px 5px 12px 12px;
  box-shadow: 
    inset 0 0 15px rgba(255, 215, 0, 0.6),
    0 0 20px rgba(255, 100, 50, 0.5),
    0 0 40px rgba(255, 200, 100, 0.3);
  border: 1px solid #DAA520;
}

/* Fanoos decorative lines */
.fanoos .line {
  position: absolute;
  background: #DAA520;
}

@keyframes fanoos-swing {
  0% {
    transform: translateY(0) rotate(-8deg);
    opacity: 1;
  }
  25% {
    transform: translateY(35px) rotate(8deg);
  }
  50% {
    transform: translateY(70px) rotate(-8deg);
  }
  75% {
    transform: translateY(105px) rotate(8deg);
  }
  100% {
    transform: translateY(140px) rotate(-8deg);
    opacity: 0.2;
  }
}

/* Stars - Real star shapes */
.ramadan-star {
  position: absolute;
  background: radial-gradient(circle, #FFD700, #FFA500);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: star-twinkle 2s ease-in-out infinite;
  box-shadow: 0 0 10px #FFD700;
}

@keyframes star-twinkle {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.8);
    filter: brightness(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    filter: brightness(1.3);
  }
}

/* Golden Sparkles */
.golden-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #FFD700, #FFA500);
  border-radius: 50%;
  box-shadow: 0 0 6px #FFD700, 0 0 12px #FFA500;
  animation: sparkle-float 3s ease-in-out infinite;
}

@keyframes sparkle-float {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
  20% {
    transform: translateY(-15px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(0);
    opacity: 0;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .ramadan-moon {
    width: 40px;
    height: 40px;
    top: -5px;
    left: -45px;
  }
  
  .fanoos {
    width: 24px;
    height: 40px;
  }
  
  .fanoos::after {
    width: 20px;
    height: 30px;
  }
  
  #ramadan-celebration {
    height: 100px;
  }
}