/* Puja 2026 splash v3: real aarti clip, lit from dark to light.
   One variable, --lit (0 = dark mandap, 1 = fully lit), is written by splash-video.js from the
   video's own clock; every light layer below reads it, so light always matches the picture. */
@property --lit{syntax:"<number>";inherits:true;initial-value:0}
html{background:var(--deep)}

#splash{--lit:0;--bloom:0;--bmin:.72;position:fixed;inset:0;z-index:100;height:100dvh;overflow:hidden;background:#070103;color:var(--ink);
  transition:opacity .9s ease,visibility .9s}
#splash.gone{opacity:0;visibility:hidden}

/* the picture: a still underneath (shown if the video cannot play), the clip on top */
#splash .sp3-still,#splash .sp3-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
#splash .sp3-still{background:url("../media/aarti-9x16-end.jpg") 50% 40%/cover no-repeat}
#splash .sp3-still,#splash .sp3-video{
  filter:brightness(calc(var(--bmin) + (1 - var(--bmin)) * var(--lit))) saturate(calc(.75 + .25 * var(--lit))) contrast(calc(1.12 - .12 * var(--lit)))}
#splash.video-on .sp3-still{opacity:0}

/* darkness that opens from the aarti lamp: a pool of light grows until it covers the screen */
#splash .sp3-dark{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 42% 78%,
    rgba(7,1,3,0) calc(var(--lit) * 150%),
    rgba(7,1,3,.55) calc(var(--lit) * 150% + 18%),
    rgba(7,1,3,.94) calc(var(--lit) * 150% + 42%))}
/* warm lamp colour laid over the picture, strongest mid-transition */
#splash .sp3-warm{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(120% 90% at 42% 80%,rgba(255,170,70,.9),rgba(179,18,43,.25) 60%,transparent 85%);
  opacity:calc(.55 * (1 - var(--lit)))}
/* final bloom: gold light fills the frame, the site fades in from it */
#splash .sp3-bloom{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 38%,#fff9ec 0%,#ffe2a0 30%,#ffc15a 62%,rgba(255,140,50,.85) 100%);
  opacity:var(--bloom)}
/* grain + vignette, one fixed layer, never animated */
#splash::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(5,1,2,.72) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.18;mix-blend-mode:soft-light}

/* ---------- words + controls ---------- */
.sp3-title{position:relative;margin:0;text-align:center;
  font-size:clamp(1.7rem,5vw,2.8rem);line-height:1.5;color:var(--gold);text-shadow:0 2px 26px rgba(255,140,40,.7),0 0 2px rgba(0,0,0,.8);
  opacity:calc(clamp(0, calc((var(--lit) - .3) * 2.5), 1) * (1 - var(--bloom)));translate:0 calc((1 - var(--lit)) * 10px)}
