/**
 * Lonex Diwali Celebration - Live V2 Edition
 * 100% Non-intrusive (pointer-events: none), 0% CPU Idle, Zero Hang Guaranteed.
 */

/* ================= GLOBAL SAFETY: NEVER BLOCK ANY CLICKS OR SCROLLS ================= */
#diwali-greeting-badge,
#diwali-greeting-badge *,
#diwali-top-toran,
#diwali-top-toran *,
.diwali-lantern,
.diwali-lantern *,
.diwali-corner-diya,
.diwali-corner-diya * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* ================= 1. FESTIVE "HAPPY DIWALI" ENTRY GREETING ================= */
#diwali-greeting-badge {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 99998;
  background: rgba(22, 10, 32, 0.94);
  border: 1.5px solid #ffd700;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.35);
  padding: 8px 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.8px;
  opacity: 1;
  visibility: visible;
  animation: badgeSlideIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.75s ease, transform 0.75s ease, visibility 0.75s;
  white-space: nowrap;
}

#diwali-greeting-badge.diwali-badge-fade {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-15px);
}

@keyframes badgeSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-30px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.diwali-badge-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.diwali-badge-text {
  background: linear-gradient(135deg, #ffffff 0%, #fff275 30%, #ffd700 70%, #ff9f1c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ================= 2. TOP TORAN (CRISP MARIGOLD GARLAND) ================= */
#diwali-top-toran {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 58px;
  z-index: 99995;
  background-image: url('../images/toran-garland.svg');
  background-repeat: repeat-x;
  background-size: auto 58px;
  background-position: top center;
}

/* ================= 3. HANGING LANTERNS (KANDILS LEFT & RIGHT) ================= */
.diwali-lantern {
  position: fixed;
  top: 0;
  width: 65px;
  height: auto;
  z-index: 99996;
  transform-origin: top center;
}

.diwali-lantern-left {
  left: 12px;
  animation: kandilSway 4.8s ease-in-out infinite;
}

.diwali-lantern-right {
  right: 12px;
  animation: kandilSway 4.8s ease-in-out infinite -2.4s;
}

.diwali-lantern img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes kandilSway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}

/* ================= 4. BOTTOM CORNER DIYAS (RANGOLI & EARTHEN DIYAS) ================= */
.diwali-corner-diya {
  position: fixed;
  bottom: 0;
  width: 155px;
  height: auto;
  z-index: 99996;
}

.diwali-corner-diya-left {
  left: 0;
}

.diwali-corner-diya-right {
  right: 0;
  transform: scaleX(-1);
}

.diwali-corner-diya img {
  width: 100%;
  height: auto;
  display: block;
}

/* Flame Flicker (0% CPU, CSS transform only) */
.flame-group {
  transform-origin: 65px 30px;
  animation: diyaFlameFlicker 1.8s ease-in-out infinite;
}

.diya-back .flame-group {
  animation: diyaFlameFlicker 1.5s ease-in-out infinite -0.6s;
}

@keyframes diyaFlameFlicker {
  0%, 100% { transform: scale(1) rotate(-1.5deg); opacity: 0.95; }
  25% { transform: scale(1.05, 0.95) rotate(1.5deg); opacity: 1; }
  50% { transform: scale(0.97, 1.03) rotate(-1deg); opacity: 0.93; }
  75% { transform: scale(1.04, 1.01) rotate(1deg); opacity: 1; }
}

/* ================= RESPONSIVE ADJUSTMENTS ================= */
@media (max-width: 768px) {
  #diwali-top-toran {
    height: 44px;
    background-size: auto 44px;
  }
  #diwali-greeting-badge {
    top: 52px;
    padding: 6px 14px;
    font-size: 0.8rem;
  }
  .diwali-lantern {
    width: 46px;
  }
  .diwali-lantern-left {
    left: 4px;
  }
  .diwali-lantern-right {
    right: 4px;
  }
  .diwali-corner-diya {
    width: 105px;
  }
}

@media (max-width: 480px) {
  #diwali-top-toran {
    height: 36px;
    background-size: auto 36px;
  }
  #diwali-greeting-badge {
    top: 42px;
    padding: 5px 12px;
    font-size: 0.72rem;
  }
  .diwali-lantern {
    width: 34px;
    left: 2px;
  }
  .diwali-lantern-right {
    right: 2px;
  }
  .diwali-corner-diya {
    width: 80px;
  }
}