/* ====================================== */
/* EVENT MODE VISUAL DISPLAY             */
/* Event-Specific Design System           */
/* ====================================== */

/* Main Event Display Container */
.event-3d-display {
  position: fixed;
  top: 120px;
  right: 20px;
  z-index: 888;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent);
  border-radius: 50%;
  backdrop-filter: blur(10px);
}

/* ====================================== */
/* RAMADAN LED LIGHTS - HANGING FROM TOP   */
/* ====================================== */
.ramadan-led-lights {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 400px;
  pointer-events: none;
  z-index: 800;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.02), transparent 60%);
  overflow: visible;
}

.ramadan-led-lights.hidden {
  display: none;
}

/* Hanging strings */
.led-string {
  position: absolute;
  top: 0;
  width: 2px;
  height: 300px;
  background: linear-gradient(180deg, rgba(200, 180, 0, 0.4), rgba(255, 215, 0, 0.2), transparent);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Individual LED lights */
.led-light {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffed4e, #ffd700);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 165, 0, 0.6),
              inset 0 0 10px rgba(255, 255, 200, 0.4);
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
  cursor: pointer;
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, filter 0.1s ease-out;
  z-index: 801;
}

/* Position string 1 - leftmost */
.led-string-1 {
  right: 85%;
  animation: swayStringLeft 3s ease-in-out infinite;
}

.led-1 { top: 80px; left: -7px; animation: twinkleLED 2s ease-in-out infinite 0s; }
.led-2 { top: 160px; left: -7px; animation: twinkleLED 2s ease-in-out infinite 0.2s; }
.led-3 { top: 240px; left: -7px; animation: twinkleLED 2s ease-in-out infinite 0.4s; }

/* Position string 2 */
.led-string-2 {
  right: 80%;
  animation: swayStringMid 3.2s ease-in-out infinite 0.3s;
}

.led-4 { top: 100px; left: -7px; animation: twinkleLED 2s ease-in-out infinite 0.6s; }
.led-5 { top: 180px; left: -7px; animation: twinkleLED 2s ease-in-out infinite 0.8s; }
.led-6 { top: 260px; left: -7px; animation: twinkleLED 2s ease-in-out infinite 1s; }

/* Position string 3 */
.led-string-3 {
  right: 75%;
  animation: swayStringRight 3.4s ease-in-out infinite 0.6s;
}

.led-7 { top: 90px; left: -7px; animation: twinkleLED 2s ease-in-out infinite 1.2s; }
.led-8 { top: 170px; left: -7px; animation: twinkleLED 2s ease-in-out infinite 1.4s; }
.led-9 { top: 250px; left: -7px; animation: twinkleLED 2s ease-in-out infinite 1.6s; }

/* Position string 4 - right side */
.led-string-4 {
  right: 70%;
  animation: swayStringLeft 3.1s ease-in-out infinite 0.2s;
}

.led-10 { top: 110px; left: -7px; animation: twinkleLED 2s ease-in-out infinite 0.3s; }
.led-11 { top: 190px; left: -7px; animation: twinkleLED 2s ease-in-out infinite 0.5s; }
.led-12 { top: 270px; left: -7px; animation: twinkleLED 2s ease-in-out infinite 0.7s; }

/* String sway animations */
@keyframes swayStringLeft {
  0%, 100% { transform: rotateZ(-2deg); }
  50% { transform: rotateZ(2deg); }
}

@keyframes swayStringMid {
  0%, 100% { transform: rotateZ(1deg); }
  50% { transform: rotateZ(-1deg); }
}

@keyframes swayStringRight {
  0%, 100% { transform: rotateZ(2deg); }
  50% { transform: rotateZ(-2deg); }
}

/* LED twinkling animation */
@keyframes twinkleLED {
  0%, 100% { 
    opacity: 0.5;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.6), 0 0 32px rgba(255, 165, 0, 0.3),
                inset 0 0 8px rgba(255, 255, 200, 0.2);
    transform: scale(0.9);
  }
  50% { 
    opacity: 1;
    box-shadow: 0 0 24px rgba(255, 215, 0, 1), 0 0 48px rgba(255, 165, 0, 0.8),
                inset 0 0 12px rgba(255, 255, 200, 0.5);
    transform: scale(1.1);
  }
}

