/* Shubh: a lotus pond at first light, in snow white, soft jade and gold. Shri Ganesh is drawn in gold line,
   fills with light, and rises into the crown of a gateway.
   The rules without ".js" describe the finished scene; the ".js .stage:not(...)" rules hold each part back until its act.
   Page, type and sections come from base.css. */
:root{--c1:cubic-bezier(.3,.1,.2,1);--gold:#B58B35;--gold-deep:#8F6B22;--jade:#2F4A40}
.stage{position:relative;height:min(100svh,880px);min-height:640px;overflow:hidden;container-type:size;text-align:center;color:var(--jade);isolation:isolate}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,#DCE5DA 0%,#EDF0E6 38%,#F7F4EA 70%,#E6ECE1 100%)}
.sky.warm{background:radial-gradient(90% 60% at 50% 30%,rgba(255,244,214,.95) 0%,rgba(250,236,200,.6) 45%,rgba(247,244,234,0) 80%);transition:opacity 3s ease}
.mist{position:absolute;left:-10%;right:-10%;bottom:14cqh;height:26cqh;background:radial-gradient(60% 60% at 50% 60%,rgba(255,255,255,.85),transparent 72%);animation:s-mist 11s ease-in-out infinite alternate;pointer-events:none}
@keyframes s-mist{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.stage .dust{z-index:1;opacity:.7}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(transparent,var(--from));pointer-events:none;z-index:7}

/* ---------- Shri Ganesh ---------- */
.murti{position:absolute;left:50%;top:36%;width:min(74cqw,330px);aspect-ratio:560/780;z-index:4;translate:-50% -50%;
  transform:translateY(-17cqh) scale(.4);transition:transform 2.4s var(--c1)}
.js .stage:not(.a3) .murti{transform:none}
.murti-in,.murti svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.glines{stroke:var(--gold);stroke-width:2.6;filter:drop-shadow(0 0 3px rgba(255,236,170,.9))}
.js .murti .glines .gl{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.25s var(--c1);transition-delay:calc(.9s + var(--i) * 58ms)}
.js .stage:not(.open) .murti .glines .gl{stroke-dashoffset:1;transition:none}
/* the same drawing, very thick and blurred, becomes the body of light behind the lines */
.gbody{stroke:#FFFDF2;stroke-width:60;filter:blur(9px);opacity:.96;transition:opacity 1.8s ease}
.js .stage:not(.a2) .gbody{opacity:0}
.aura{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(255,244,205,.95) 0%,rgba(255,238,190,.55) 34%,transparent 66%);z-index:-1;transition:opacity 1.6s ease,scale 2s var(--c1);animation:s-breathe 5s ease-in-out infinite}
@keyframes s-breathe{50%{transform:scale(1.06);opacity:.86}}
.js .stage:not(.a2) .aura{opacity:0;scale:.5}
.rays{position:absolute;inset:-55%;border-radius:50%;z-index:-2;opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(214,176,92,.5) 0deg 2.5deg,transparent 2.5deg 12deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 60%);mask:radial-gradient(circle,#000 20%,transparent 60%);
  animation:s-turn 90s linear infinite;transition:opacity 1.8s ease,scale 2s var(--c1)}
@keyframes s-turn{to{transform:rotate(360deg)}}
.js .stage:not(.a2) .rays{opacity:0;scale:.3}
.js .stage.a2:not(.a3) .rays{opacity:.9}
.stage.a2:not(.done) .murti-in{animation:s-pop 1.2s var(--c1)}
@keyframes s-pop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
/* the spark that rises out of the lotus and starts the drawing */
.spark{position:absolute;left:50%;top:70%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;z-index:6;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#fff 0 30%,#FFE9A8 45%,transparent 70%);box-shadow:0 0 18px 8px rgba(255,226,150,.8)}
.stage.open:not(.done) .spark{animation:s-spark 1.5s cubic-bezier(.4,0,.2,1) .35s both}
@keyframes s-spark{0%{opacity:0;transform:translateY(0) scale(.4)}15%{opacity:1}80%{opacity:1;transform:translateY(-44cqh) scale(1.2)}100%{opacity:0;transform:translateY(-46cqh) scale(2.6)}}

.mantra{position:absolute;left:0;right:0;top:66%;z-index:5;display:flex;flex-direction:column;gap:4px;padding:0 30px;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.mantra span{font-family:'Tiro Devanagari Hindi',serif;font-size:21px;color:var(--gold-deep)}
.mantra small{font-family:'Fraunces',serif;font-style:italic;font-size:14px;opacity:.85}
.script .mantra small{font-family:var(--ui),sans-serif;font-style:normal}
.js .stage.a2:not(.a3) .mantra{opacity:1;transition-delay:.9s}

/* ---------- the gateway ---------- */
.gate{position:absolute;left:10px;top:8px;width:calc(100% - 20px);height:calc(100% - 8px);z-index:3;pointer-events:none;overflow:visible}
.gate path{fill:none;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2.6s var(--c1) .3s}
.gate .in{stroke-width:.8;opacity:.75;transition-delay:.8s}
.js .stage:not(.a3) .gate path{stroke-dashoffset:1}
.hbell{position:absolute;top:0;width:22px;z-index:3;transition:transform 1.6s cubic-bezier(.3,1.25,.4,1) 1.3s}
.hbell.b1{left:19%;--c:27cqh}.hbell.b2{right:19%;--c:27cqh;transition-delay:1.55s}
.js .stage:not(.a3) .hbell{transform:translateY(-60cqh)}
.hbell-in{transform-origin:50% 0;padding-top:var(--c);background:linear-gradient(var(--gold),var(--gold)) 50% 0/1px var(--c) no-repeat;animation:s-swing 4.6s ease-in-out infinite alternate}
.b2 .hbell-in{animation-duration:5.4s;animation-delay:-1.6s}
.hbell-in svg{display:block;width:100%;filter:drop-shadow(0 3px 4px rgba(120,90,20,.3))}
@keyframes s-swing{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}

/* ---------- the lotus: the trigger, then the heart of the pond ---------- */
.lotus{position:absolute;left:50%;top:70%;width:150px;height:118px;margin:-74px 0 0 -75px;padding:0;border:0;background:none;z-index:6;-webkit-tap-highlight-color:transparent;
  transform:translateY(19cqh) scale(.62);transition:transform 2.4s var(--c1)}
.js .stage:not(.a3) .lotus{transform:none}
.js .stage:not(.open) .lotus{cursor:pointer}
.stage.open .lotus{pointer-events:none}
.lotus-in{position:absolute;inset:0;animation:s-bob 4.4s ease-in-out infinite}
@keyframes s-bob{50%{transform:translateY(-5px)}}
.lotus-glow{position:absolute;inset:-34%;border-radius:50%;background:radial-gradient(circle,rgba(255,244,205,.95) 0%,rgba(255,240,200,.35) 42%,transparent 68%);animation:s-breathe 3.4s ease-in-out infinite}
.lp{position:absolute;left:50%;bottom:6px;width:48px;height:96px;margin-left:-24px;overflow:visible;transform-origin:50% 96%;z-index:calc(5 + var(--r) * 5);
  transform:rotate(calc(var(--k) * 24deg)) scale(calc(1 - var(--r) * .2));transition:transform 1.5s cubic-bezier(.22,1.3,.36,1);transition-delay:var(--d);filter:drop-shadow(0 2px 3px rgba(90,110,95,.25))}
.js .stage:not(.open) .lp{transform:rotate(calc(var(--k) * 3.2deg)) scale(calc(.94 - var(--r) * .2));transition:none}

/* ---------- the pond ---------- */
.pond{position:absolute;left:0;right:0;bottom:0;height:20cqh;z-index:2;background:linear-gradient(180deg,rgba(201,216,203,0),rgba(190,208,193,.75) 45%,rgba(176,198,181,.9));transition:opacity 2s ease}
.water{position:absolute;inset:0;width:100%;height:100%}
.rip{animation:s-rip 5s ease-in-out calc(var(--i) * -.8s) infinite alternate}
@keyframes s-rip{from{transform:translateX(-12px);opacity:.25}to{transform:translateX(12px);opacity:.75}}
.pad,.bloom{position:absolute;height:auto;overflow:visible;transition:transform 2s var(--c1),opacity 1.6s ease;filter:drop-shadow(0 2px 3px rgba(70,95,80,.2))}
.pad.p1{left:4%;bottom:34%;width:26%}.pad.p2{right:6%;bottom:52%;width:22%;transition-delay:.2s}.pad.p3{right:24%;bottom:8%;width:18%;transition-delay:.4s}
.bloom.bl1{left:8%;bottom:44%;width:22%;transition-delay:.5s}.bloom.bl2{right:9%;bottom:16%;width:18%;transition-delay:.8s}
.js .stage:not(.a3) .pad,.js .stage:not(.a3) .bloom{transform:translateY(40px) scale(.6);opacity:0}

/* ---------- words ---------- */
.words{position:absolute;left:0;right:0;top:31.5cqh;z-index:5;display:flex;flex-direction:column;align-items:center;gap:1.4cqh;padding:0 50px}
.words .deva{color:var(--gold-deep);font-size:16px}
.words .names{font-size:clamp(40px,13cqw,60px);line-height:1.12;color:var(--jade)}
.words .names em{margin:.2em 0 .05em;color:var(--gold-deep)}
.script .words .names{font-size:clamp(34px,10.5cqw,48px);line-height:1.2}
.w{display:block;transition:opacity 1.2s ease,filter 1.2s ease,transform 1.2s var(--c1);transition-delay:calc(var(--i) * .2s)}
.js .stage:not(.a4) .w{opacity:0;filter:blur(9px);transform:translateY(14px)}

/* before the tap */
.cuewrap{display:none}
.js .cuewrap{position:absolute;left:0;right:0;top:calc(70% + 70px);z-index:6;display:flex;flex-direction:column;gap:8px;padding:0 20px;transition:opacity .7s ease,transform .7s ease}
.cuewrap .to-names{color:var(--jade)}.cuewrap .cue{color:var(--gold-deep)}
.js .stage.open .cuewrap{opacity:0;transform:translateY(10px);pointer-events:none}
.js .stage:not(.a2) .sky.warm{opacity:0}
.tskip{display:none}
.js .stage.open:not(.done) .tskip{display:block;position:absolute;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:8;border:1px solid rgba(47,74,64,.35);background:rgba(255,255,255,.7);color:var(--jade);
  font:600 12px/1 var(--ui),sans-serif;letter-spacing:.08em;padding:10px 16px;border-radius:999px;cursor:pointer;animation:t-rise .6s ease 1s both}

/* ---------- the rest of the page ---------- */
h2,.tl time,.names{color:var(--jade)}
.motif,.divider{color:var(--gold)}
.m-sun svg{animation:s-bob 5s ease-in-out infinite}
.m-kalash svg{transform-origin:50% 100%;animation:s-swing 5s ease-in-out infinite alternate}
.m-gate .pin{transform-box:view-box;transform-origin:32px 48px;animation:s-bob 2.4s ease-in-out infinite}
.footgan{overflow:visible}
.footgan .glines,.footgan{stroke:var(--gold);stroke-width:3}
.tfoot .deva{color:var(--gold-deep)}

/* refinements */
.hbell{top:19cqh}.hbell.b1,.hbell.b2{--c:8cqh}
.mantra{top:80%}
.js .stage:not(.open) .lotus{transform:scale(1.4)}
.js .stage:not(.a3) .pad{transform:none;opacity:.9}
.pre{display:none}
.js .pre{display:flex;flex-direction:column;align-items:center;gap:14px;position:absolute;left:0;right:0;top:27%;z-index:5;transition:opacity .7s ease;color:var(--gold-deep)}
.pre .deva{font-size:20px}
.pre i{display:block;width:1px;height:64px;background:linear-gradient(var(--gold),transparent)}
.js .stage.open .pre{opacity:0}

/* ===== countdown: four white lotus pads resting on the water, rising and falling a little out of step ===== */
.count{gap:10px;max-width:330px;padding-bottom:22px}
.count div{position:relative;aspect-ratio:1;border:0;border-radius:50%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 32%,#fff 0%,#F2F6EE 62%,#DCE7DC 100%);box-shadow:0 0 0 1px rgba(181,139,53,.55),0 0 0 5px rgba(255,255,255,.7),0 0 0 6px rgba(181,139,53,.22),0 12px 20px rgba(47,74,64,.12);
  animation:s-bob 4.6s ease-in-out infinite}
.count div:nth-child(even){margin-top:16px;animation-delay:-2.3s}
.count div::after{content:"";position:absolute;left:8%;right:8%;bottom:-19px;height:9px;border-radius:50%;border:1px solid rgba(143,169,150,.7);animation:s-ring 4.6s ease-in-out infinite}
.count div:nth-child(even)::after{animation-delay:-2.3s}
@keyframes s-ring{50%{transform:scaleX(1.18);opacity:.35}}
.count b{font-family:'Fraunces',serif;font-weight:500;font-size:25px;color:var(--jade)}
.count b.tk{animation:t-rise .45s var(--ease)}
.count span{font-size:8.5px;color:var(--gold-deep)}
.script .count span{font-size:10.5px}
/* ===== functions: a day-by-day path. Each day has one gold medallion; that day's functions sit beside it along a dotted line. ===== */
.tl{gap:0;padding-left:0;max-width:340px}
.tl-line,.tl-dot{display:none}
.tl li{position:relative;display:grid;grid-template-columns:60px 1fr;gap:16px;align-items:start;padding:0 0 18px;border:0;border-radius:0;background:none;box-shadow:none}
.tl li.main{background:none}
.tl li::before{content:"";position:absolute;left:29px;top:0;bottom:0;border-left:2px dotted rgba(181,139,53,.55)}
.tl li:last-child::before{bottom:auto;height:30px}
.tl li:last-child{padding-bottom:0}
.tl .ev-date{display:flex;visibility:hidden;position:relative;width:60px;height:60px;border-radius:50%;background:#fff;color:var(--jade);box-shadow:0 0 0 1px var(--gold),0 0 0 4px #fff,0 0 0 5px rgba(181,139,53,.35),0 8px 16px rgba(47,74,64,.12)}
.tl li.first .ev-date{visibility:visible}
.tl .ev-date b{font-family:'Fraunces',serif;font-weight:500;font-size:22px}
.tl .ev-date i{font-size:8.5px;color:var(--gold-deep)}
.ev-body{padding:13px 16px;border-radius:4px 18px 18px 18px;background:rgba(255,255,255,.7);border:1px solid rgba(181,139,53,.38);box-shadow:0 5px 14px rgba(47,74,64,.07)}
.tl li.main .ev-body{background:#fff;border-color:var(--gold);box-shadow:0 8px 20px rgba(181,139,53,.18)}
.tl .ev-full,.tl .ev-sep{display:none}
.tl time,.tl-cal{color:var(--gold-deep)}
.js .tl li.rv{transform:translateY(18px)}
.count{align-items:start}
.count div:nth-child(even){margin-top:0;top:16px}

/* ===== family, notes and function drawings in Shubh's colours ===== */
:root{--accent:#8F6B22}
.ev-art{right:14px;top:12px;color:var(--gold)}
.family h3{color:var(--jade)}
.family{padding:28px 18px;border-radius:18px;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(181,139,53,.4),0 0 0 6px rgba(255,255,255,.5),0 0 0 7px rgba(181,139,53,.2)}
.letter{background:#fff;border-color:rgba(181,139,53,.5);border-radius:4px 22px 22px 22px;box-shadow:0 10px 24px rgba(47,74,64,.08)}