/*!
 * Diwali Diya Strip — infinite scrolling row of diyas along the bottom.
 * Pure CSS/HTML, no JavaScript required.
 *
 * Usage: link this stylesheet, then paste the markup below anywhere in your page
 * (e.g. right after <body>). It renders as a fixed strip along the bottom edge
 * of the viewport, scrolling left forever.
 *
 * <div class="dw-diyastrip">
 *   <div class="dw-diyastrip-track">
 *     <div class="dw-diyastrip-item"> ... </div>   (repeat N times — group 1)
 *     <div class="dw-diyastrip-item"> ... </div>   (repeat the SAME N times again — group 2, identical copy)
 *   </div>
 * </div>
 *
 * The track must contain the group of diyas TWICE back-to-back (identical copies)
 * for the loop to appear seamless — the animation scrolls exactly one group's width.
 *
 * Make sure group 1's total width is GREATER than the widest viewport you support
 * (item width is in vw precisely so this holds true at any window size) — otherwise
 * the strip runs out of diyas before the clone catches up and you'll see a gap.
 * See index.html for a full copy-pasteable example.
 */

.dw-diyastrip{
  position:fixed;
  left:0; bottom:0;
  width:100%;
  height:90px;
  overflow:hidden;
  pointer-events:none;
  z-index:999997;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.dw-diyastrip-track{
  display:flex;
  width:max-content;
  align-items:flex-end;
  height:100%;
  animation:dwDiyaStripScroll 22s linear infinite;
}

.dw-diyastrip-item{
  flex:none;
  width:max(70px, 9vw);
  display:flex;
  flex-direction:column;
  align-items:center;
}

.dw-diyastrip-flame-wrap{
  position:relative;
  width:14px;
  height:30px;
  margin-bottom:-6px;
}
.dw-diyastrip-flame{
  position:absolute;
  bottom:0; left:50%;
  width:12px; height:22px;
  background:radial-gradient(circle at 50% 80%, #fff6c8 0%, #ffb347 35%, #ff4500 70%, transparent 100%);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  transform:translateX(-50%);
  transform-origin:bottom center;
  animation:dwDiyaStripFlicker 1.6s ease-in-out infinite;
}
.dw-diyastrip-flame::after{
  content:"";
  position:absolute;
  left:50%; top:30%;
  width:5px; height:9px;
  background:#fffbe0;
  border-radius:50%;
  transform:translateX(-50%);
  opacity:0.9;
}
.dw-diyastrip-glow{
  position:absolute;
  bottom:-4px; left:50%;
  width:70px; height:70px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,180,60,0.55) 0%, rgba(255,120,20,0.15) 45%, transparent 70%);
  border-radius:50%;
  animation:dwDiyaStripGlow 1.6s ease-in-out infinite;
  z-index:-1;
}
.dw-diyastrip-pot{
  width:54px;
  height:22px;
  background:linear-gradient(180deg, #b5541a 0%, #7c3a10 60%, #5a2a0b 100%);
  border-radius:0 0 50% 50% / 0 0 70% 70%;
  position:relative;
  box-shadow:inset 0 -4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.5);
}
.dw-diyastrip-pot::before{
  content:"";
  position:absolute;
  top:-4px; left:0;
  width:100%; height:8px;
  background:#c9692a;
  border-radius:50%;
}

@keyframes dwDiyaStripScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@keyframes dwDiyaStripFlicker{
  0%,100%{ transform:translateX(-50%) rotate(-3deg) scaleY(1); }
  25%{ transform:translateX(-50%) rotate(2deg) scaleY(1.05); }
  50%{ transform:translateX(-50%) rotate(-2deg) scaleY(0.95); }
  75%{ transform:translateX(-50%) rotate(3deg) scaleY(1.08); }
}
@keyframes dwDiyaStripGlow{
  0%,100%{ opacity:0.8; transform:translateX(-50%) scale(1); }
  50%{ opacity:1; transform:translateX(-50%) scale(1.15); }
}