/* ====================================== */
/* RAMADAN EVENT - CRESCENT MOON          */
/* ====================================== */
.event-ramadan .event-3d-cube {
  width: 120px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-ramadan .event-3d-cube::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 35% 35%, #ffd700, #ffa500, #ff8c00);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 165, 0, 0.8),
              0 0 120px rgba(255, 140, 0, 0.6),
              inset -30px -30px 50px rgba(255, 140, 0, 0.5),
              inset -10px -10px 30px rgba(255, 255, 200, 0.3);
  animation: pulseRamadan 2.5s ease-in-out infinite, rotateMoon 10s linear infinite, shimmerMoon 4s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
}

.event-ramadan .event-3d-cube::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 50%;
  top: 15px;
  left: 15px;
  box-shadow: 0 0 30px rgba(26, 26, 46, 0.9);
  animation: rotateMoonMask 8s linear infinite;
}

@keyframes pulseRamadan {
  0%, 100% { box-shadow: 0 0 40px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 165, 0, 0.8), 0 0 120px rgba(255, 140, 0, 0.6), inset -30px -30px 50px rgba(255, 140, 0, 0.5), inset -10px -10px 30px rgba(255, 255, 200, 0.3); }
  50% { box-shadow: 0 0 60px rgba(255, 215, 0, 1), 0 0 120px rgba(255, 165, 0, 1), 0 0 180px rgba(255, 140, 0, 0.8), inset -30px -30px 50px rgba(255, 140, 0, 0.7), inset -10px -10px 30px rgba(255, 255, 200, 0.5); }
}

