/*!
 * Diwali Hanging Lanterns — pure CSS/HTML, no JavaScript required.
 *
 * Usage: link this stylesheet, then paste the markup below anywhere in your page
 * (e.g. right after <body>). Position/sizes are fixed to the viewport so it
 * works as an overlay on any existing site:
 *
 * <div class="dw-lantern dw-lantern-left">
 *   <div class="dw-lantern-string"></div>
 *   <div class="dw-lantern-glow"></div>
 *   <div class="dw-lantern-diamond"></div>
 *   <div class="dw-lantern-bead"></div>
 * </div>
 * <div class="dw-lantern dw-lantern-right">
 *   <div class="dw-lantern-string"></div>
 *   <div class="dw-lantern-glow"></div>
 *   <div class="dw-lantern-diamond"></div>
 *   <div class="dw-lantern-bead"></div>
 * </div>
 *
 * Add as many `.dw-lantern` blocks as you like — just set a custom `left`/`right`
 * via an inline style or an extra class, e.g. <div class="dw-lantern" style="left:30%">...
 */

.dw-lantern{
  position:fixed;
  top:0;
  width:60px;
  height:170px;
  pointer-events:none;
  transform-origin:top center;
  animation:dwLanternSway 3.6s ease-in-out infinite;
  z-index:999998;
}
.dw-lantern-left{ left:4%; }
.dw-lantern-right{ right:4%; animation-delay:0.8s; animation-direction:alternate-reverse; }

.dw-lantern-string{
  position:absolute;
  top:0; left:50%;
  width:2px; height:72px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(255,255,255,0.15));
  transform:translateX(-50%);
}

.dw-lantern-glow{
  position:absolute;
  top:56px; left:50%;
  width:95px; height:95px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,170,60,0.55) 0%, rgba(255,120,20,0.18) 50%, transparent 75%);
  border-radius:50%;
  filter:blur(2px);
}

.dw-lantern-diamond{
  position:absolute;
  top:70px; left:50%;
  width:46px; height:46px;
  transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg, #ffe9a8 0%, #ffb347 45%, #ff8c20 75%, #e8650a 100%);
  border-radius:6px;
  box-shadow:0 0 22px 4px rgba(255,160,50,0.6), inset 0 0 12px rgba(255,255,255,0.4);
}
.dw-lantern-diamond::after{
  content:"";
  position:absolute;
  inset:9px;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.85), transparent 60%);
  border-radius:4px;
}

.dw-lantern-bead{
  position:absolute;
  top:117px; left:50%;
  width:10px; height:10px;
  transform:translateX(-50%);
  background:radial-gradient(circle, #ffe9a8, #ff8c20);
  border-radius:50%;
  box-shadow:0 0 8px 2px rgba(255,160,50,0.7);
}
.dw-lantern-bead::before{
  content:"";
  position:absolute;
  top:-11px; left:50%;
  width:1px; height:11px;
  background:rgba(255,255,255,0.45);
  transform:translateX(-50%);
}

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