/* Rajwada: painted palace doors that open onto a lake palace, framed by a garlanded archway.
   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);--accent:#9A6B2F;--rose:#B5606A;--deep:#5B3A3A}
.stage{position:relative;height:min(100svh,880px);min-height:640px;overflow:hidden;container-type:size;text-align:center;color:var(--deep);isolation:isolate;background:#F6E9DD}

/* the lake scene */
.scene{position:absolute;inset:0;transition:transform 7s cubic-bezier(.2,.6,.2,1)}
.scene img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;animation:r-drift 26s ease-in-out infinite alternate}
@keyframes r-drift{from{transform:scale(1.04) translateX(-1%)}to{transform:scale(1.04) translateX(1%)}}
.js .stage:not(.a2) .scene{transform:scale(1.22)}
.sun{position:absolute;left:73%;top:28%;width:46cqw;height:46cqw;margin:-23cqw 0 0 -23cqw;border-radius:50%;background:radial-gradient(circle,rgba(255,236,196,.85) 0%,rgba(255,224,180,.35) 36%,transparent 68%);animation:r-sun 5s ease-in-out infinite;mix-blend-mode:screen}
@keyframes r-sun{50%{transform:scale(1.14);opacity:.75}}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--from));pointer-events:none;z-index:5}

/* the archway and the words inside it */
.archwrap{position:absolute;left:50%;bottom:-1.5%;height:min(79cqh,calc(112cqw * 1.532));aspect-ratio:881/1350;translate:-50% calc(var(--sy,0) * 1px);z-index:3;transform-origin:50% 100%;transition:transform 2.4s var(--c1),opacity 1.6s ease}
.js .stage:not(.a4) .archwrap{transform:translateY(7%) scale(1.14);opacity:0}
.arch{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 10px 18px rgba(90,50,40,.25))}
.veil{position:absolute;left:14%;right:14%;top:20%;bottom:0;background:radial-gradient(ellipse 62% 52% at 50% 46%,rgba(255,250,243,.94) 0%,rgba(255,250,243,.8) 55%,rgba(255,250,243,0) 100%)}
.words{position:absolute;left:23%;right:23%;top:29%;bottom:9%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3cqh}
.words .deva{font-size:13px;color:var(--accent)}
.words .cap{font-size:10.5px;letter-spacing:.2em;color:var(--accent)}
.script .words .cap{font-size:13px;letter-spacing:.02em}
.words .names{font-size:clamp(36px,11.5cqw,52px);line-height:1.1;color:var(--deep)}
.words .names em{margin:.16em 0 .04em;color:var(--rose)}
.script .words .names{font-size:clamp(30px,9.5cqw,42px);line-height:1.2}
.words .city{font-size:16px}
.words .rule{background:var(--accent)}
.w{display:block;transition:opacity 1.2s ease,filter 1.2s ease,transform 1.2s var(--c1);transition-delay:calc(var(--i) * .18s)}
.js .stage:not(.a5) .w{opacity:0;filter:blur(8px);transform:translateY(12px)}