@keyframes rotateMoon {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

@keyframes rotateMoonMask {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

@keyframes shimmerMoon {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

/* ====================================== */
/* NEW YEAR EVENT - FIREWORKS             */
/* ====================================== */
.event-newyear .event-3d-cube {
  width: 120px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-newyear .event-3d-cube::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #1abc9c 0%, rgba(26, 188, 156, 0) 70%);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(26, 188, 156, 0.8), 0 0 100px rgba(0, 200, 150, 0.5);
  animation: pulseNewyear 1.5s ease-in-out infinite, scaleNewYear 2s ease-in-out infinite;
}

.event-newyear .event-3d-cube::after {
  content: '✨';
  position: absolute;
  font-size: 60px;
  animation: spinFireworks 3s linear infinite, pulseFireworks 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(26, 188, 156, 0.8)) drop-shadow(0 0 40px rgba(0, 200, 150, 0.5));
  text-shadow: 0 0 30px rgba(26, 188, 156, 0.6);
}

@keyframes pulseNewyear {
  0%, 100% { box-shadow: 0 0 60px rgba(26, 188, 156, 0.8), 0 0 100px rgba(0, 200, 150, 0.5); }
  50% { box-shadow: 0 0 80px rgba(26, 188, 156, 1), 0 0 140px rgba(0, 200, 150, 0.8); }
}

@keyframes scaleNewYear {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes spinFireworks {
  0% { transform: rotateZ(0deg) scale(1); }
  50% { transform: rotateZ(180deg) scale(1.1); }
  100% { transform: rotateZ(360deg) scale(1); }
}

@keyframes pulseFireworks {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* ====================================== */
/* VALENTINE EVENT - HEARTS              */
/* ====================================== */
.event-valentine .event-3d-cube {
  width: 120px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-valentine .event-3d-cube::before {
  content: '❤️';
  position: absolute;
  font-size: 80px;
  animation: beatHeart 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  filter: drop-shadow(0 0 15px rgba(255, 23, 68, 0.9)) drop-shadow(0 0 35px rgba(255, 23, 68, 0.6)) drop-shadow(0 0 60px rgba(255, 23, 68, 0.3));
  text-shadow: 0 0 20px rgba(255, 23, 68, 0.8);
}

.event-valentine .event-3d-cube::after {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  border: 3px solid;
  border-color: #ff1744;
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(255, 23, 68, 0.8), inset 0 0 30px rgba(255, 23, 68, 0.3),
              0 0 80px rgba(255, 23, 68, 0.4);
  animation: pulseValentine 2s ease-in-out infinite, beatBorder 1.3s ease-in-out infinite;
  background: radial-gradient(circle at 30% 30%, rgba(255, 23, 68, 0.1), transparent);
}

@keyframes beatHeart {
  0%, 100% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.15) rotate(-5deg); }
  30% { transform: scale(1) rotate(0deg); }
  45% { transform: scale(1.12) rotate(5deg); }
  60% { transform: scale(1) rotate(0deg); }
  75% { transform: scale(1.08) rotate(-3deg); }
}

@keyframes pulseValentine {
  0%, 100% { box-shadow: 0 0 40px rgba(255, 23, 68, 0.8), inset 0 0 30px rgba(255, 23, 68, 0.3), 0 0 80px rgba(255, 23, 68, 0.4); }
  50% { box-shadow: 0 0 70px rgba(255, 23, 68, 1), inset 0 0 50px rgba(255, 23, 68, 0.5), 0 0 120px rgba(255, 23, 68, 0.6); }
}

@keyframes beatBorder {
  0%, 100% { border-width: 3px; }
  50% { border-width: 4px; }
}

/* ====================================== */
/* EASTER EVENT - EGGS                    */
/* ====================================== */
.event-easter .event-3d-cube {
  width: 120px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-easter .event-3d-cube::before {
  content: '🥚';
  position: absolute;
  font-size: 70px;
  animation: bounceEaster 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  filter: drop-shadow(0 0 20px rgba(0, 208, 132, 0.7)) drop-shadow(0 0 40px rgba(0, 208, 132, 0.4));
}

.event-easter .event-3d-cube::after {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle at 30% 30%, rgba(0, 208, 132, 0.5), rgba(0, 208, 132, 0.1), transparent);
  border: 3px solid #00d084;
  border-radius: 50%;
  box-shadow: 0 0 50px rgba(0, 208, 132, 0.8), 0 0 100px rgba(0, 208, 132, 0.4),
              inset 0 0 40px rgba(0, 208, 132, 0.2);
  animation: pulseEaster 2s ease-in-out infinite, spinEasterRing 8s linear infinite;
}

@keyframes bounceEaster {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-20px) scale(1.05); }
  50% { transform: translateY(0) scale(0.95); }
  75% { transform: translateY(-10px) scale(1.02); }
}

@keyframes pulseEaster {
  0%, 100% { box-shadow: 0 0 50px rgba(0, 208, 132, 0.8), 0 0 100px rgba(0, 208, 132, 0.4), inset 0 0 40px rgba(0, 208, 132, 0.2); }
  50% { box-shadow: 0 0 80px rgba(0, 208, 132, 1), 0 0 150px rgba(0, 208, 132, 0.6), inset 0 0 60px rgba(0, 208, 132, 0.4); }
}

@keyframes spinEasterRing {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

/* ====================================== */
/* SUMMER EVENT - SUN                     */
/* ====================================== */
.event-summer .event-3d-cube {
  width: 120px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-summer .event-3d-cube::before {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at 40% 40%, #ffeb3b, #ffd600, #ff9800);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(255, 152, 0, 1), 0 0 100px rgba(255, 215, 0, 0.8),
              0 0 150px rgba(255, 152, 0, 0.5),
              inset -20px -20px 40px rgba(255, 140, 0, 0.3),
              inset 10px 10px 20px rgba(255, 255, 200, 0.4);
  animation: rotateSun 14s linear infinite, radiateSun 2.5s ease-in-out infinite, pulseSunCoreInner 3s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.7));
}

.event-summer .event-3d-cube::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border: 4px solid #ff9800;
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(255, 152, 0, 0.4);
.event-summer .event-3d-cube::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border: 4px solid #ff9800;
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(255, 152, 0, 0.6), inset 0 0 40px rgba(255, 152, 0, 0.4),
              inset 0 0 80px rgba(255, 140, 0, 0.2);
  animation: rotateSunRays 10s linear infinite reverse, pulseSunRays 2.5s ease-in-out infinite;
  background: conic-gradient(from 0deg, transparent 0deg 20deg, rgba(255, 215, 0, 0.1) 20deg 40deg, transparent 40deg);
}
}