.sp3-skip{position:absolute;z-index:5;top:calc(14px + env(safe-area-inset-top));right:14px;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid var(--line);background:rgba(20,2,8,.45);color:var(--ink);font:500 .95rem 'Hind Siliguri',sans-serif;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sp3-skip:hover{color:var(--gold);background:rgba(20,2,8,.65)}
.sp3-foot{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:90px 16px calc(18px + env(safe-area-inset-bottom));
  display:grid;justify-items:center;gap:12px;background:linear-gradient(180deg,transparent,rgba(8,1,3,.78) 60%)}
/* nine clay diyas, lit centre-first by splash-video.js (li.lit); each is a bowl (li), a flame (::before),
   a white-hot core (<i>) and a halo (::after); only transform, scale and opacity ever animate */
#splash{--diya-clay:#b5673a;--diya-rim:#d9955e;--diya-shade:#5a2210;--flame-core:#fff4d6;--flame-mid:#ffc44d;--flame-edge:#ff7a1a;--flame-glow:rgba(255,166,60,.75)}
.sp3-diyas{position:relative;display:flex;align-items:flex-end;gap:clamp(8px,2.2vw,16px);list-style:none;margin:0;padding:calc(clamp(22px,6vw,34px) * .62) 0 0}
/* one warm pool of light on the ground under the whole row, as bright as the mandap is lit */
.sp3-diyas::after{content:"";position:absolute;left:0;top:100%;width:100%;height:18px;margin-top:-9px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,150,50,.35),transparent);opacity:var(--lit)}
/* the bowl: a 3px clear band on top carries the dark wick nub, the clay starts at the lip below it */
.sp3-diyas li{position:relative;isolation:isolate;box-sizing:content-box;width:clamp(22px,6vw,34px);aspect-ratio:100/42;
  border-top:3px solid transparent;border-radius:0 0 55% 55% / 0 0 100% 100%;opacity:.55;transition:opacity .6s ease;
  background:linear-gradient(#2b0f06,#2b0f06) 50% 0/2px 3px no-repeat border-box,
    radial-gradient(90% 70% at 50% 0,var(--diya-rim),transparent 70%) padding-box,
    linear-gradient(180deg,var(--diya-clay) 30%,var(--diya-shade)) padding-box;
  box-shadow:inset 0 1px 0 rgba(255,214,160,.45),inset 0 -3px 4px rgba(40,10,2,.6),0 2px 3px rgba(0,0,0,.5)}
.sp3-diyas li.lit{opacity:1;
  background:linear-gradient(#2b0f06,#2b0f06) 50% 0/2px 3px no-repeat border-box,
    radial-gradient(90% 80% at 50% 0,#ffd9a3,var(--diya-rim) 35%,transparent 75%) padding-box,
    linear-gradient(180deg,var(--diya-clay) 30%,var(--diya-shade)) padding-box}
/* flame + core grow from the wick; the flicker rides on transform so it never fights the scale-in */
.sp3-diyas li::before,.sp3-diyas li i{content:"";position:absolute;bottom:100%;aspect-ratio:34/58;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;transform-origin:50% 100%;scale:0;transition:scale .42s cubic-bezier(.3,1.5,.5,1)}
.sp3-diyas li::before{left:33%;width:34%;
  background:radial-gradient(90% 75% at 50% 100%,var(--flame-core) 0 18%,var(--flame-mid) 48%,var(--flame-edge) 88%);
  box-shadow:0 0 6px 1px rgba(255,170,60,.6)}
.sp3-diyas li i{left:42.35%;width:15.3%;margin-bottom:1px;background:radial-gradient(50% 50% at 50% 60%,var(--flame-core) 45%,transparent 100%)}
/* halo: 2.4x the bowl, centred on the flame (margins in % of width), behind the clay */
.sp3-diyas li::after{content:"";position:absolute;z-index:-1;top:0;left:-70%;width:240%;aspect-ratio:1;margin-top:-149%;pointer-events:none;
  background:radial-gradient(closest-side,var(--flame-glow),transparent);opacity:0;transition:opacity .6s ease}
.sp3-diyas li.lit::before,.sp3-diyas li.lit i{scale:1;
  animation:diyaFlicker calc(1.15s + var(--i,0) * .07s) ease-in-out calc(var(--i,0) * -.23s) infinite}
.sp3-diyas li.lit::after{opacity:1;animation:diyaFlickerHalo calc(1.15s + var(--i,0) * .07s) ease-in-out .6s infinite}
@keyframes diyaFlicker{
  0%,100%{transform:skewX(0) scale(1,1)} 25%{transform:skewX(-2deg) scale(1.03,.96)}
  55%{transform:skewX(1.5deg) scale(.97,1.04)} 80%{transform:skewX(2deg) scale(1.01,.99)}}
@keyframes diyaFlickerHalo{0%,100%{opacity:1} 40%{opacity:.8} 70%{opacity:.93}}
@media (prefers-reduced-motion:reduce){.sp3-diyas li.lit::before,.sp3-diyas li.lit i,.sp3-diyas li.lit::after{animation:none}}
.sp3-skip:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* one clip per shape: phones play the 9:16 clip, every wider screen plays the 16:9 clip; both fill
   the frame (cover), and the still underneath is the matching clip's last frame */
@media (max-aspect-ratio:3/4){
  .sp3-title{font-size:clamp(2rem,10vw,2.8rem)}
}
@media (min-aspect-ratio:3/4){
  #splash .sp3-still{background:url("../media/aarti-16x9-end.jpg") 50% 40%/cover no-repeat}
}

/* sound toggle (js/sound-toggle.js): same glass and gold as the nav's theme switch; above the splash and the music bar */
.sndmute{position:fixed;z-index:110;left:16px;bottom:calc(16px + env(safe-area-inset-bottom) + var(--musicbar-h));width:44px;height:44px;
  display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(42,4,16,.62);color:var(--gold);
  font-size:1.3rem;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .25s,background .2s,bottom .3s}
.sndmute:hover{background:rgba(74,8,26,.78)}
.sndmute:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sndmute.out{opacity:0;pointer-events:none}
.sndmute.onsplash{top:calc(14px + env(safe-area-inset-top));bottom:auto;left:14px}   /* level with Skip on the splash */
.sndmute .ph{position:static;inset:auto;display:block;border-radius:0;opacity:1;transition:none;line-height:1}   /* not the hero's photo .ph */
@media (prefers-reduced-motion:reduce){.sndmute{transition:none}}