/* the doors */
.doors{position:absolute;inset:0;z-index:6;perspective:1500px;perspective-origin:50% 46%}
.door{position:absolute;top:0;bottom:0;width:50.2%;transition:transform 2.7s cubic-bezier(.5,0,.2,1),filter 2.7s ease;backface-visibility:hidden;will-change:transform}
.door img{width:100%;height:100%;object-fit:cover;display:block}
.door.dl{left:0;transform-origin:0 50%}.door.dl img{object-position:100% 50%}
.door.dr{right:0;transform-origin:100% 50%}.door.dr img{object-position:0 50%}
.seam{position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;background:linear-gradient(90deg,transparent,#FFF4D8,transparent);box-shadow:0 0 26px 10px rgba(255,236,190,.9);opacity:0;z-index:2;transition:opacity .5s ease .45s}
.stage.open .seam{opacity:1}
.stage.a2 .seam{opacity:0;transition:opacity .8s ease}
/* two knocks: the doors shudder */
.stage.open:not(.a2) .door{animation:r-knock .3s ease-in-out 2}
@keyframes r-knock{30%{transform:translateY(1.5px) scale(1.006)}60%{transform:translateY(-1px)}}
.stage.a2 .door.dl{transform:rotateY(-104deg);filter:brightness(.72)}
.stage.a2 .door.dr{transform:rotateY(104deg);filter:brightness(.72)}
.stage.done .doors{display:none}

.knock{position:absolute;left:31%;top:42%;width:38%;height:14%;z-index:7;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.knock span{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;border:1.5px solid #FFF1CF;box-shadow:0 0 18px rgba(255,236,190,.8),inset 0 0 14px rgba(255,236,190,.5);animation:r-ring 2.4s ease-out infinite}
@keyframes r-ring{0%{transform:scale(.6);opacity:.95}100%{transform:scale(1.5);opacity:0}}
.stage.open .knock{display:none}
.cuewrap{display:none}
.js .cuewrap{position:absolute;left:50%;top:60%;z-index:7;translate:-50% 0;display:flex;flex-direction:column;gap:6px;padding:14px 26px 16px;border-radius:999px;background:rgba(255,250,243,.93);
  box-shadow:0 0 0 1px #C9A45A,0 0 0 5px rgba(255,250,243,.7),0 0 0 6px rgba(201,164,90,.6),0 14px 30px rgba(60,40,20,.35);white-space:nowrap;transition:opacity .5s ease,transform .5s ease}
.cuewrap .to-names{font-size:27px;color:var(--deep)}
.script .cuewrap .to-names{font-size:21px}
.cuewrap .cue{color:var(--accent);font-size:10px}
.js .stage.open .cuewrap{opacity:0;transform:translateY(8px);pointer-events:none}
.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(91,58,58,.35);background:rgba(255,250,243,.82);color:var(--deep);
  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}
.stage .scrollcue{position:absolute;left:50%;bottom:8px;z-index:6;margin:0;background:linear-gradient(var(--accent),transparent)}
.js .stage:not(.done) .scrollcue{opacity:0}

/* ---------- the rest of the page ---------- */
h2,.family h3{color:var(--deep)}
.names{color:var(--deep)}
p.script{color:var(--rose)}
.pea{display:block;width:62%;max-width:250px;height:auto;margin:-8px auto 6px;transform-origin:30% 60%;animation:r-pea 6s ease-in-out infinite alternate;filter:drop-shadow(0 8px 12px rgba(90,50,40,.18))}
@keyframes r-pea{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.family{padding:28px 18px;border-radius:150px 150px 14px 14px;background:rgba(255,252,247,.75);box-shadow:0 0 0 1px rgba(184,137,74,.55),0 0 0 6px rgba(255,252,247,.6),0 0 0 7px rgba(184,137,74,.3),0 14px 30px rgba(90,50,40,.1)}
.spot{display:block;width:100%;height:100%;object-fit:contain;animation:t-float 5s ease-in-out infinite}
.spot-lg{display:block;width:112px;height:112px;margin:0 auto 10px}
/* ===== countdown: one royal plaque. Four numbers in a row under an arched top, parted by gold rules. ===== */
.count{gap:0;max-width:336px;padding:30px 8px 18px;border-radius:120px 120px 16px 16px/70px 70px 16px 16px;background:linear-gradient(180deg,#FFFDF8,#FBF1E6);
  box-shadow:0 0 0 1px #C9A45A,0 0 0 6px #FFFAF2,0 0 0 7px rgba(201,164,90,.55),0 18px 36px rgba(90,50,40,.14)}
.count div{border:0;border-radius:0;background:none;padding:4px 0}
.count div+div{border-left:1px solid rgba(201,164,90,.6)}
.count b{font-family:'Fraunces',serif;font-weight:500;font-size:32px;color:var(--rose)}
.count b.tk{animation:t-rise .45s var(--ease)}
.count span{font-size:9px;color:var(--accent)}
.script .count span{font-size:11px}
/* ===== functions: framed miniatures. Each function is a small painting with its details beside it. ===== */
.tl{gap:20px;padding-left:0;max-width:340px}
.tl-line,.tl-dot{display:none}
.tl li{padding:16px 16px 16px 14px;border:0;border-radius:14px;background:#FFFCF7;box-shadow:0 0 0 1px rgba(184,137,74,.5),0 0 0 5px #FFFCF7,0 0 0 6px rgba(184,137,74,.28),0 12px 26px rgba(90,50,40,.1)}
.tl li.main{background:#FFF6EC;box-shadow:0 0 0 1.5px #C9A45A,0 0 0 5px #FFF6EC,0 0 0 6.5px rgba(201,164,90,.6),0 14px 30px rgba(181,96,106,.16)}
.ev-body{padding-left:104px;min-height:96px;justify-content:center}
.ev-art{left:0;right:auto;top:50%;translate:0 -50%;width:92px;height:92px}
.ev-body>time,.ev-body>b{padding-right:0}
.tl time{color:var(--accent);font-size:11px;letter-spacing:.06em}
.ev-body>b{font-family:'Fraunces',serif;font-weight:500;font-size:22px;color:var(--deep)}
.script .ev-body>b{font-family:var(--ui),sans-serif;font-weight:700;font-size:20px}
.tl-cal{color:var(--rose)}
.js .tl li.rv{transform:translateY(20px)}
.letter{background:#FFFCF7;border:0;border-radius:14px;box-shadow:0 0 0 1px rgba(184,137,74,.5),0 0 0 5px #FFFCF7,0 0 0 6px rgba(184,137,74,.28),0 12px 26px rgba(90,50,40,.1)}
/* the doors appear only once their paintings have loaded */
.door{background:#B9C4A4}
.door img{transition:opacity .5s ease}
.js .stage:not(.ready) .door img{opacity:0}

/* ================= Shri Ganesh ================= */
.murti{position:relative;aspect-ratio:645/900}
.murti-in{position:absolute;inset:0;animation:r-float 6s ease-in-out infinite}
@keyframes r-float{50%{transform:translateY(-1.4%)}}
.gan{position:relative;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(120,70,40,.28))}
.aura{position:absolute;inset:-24%;border-radius:50%;background:radial-gradient(circle,rgba(255,246,214,.98) 0%,rgba(255,236,190,.6) 36%,transparent 68%);animation:r-sun 5s ease-in-out infinite;transition:opacity 1.6s ease,scale 2s var(--c1)}
.murti .rays{position:absolute;inset:-62%;border-radius:50%;opacity:.42;
  background:repeating-conic-gradient(from 0deg,rgba(226,184,96,.55) 0deg 2.5deg,transparent 2.5deg 11.25deg);
  -webkit-mask:radial-gradient(circle,#000 22%,transparent 60%);mask:radial-gradient(circle,#000 22%,transparent 60%);
  animation:r-turn 70s linear infinite;transition:opacity 1.8s ease,scale 2.2s var(--c1)}
@keyframes r-turn{to{transform:rotate(360deg)}}
/* a band of light that crosses the painting every few seconds, shaped by the painting itself */
.sheen{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.8) 50%,transparent 58%) 130% 0/260% 100% no-repeat;animation:r-sheen 5.5s ease-in-out 1.5s infinite}
@keyframes r-sheen{0%,55%{background-position:130% 0}100%{background-position:-130% 0}}
.tw{position:absolute;width:7px;height:7px;background:#FFF4CF;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:r-tw 2.6s ease-in-out infinite}
.tw.t1{left:6%;top:14%}.tw.t2{right:4%;top:30%;animation-delay:.7s}.tw.t3{left:-2%;top:56%;animation-delay:1.3s}.tw.t4{right:8%;top:70%;animation-delay:1.9s}
@keyframes r-tw{0%,100%{transform:scale(.3);opacity:0}50%{transform:scale(1.5);opacity:1}}

/* in the opening: he appears large in the middle, then rises to the crown of the arch */
.murti.hero{position:absolute;left:50%;top:42%;height:46cqh;translate:-50% calc(-50% + var(--sy,0) * 1px);z-index:4;transform:translateY(-27cqh) scale(.34);transition:transform 2.4s var(--c1),opacity 1.5s ease}
.js .stage:not(.a4) .murti.hero{transform:none}
.js .stage:not(.a3) .murti.hero{opacity:0;transform:scale(.5)}
.js .stage:not(.a3) .aura,.js .stage:not(.a3) .murti .rays{opacity:0;scale:.3}
.js .stage.a3:not(.a4) .murti .rays{opacity:.95}
.stage.a3:not(.done) .gan{animation:r-arrive 1.6s var(--c1)}
@keyframes r-arrive{0%{filter:brightness(2.4) blur(6px)}100%{filter:brightness(1) blur(0)}}
.mantra{position:absolute;left:0;right:0;top:72%;z-index:5;display:flex;flex-direction:column;gap:4px;padding:0 30px;opacity:0;transition:opacity 1.2s ease;pointer-events:none;text-shadow:0 1px 10px #fff,0 0 22px #fff}
.mantra span{font-family:'Tiro Devanagari Hindi',serif;font-size:22px;color:var(--accent)}
.mantra small{font-family:'Fraunces',serif;font-style:italic;font-size:14.5px;color:var(--deep)}
.script .mantra small{font-family:var(--ui),sans-serif;font-style:normal}
.js .stage.a3:not(.a4) .mantra{opacity:1;transition-delay:.9s}
/* as the page scrolls on, the words in the arch thin out */
.stage.done .words{opacity:calc(1 + var(--sp,0) * 2.4)}

/* at the close */
.murti.close{width:150px;margin:20px auto 6px}
.js .tfoot:not(.in) .murti.close{scale:.55;opacity:0}
.murti.close{transition:scale 1.5s var(--spring) .2s,opacity 1s ease .2s}
.js .tfoot:not(.in) .murti.close .aura,.js .tfoot:not(.in) .murti.close .rays{opacity:0;scale:.3}
.murti.close .aura,.murti.close .rays{transition-delay:.7s}
.shubham{font-size:18px;color:var(--accent)}
.shubham-en{font-family:'Fraunces',serif;font-style:italic;font-size:15px;margin-top:-8px}
.script .shubham-en{font-family:var(--ui),sans-serif;font-style:normal}
.tfoot{overflow:hidden;padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
.corner{position:absolute;bottom:0;width:40%;max-width:180px;height:auto;opacity:.95;transition:scale 1.6s var(--spring) .5s,opacity 1s ease .5s;pointer-events:none}
.corner.cl{left:0;transform:scaleY(-1);transform-origin:50% 50%}
.corner.cr{right:0;transform:scale(-1,-1)}
.js .tfoot:not(.in) .corner{scale:.4;opacity:0}

/* ================= motion as each part scrolls into view ================= */
.peawrap{display:block}
.pea{transition:opacity 1s ease .1s,rotate 1.5s var(--spring) .1s,scale 1.5s var(--spring) .1s}
.js .welcome:not(.in) .pea{opacity:0;rotate:-12deg;scale:.75}
/* the family panel is unveiled from the top */
.family{clip-path:inset(-12px -12px -40px -12px);transition:clip-path 1.5s var(--c1) .45s}
.js .welcome:not(.in) .family{clip-path:inset(-12px -12px 100% -12px)}
.family>*{transition:opacity .9s ease,transform .9s var(--ease)}
.family>:nth-child(1){transition-delay:.9s}.family>:nth-child(2){transition-delay:1.15s}.family>:nth-child(3){transition-delay:1.4s}
.js .welcome:not(.in) .family>*{opacity:0;transform:translateY(14px)}
/* the countdown plaque settles in, then its numbers rise one after another */
.count{transition:scale 1.2s var(--spring) .2s,opacity .8s ease .2s}
.js .countdown:not(.in) .count{scale:.84;opacity:0}
.countdown.in .count div{animation:t-rise .8s var(--ease) both}
.countdown.in .count div:nth-child(1){animation-delay:.5s}.countdown.in .count div:nth-child(2){animation-delay:.64s}.countdown.in .count div:nth-child(3){animation-delay:.78s}.countdown.in .count div:nth-child(4){animation-delay:.92s}
/* the flower hanging drops in over the functions and keeps swaying */
.toran{display:block;margin:-56px -28px 20px;transition:translate 1.5s cubic-bezier(.3,1.3,.45,1),opacity .8s ease}
.toran img{display:block;width:100%;height:auto;transform-origin:50% 0;animation:r-sway 6s ease-in-out infinite alternate;filter:drop-shadow(0 8px 10px rgba(90,50,40,.16))}
@keyframes r-sway{from{transform:rotate(-.9deg)}to{transform:rotate(.9deg)}}
.js .rv:not(.in) .toran{translate:0 -55%;opacity:0}
/* function cards come in from alternate sides, and each painting pops into its frame */
.js .tl li.rv:nth-of-type(odd){transform:translateX(-36px) rotate(-2.5deg)}
.js .tl li.rv:nth-of-type(even){transform:translateX(36px) rotate(2.5deg)}
.js .tl li.rv.in:nth-of-type(n){transform:none}
.ev-art{transition:scale 1s var(--spring) .35s,opacity .5s ease .35s}
.js .tl li:not(.in) .ev-art{scale:.3;opacity:0}
/* the venue: the lake through a small arch; the view inside drifts with the scroll */
.vista{display:block;width:190px;height:236px;margin:0 auto 24px;overflow:hidden;border-radius:95px 95px 12px 12px;
  box-shadow:0 0 0 1px #C9A45A,0 0 0 6px #FFFAF2,0 0 0 7px rgba(201,164,90,.55),0 16px 30px rgba(90,50,40,.18);transition:scale 1.4s var(--spring) .1s,opacity .9s ease .1s}
.vista img{display:block;width:100%;height:150%;margin-top:-22%;object-fit:cover;object-position:50% 30%}
.js .place:not(.in) .vista{scale:.78;opacity:0}
/* the letter is set down at a slight angle and straightens */
.letter{transition:rotate 1.4s var(--spring) .2s,translate 1.2s var(--ease) .2s}
.js .fromus:not(.in) .letter{rotate:-5deg;translate:0 34px}