/* ============================================================
   Opening: night sky, diyas, flood of light
   ============================================================ */
#intro{
  position:fixed;inset:0;z-index:50;cursor:pointer;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%,#4a0d1a 0%,transparent 70%),
    linear-gradient(#12030a,#2a0610 60%,#3d0b17);
  transition:opacity 1.6s ease,visibility 1.6s;
  -webkit-tap-highlight-color:transparent;
}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}

.stars{position:absolute;inset:0;opacity:.7}
.stars i{
  position:absolute;width:2px;height:2px;border-radius:50%;background:var(--gold-hi);
  box-shadow:0 0 6px 1px rgba(230,203,133,.7);animation:twinkle 4s infinite ease-in-out;
}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.9}}

.intro-text{position:absolute;left:0;right:0;top:22%;text-align:center;padding:0 24px;z-index:3}
.hi-intro{
  font-family:var(--display);font-size:clamp(2.4rem,9vw,5rem);line-height:1.15;
  filter:drop-shadow(0 0 14px rgba(230,190,110,.5));
  opacity:0;transform:translateY(10px);transition:opacity 1.6s ease,transform 1.6s ease;
}
body.loaded .hi-intro{opacity:1;transform:none}
.prompt{margin-top:1.6rem;font-size:.8rem;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);transition:opacity .5s}
.prompt span{
  display:inline-block;padding:.9rem 1.6rem;border:1px solid rgba(201,162,75,.45);border-radius:999px;
  background:rgba(46,7,16,.5);backdrop-filter:blur(4px);text-shadow:0 0 12px rgba(230,190,110,.7);
  animation:pulse 2.6s infinite ease-in-out;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,116,42,0);opacity:.75}50%{box-shadow:0 0 28px 2px rgba(224,116,42,.35);opacity:1}}
body.lit .prompt{opacity:0}

#diyas{position:absolute;inset:0;z-index:2}
.diya{position:absolute;bottom:var(--b);left:var(--x);width:var(--s);transform:translateX(-50%);opacity:var(--o)}
.diya svg{display:block;width:100%;height:auto;overflow:visible}
.diya.lit svg{filter:drop-shadow(0 0 14px rgba(255,160,60,.55)) brightness(1.18)}
.diya .glow{
  position:absolute;left:50%;top:-30%;width:420%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);
  background:radial-gradient(circle,rgba(255,200,100,.9) 0%,rgba(240,130,45,.42) 30%,rgba(185,83,29,.12) 52%,transparent 70%);
  opacity:0;transition:opacity 1s ease,transform 1.4s ease;pointer-events:none;mix-blend-mode:screen;
}
.diya .flame{
  position:absolute;left:50%;bottom:62%;width:15%;height:85%;transform:translateX(-50%) scale(0);transform-origin:50% 100%;
  background:radial-gradient(ellipse at 50% 72%,#fff6d8 0%,#ffcf6a 30%,#f08a24 62%,rgba(185,83,29,0) 100%);
  border-radius:50% 50% 50% 50%/70% 70% 30% 30%;
  filter:blur(.4px) drop-shadow(0 0 8px #ffb347) drop-shadow(0 0 18px rgba(255,140,40,.8));
  transition:transform .7s cubic-bezier(.2,1.4,.4,1);
}
.diya.lit .flame{transform:translateX(-50%) scale(1);animation:flicker 1.3s infinite ease-in-out alternate .7s}
.diya.lit .glow{opacity:1;transform:translate(-50%,-50%) scale(1)}

.flood{
  position:absolute;left:50%;bottom:0;width:260vmax;aspect-ratio:1;transform:translate(-50%,50%) scale(0);
  border-radius:50%;pointer-events:none;z-index:4;
  background:radial-gradient(circle,#ffe2a0 0%,#f0a64a 22%,#c1581f 45%,rgba(90,16,32,0) 70%);
  opacity:0;transition:transform 2.4s cubic-bezier(.5,0,.3,1),opacity 1.2s ease;
}
body.flooding .flood{transform:translate(-50%,50%) scale(1);opacity:1}