@keyframes rotateSun {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

@keyframes radiateSun {
  0%, 100% { box-shadow: 0 0 60px rgba(255, 152, 0, 1), 0 0 100px rgba(255, 215, 0, 0.8), 0 0 150px rgba(255, 152, 0, 0.5), inset -20px -20px 40px rgba(255, 140, 0, 0.3), inset 10px 10px 20px rgba(255, 255, 200, 0.4); }
  50% { box-shadow: 0 0 90px rgba(255, 152, 0, 1), 0 0 140px rgba(255, 215, 0, 0.9), 0 0 200px rgba(255, 152, 0, 0.7), inset -20px -20px 40px rgba(255, 140, 0, 0.5), inset 10px 10px 20px rgba(255, 255, 200, 0.6); }
}

@keyframes pulseSunCoreInner {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

@keyframes rotateSunRays {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

/* ====================================== */
/* HALLOWEEN EVENT - PUMPKIN              */
/* ====================================== */
.event-halloween .event-3d-cube {
  width: 120px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-halloween .event-3d-cube::before {
  content: '🎃';
  position: absolute;
  font-size: 80px;
  animation: floatHalloween 2.5s ease-in-out infinite, swayHalloween 3s ease-in-out infinite;
  filter: drop-shadow(0 0 25px rgba(255, 102, 0, 0.9)) drop-shadow(0 0 50px rgba(255, 102, 0, 0.6)) drop-shadow(0 0 80px rgba(139, 37, 0, 0.4));
  text-shadow: 0 0 30px rgba(255, 102, 0, 0.7);
}

.event-halloween .event-3d-cube::after {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  border: 3px solid #ff6600;
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(255, 102, 0, 0.8), 0 0 100px rgba(255, 102, 0, 0.5),
              inset 0 0 40px rgba(255, 102, 0, 0.3), inset 0 0 80px rgba(139, 37, 0, 0.2);
  animation: pulseHalloween 1.5s ease-in-out infinite, spinHalloweenRing 10s linear infinite;
  background: radial-gradient(circle, rgba(139, 37, 0, 0.2), transparent);
}

@keyframes floatHalloween {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

@keyframes swayHalloween {
  0%, 100% { transform: rotateZ(0deg); }
  25% { transform: rotateZ(-8deg); }
  75% { transform: rotateZ(8deg); }
}

@keyframes pulseHalloween {
  0%, 100% { box-shadow: 0 0 60px rgba(255, 102, 0, 0.8), 0 0 100px rgba(255, 102, 0, 0.5), inset 0 0 40px rgba(255, 102, 0, 0.3), inset 0 0 80px rgba(139, 37, 0, 0.2); }
  50% { box-shadow: 0 0 100px rgba(255, 102, 0, 1), 0 0 160px rgba(255, 102, 0, 0.7), inset 0 0 60px rgba(255, 102, 0, 0.5), inset 0 0 120px rgba(139, 37, 0, 0.4); }
}

@keyframes spinHalloweenRing {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

/* ====================================== */
/* CHRISTMAS EVENT - TREE & SNOW          */
/* ====================================== */
.event-christmas .event-3d-cube {
  width: 120px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-christmas .event-3d-cube::before {
  content: '🎄';
  position: absolute;
  font-size: 80px;
  animation: swayChristmas 2.5s ease-in-out infinite, pulseChristmas 2s ease-in-out infinite;
  filter: drop-shadow(0 0 25px rgba(196, 30, 58, 0.8)) drop-shadow(0 0 50px rgba(0, 200, 100, 0.6)) drop-shadow(0 0 80px rgba(196, 30, 58, 0.3));
  text-shadow: 0 0 30px rgba(0, 200, 100, 0.5);
}

.event-christmas .event-3d-cube::after {
  content: '❄️';
  position: absolute;
  font-size: 40px;
  top: -30px;
  right: -30px;
  animation: spinSnow 4s linear infinite;
  opacity: 0.7;
}

@keyframes swayChristmas {
  0%, 100% { transform: rotateZ(-4deg); }
  50% { transform: rotateZ(4deg); }
}

@keyframes pulseChristmas {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes spinSnow {
  0% { transform: rotateZ(0deg) translateY(0); }
  100% { transform: rotateZ(360deg) translateY(20px); }
}

/* ====================================== */
/* RESPONSIVE ADJUSTMENTS                 */
/* ====================================== */

/* Hidden by default */
.event-3d-display.hidden {
  display: none;
}

@media (max-width: 768px) {
  .event-3d-display {
    top: 100px;
    right: 10px;
    width: 110px;
    height: 110px;
  }
  
  .event-ramadan .event-3d-cube::before {
    width: 80px;
    height: 80px;
  }
  
  .event-ramadan .event-3d-cube::after {
    width: 55px;
    height: 55px;
  }
  
  .event-newyear .event-3d-cube::before {
    width: 80px;
    height: 80px;
  }
  
  .event-newyear .event-3d-cube::after {
    font-size: 45px;
  }
  
  .event-valentine .event-3d-cube::before {
    font-size: 60px;
  }
  
  .event-valentine .event-3d-cube::after {
    width: 90px;
    height: 90px;
  }
  
  .event-easter .event-3d-cube::before {
    font-size: 55px;
  }
  
  .event-easter .event-3d-cube::after {
    width: 90px;
    height: 90px;
  }
  
  .event-summer .event-3d-cube::before {
    width: 70px;
    height: 70px;
  }
  
  .event-summer .event-3d-cube::after {
    width: 100px;
    height: 100px;
    border-width: 3px;
  }
  
  .event-halloween .event-3d-cube::before {
    font-size: 65px;
  }
  
  .event-halloween .event-3d-cube::after {
    width: 90px;
    height: 90px;
  }
  
  .event-christmas .event-3d-cube::before {
    font-size: 65px;
  }
  
  .event-christmas .event-3d-cube::after {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
  .event-3d-display {
    top: 90px;
    right: 5px;
    width: 90px;
    height: 90px;
  }
  
  .event-ramadan .event-3d-cube::before {
    width: 65px;
    height: 65px;
  }
  
  .event-ramadan .event-3d-cube::after {
    width: 45px;
    height: 45px;
  }
  
  .event-newyear .event-3d-cube::before {
    width: 65px;
    height: 65px;
  }
  
  .event-newyear .event-3d-cube::after {
    font-size: 35px;
  }
  
  .event-valentine .event-3d-cube::before {
    font-size: 50px;
  }
  
  .event-valentine .event-3d-cube::after {
    width: 75px;
    height: 75px;
  }
  
  .event-easter .event-3d-cube::before {
    font-size: 45px;
  }
  
  .event-easter .event-3d-cube::after {
    width: 75px;
    height: 75px;
  }
  
  .event-summer .event-3d-cube::before {
    width: 55px;
    height: 55px;
  }
  
  .event-summer .event-3d-cube::after {
    width: 80px;
    height: 80px;
    border-width: 2px;
  }
  
  .event-halloween .event-3d-cube::before {
    font-size: 55px;
  }
  
  .event-halloween .event-3d-cube::after {
    width: 75px;
    height: 75px;
  }
  
  .event-christmas .event-3d-cube::before {
    font-size: 55px;
  }
  
  .event-christmas .event-3d-cube::after {
    font-size: 25px;
  }
}