/* 🌟 Richkart Laundry – Jhalar Style Diwali Lights (Pure CSS) */

.diwali-header-lights {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 9999;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  pointer-events: none;
}

/* main wire pattern - wavy like a jhalar */
.diwali-header-lights::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: repeating-linear-gradient(
    -30deg,
    transparent,
    transparent 8px,
    rgba(255, 193, 7, 0.25) 8px,
    rgba(255, 193, 7, 0.25) 9px
  );
  mask-image: radial-gradient(circle at top, black 20%, transparent 70%);
  opacity: 0.4;
}

/* individual hanging wires */
.jhalar {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
}

/* arc-like hanging string */
.jhalar::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 60px;
  border-top: 2px solid rgba(255, 220, 0, 0.5);
  border-radius: 0 0 60% 60%;
  box-shadow: 0 0 12px rgba(255, 200, 0, 0.2);
}

/* bulbs */
.jhalar span {
  position: relative;
  width: 12px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fffde7 20%, #ffe082 40%, #ffb300 90%);
  box-shadow:
    0 0 8px rgba(255,215,0,0.8),
    0 0 18px rgba(255,215,0,0.4);
  animation: flicker 1.2s infinite alternate ease-in-out;
}

/* position bulbs along curve */
.jhalar span:nth-child(1)  { top: 10px; }
.jhalar span:nth-child(2)  { top: 20px; }
.jhalar span:nth-child(3)  { top: 30px; }
.jhalar span:nth-child(4)  { top: 40px; }
.jhalar span:nth-child(5)  { top: 30px; }
.jhalar span:nth-child(6)  { top: 20px; }
.jhalar span:nth-child(7)  { top: 10px; }

/* repeat pattern visually */
.jhalar span:nth-child(8)  { top: 15px; }
.jhalar span:nth-child(9)  { top: 25px; }
.jhalar span:nth-child(10) { top: 35px; }
.jhalar span:nth-child(11) { top: 45px; }
.jhalar span:nth-child(12) { top: 35px; }
.jhalar span:nth-child(13) { top: 25px; }
.jhalar span:nth-child(14) { top: 15px; }

/* glowing animation */
@keyframes flicker {
  0%, 100% {
    opacity: 0.8;
    transform: translateY(0px) rotate(1deg);
    box-shadow:
      0 0 6px rgba(255,215,0,.8),
      0 0 14px rgba(255,215,0,.6);
  }
  50% {
    opacity: 1;
    transform: translateY(2px) rotate(-2deg);
    box-shadow:
      0 0 14px rgba(255,235,59,1),
      0 0 28px rgba(255,215,0,.9);
  }
}

/* glowing "Happy Diwali" text */
.diwali-header-lights h1 {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: #232323;
  letter-spacing: 1px;
  text-shadow:
    0 0 6px #ffe082,
    0 0 16px #ffd740,
    0 0 25px #ffb300;
  animation: textglow 2s ease-in-out infinite alternate;
}

@keyframes textglow {
  from { text-shadow: 0 0 10px #fff9c4, 0 0 25px #ffc107; }
  to   { text-shadow: 0 0 15px #fff59d, 0 0 35px #ffca28; }
}

@media (max-width: 992px) {
  .diwali-header-lights { height: 90px; }
  .jhalar span { width: 10px; height: 16px; }
  .diwali-header-lights h1 { font-size: 18px; }
}