/* Chandni: a moonrise over a palace by the water, played in four acts on the invitation's own first screen.
   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)}
.stage{position:relative;height:min(100svh,880px);min-height:640px;overflow:hidden;container-type:size;text-align:center;color:#EFE2B8;isolation:isolate}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,#080C26 0%,#141C4C 46%,#26347A 100%)}
.sky.warm{background:linear-gradient(180deg,rgba(20,28,76,0) 30%,rgba(92,74,140,.55) 62%,rgba(226,160,104,.6) 84%,rgba(245,196,128,.5) 100%);transition:opacity 3.2s ease}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(transparent,var(--from));pointer-events:none;z-index:6}

/* stars */
.stars{position:absolute;inset:0;transition:opacity 2.4s ease}
.stars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(255,255,255,.7);animation:c-twinkle var(--t) ease-in-out var(--d) infinite}
@keyframes c-twinkle{0%,100%{opacity:.9}50%{opacity:.15}}
.shoot{position:absolute;left:8%;top:14%;width:90px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff);opacity:0;transform:rotate(18deg)}
.stage.a2:not(.done) .shoot{animation:c-shoot 1.3s ease-out .5s both}
@keyframes c-shoot{0%{opacity:0;transform:rotate(18deg) translateX(-40px)}15%{opacity:1}100%{opacity:0;transform:rotate(18deg) translateX(250px)}}

/* moon: the trigger, then a small crescent high on the right */
.moon{position:absolute;left:50%;top:40%;width:132px;height:132px;margin:-66px 0 0 -66px;padding:0;border:0;background:none;color:inherit;z-index:5;-webkit-tap-highlight-color:transparent;
  transform:translate(29cqw,-27cqh) scale(.5);transition:transform 2.8s var(--c1)}
.moon svg{position:relative;display:block;width:100%;height:100%;transform:rotate(-24deg);filter:drop-shadow(0 0 10px rgba(255,240,190,.55))}
.moon-glow{position:absolute;inset:-55%;border-radius:50%;background:radial-gradient(circle,rgba(255,238,180,.4) 0%,rgba(255,238,180,.1) 40%,transparent 66%);animation:c-breathe 4.2s ease-in-out infinite}
@keyframes c-breathe{50%{transform:scale(1.12);opacity:.7}}
.js .stage:not(.open) .moon{transform:none;cursor:pointer}
.js .stage:not(.open) .moon svg{animation:c-float 3.4s ease-in-out infinite}
@keyframes c-float{0%,100%{transform:rotate(-24deg) translateY(0)}50%{transform:rotate(-24deg) translateY(-7px)}}
.stage.open .moon{pointer-events:none}

/* the eight-pointed star */
.khatam{position:absolute;left:50%;top:39%;width:210px;height:210px;margin:-105px 0 0 -105px;z-index:4;transform:translateY(-21cqh) scale(.5);transition:transform 2.2s var(--c1)}
.js .stage:not(.a3) .khatam{transform:none}
.khatam-in,.khatam svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.khatam .dr{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--c1);transition-delay:calc(.7s + var(--i) * .2s)}
.khatam circle.dr[stroke-dasharray]{transition:opacity 1s ease 1.2s}
.js .stage:not(.open) .khatam .dr{stroke-dasharray:1;stroke-dashoffset:1}
.js .stage .khatam path.dr,.js .stage .khatam circle.dr:not([stroke-dasharray]){stroke-dasharray:1}
.js .stage:not(.open) .khatam circle.dr[stroke-dasharray]{opacity:0}
.fillg{transition:opacity 1.1s ease}
.js .stage:not(.a2) .fillg{opacity:0}
.stage.a2:not(.done) .khatam-in{animation:c-pop 1s var(--c1)}
@keyframes c-pop{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
.rays{position:absolute;inset:-70%;border-radius:50%;opacity:.28;
  background:repeating-conic-gradient(from 0deg,rgba(243,227,162,.5) 0deg 3deg,transparent 3deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 18%,transparent 62%);
  animation:c-turn 80s linear infinite;transition:opacity 1.6s ease,scale 1.6s var(--c1)}
@keyframes c-turn{to{transform:rotate(360deg)}}
.js .stage:not(.a2) .rays{opacity:0;scale:.3}
.js .stage.a2:not(.a3) .rays{opacity:.95}

/* lanterns: drop in on their chains, then sway */
.lantern{position:absolute;top:0;width:34px;z-index:3;transition:transform 1.7s cubic-bezier(.3,1.25,.4,1)}
.lantern.l1{left:7%;--c:92px;transition-delay:.5s}
.lantern.l2{left:21%;--c:150px;transition-delay:.9s}
.js .stage:not(.a3) .lantern{transform:translateY(-320px)}
.lan-in{transform-origin:50% 0;animation:c-sway 5.5s ease-in-out infinite alternate;padding-top:var(--c);background:linear-gradient(#C9AE6A,#C9AE6A) 50% 0/1px var(--c) no-repeat}
.l2 .lan-in{animation-duration:6.8s;animation-delay:-2s}
.lan-in svg{display:block;width:100%;filter:drop-shadow(0 0 12px rgba(255,200,100,.55))}
.lan-light{animation:c-lamp 2.6s ease-in-out infinite}
@keyframes c-sway{from{transform:rotate(-3.2deg)}to{transform:rotate(3.2deg)}}
@keyframes c-lamp{50%{opacity:.72}}

/* skyline */
.sk{position:absolute;left:0;bottom:0;width:100%;height:auto;aspect-ratio:4/3;overflow:visible;transition:transform 2.6s var(--c1),opacity 2.2s ease}
.sk-far{color:#2B3880;z-index:1;opacity:.85}
.sk-mid{color:#0F1640;z-index:2;transition-delay:.35s}
.sk-water{z-index:2;transition-delay:.2s}
.sk-front{color:#060A20;z-index:3;transition-delay:.7s}
.js .stage:not(.a3) .sk-far{transform:translateY(7%);opacity:.22}
.js .stage:not(.a3) .sk-mid{transform:translateY(34%);opacity:0}
.js .stage:not(.a3) .sk-water{opacity:.35}
.js .stage:not(.a3) .sk-front{transform:translateY(46%)}
.win{transition:opacity .7s ease;transition-delay:calc(1.5s + var(--i) * .11s);filter:drop-shadow(0 0 3px rgba(255,205,110,.9))}
.js .stage:not(.a3) .win{opacity:0;transition-delay:0s}
.rip{opacity:.5;animation:c-rip 4.5s ease-in-out calc(var(--i) * -.7s) infinite alternate}
@keyframes c-rip{from{transform:translateX(-14px);opacity:.15}to{transform:translateX(14px);opacity:.6}}
.moonpath{opacity:.16;animation:c-lamp 3.4s ease-in-out infinite}

/* words: come into focus in the last act */
.words{position:absolute;left:0;right:0;top:27.5cqh;z-index:4;display:flex;flex-direction:column;align-items:center;gap:1.5cqh;padding:0 46px}
.words .names{font-size:clamp(40px,13cqw,60px);line-height:1;text-shadow:0 2px 18px rgba(8,12,38,.7)}
.words .names{line-height:1.12}.words .names em{margin:.2em 0 .05em}
.script .words .names{font-size:clamp(34px,10.5cqw,48px);line-height:1.2}
.words .cap,.words .city,.words .dear{text-shadow:0 1px 10px rgba(8,12,38,.8)}
.invoc{display:block;font-size:19px;line-height:1.5;opacity:.92}
.invoc.deva{font-size:15px}
.w{display:block;transition:opacity 1.2s ease,filter 1.2s ease,transform 1.2s var(--c1);transition-delay:calc(var(--i) * .2s)}
.words .rule.w{display:block}
.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(40% + 104px);z-index:5;display:flex;flex-direction:column;gap:10px;padding:0 20px;transition:opacity .7s ease,transform .7s ease}
.js .stage.open .cuewrap{opacity:0;transform:translateY(10px);pointer-events:none}
.js .stage:not(.open) .stars{opacity:.4}
.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(239,226,184,.5);background:rgba(8,12,38,.45);color:#EFE2B8;
  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:10px;z-index:7;margin:0;transition:opacity 1s ease}
.js .stage:not(.done) .scrollcue{opacity:0}

/* ---------- the rest of the page ---------- */
.card{background:linear-gradient(180deg,var(--from),var(--to))}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1px 1px at 12% 8%,#fff,transparent),radial-gradient(1px 1px at 78% 14%,#fff,transparent),radial-gradient(1.5px 1.5px at 44% 22%,#E7CF8C,transparent),radial-gradient(1px 1px at 90% 31%,#fff,transparent),radial-gradient(1px 1px at 24% 38%,#fff,transparent),radial-gradient(1.5px 1.5px at 66% 46%,#E7CF8C,transparent),radial-gradient(1px 1px at 8% 57%,#fff,transparent),radial-gradient(1px 1px at 84% 66%,#fff,transparent),radial-gradient(1px 1px at 36% 74%,#fff,transparent),radial-gradient(1.5px 1.5px at 58% 88%,#E7CF8C,transparent);
  background-size:100% 900px}
.footmoon{transform:rotate(-24deg)}

/* ===== countdown: four palace windows lit from inside, a star over each, glowing in turn ===== */
.count{gap:11px;max-width:330px;margin-top:38px}
.count div{position:relative;border:1px solid var(--line);border-radius:50% 50% 6px 6px/44% 44% 6px 6px;padding:30px 0 12px;
  background:linear-gradient(180deg,rgba(243,201,107,.34),rgba(243,201,107,.06) 72%);box-shadow:0 0 24px rgba(243,201,107,.16),inset 0 0 20px rgba(243,201,107,.16);animation:c-window 4.8s ease-in-out infinite}
.count div:nth-child(2){animation-delay:.6s}.count div:nth-child(3){animation-delay:1.2s}.count div:nth-child(4){animation-delay:1.8s}
@keyframes c-window{50%{box-shadow:0 0 34px rgba(243,201,107,.34),inset 0 0 26px rgba(243,201,107,.3)}}
.count div::before{content:"";position:absolute;left:50%;top:-9px;width:16px;height:16px;margin-left:-8px;background:var(--line);
  clip-path:polygon(50% 0,65% 15%,85% 15%,85% 35%,100% 50%,85% 65%,85% 85%,65% 85%,50% 100%,35% 85%,15% 85%,15% 65%,0 50%,15% 35%,15% 15%,35% 15%)}
.count b{font-family:'Fraunces',serif;font-weight:500;font-size:27px;color:#FFE9A8;text-shadow:0 0 14px rgba(255,205,110,.7)}
/* ===== functions: lanterns on a line. Swipe sideways through them; each hangs on its own chain. ===== */
.tl{flex-direction:row;align-items:stretch;gap:14px;max-width:none;margin:0 -28px;padding:30px 28px 22px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;text-align:center}
.tl::-webkit-scrollbar{display:none}
.tl-line{display:none}
.tl li{position:relative;flex:0 0 70%;scroll-snap-align:center;align-items:center;padding:50px 18px 22px;border-radius:130px 130px 18px 18px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(243,201,107,.2),rgba(15,22,52,.6) 60%);box-shadow:0 0 26px rgba(243,201,107,.12),inset 0 16px 30px rgba(243,201,107,.1)}
.tl li.main{background:linear-gradient(180deg,rgba(243,201,107,.36),rgba(15,22,52,.6) 66%);box-shadow:0 0 34px rgba(243,201,107,.24),inset 0 16px 30px rgba(243,201,107,.16)}
.tl li::before{content:"";position:absolute;left:50%;top:-30px;width:1px;height:30px;background:var(--line)}
.tl-dot{left:50%;top:16px;width:18px;height:18px;margin-left:-9px}
.tl .ev-date{display:flex;flex-direction:row;align-items:baseline;gap:6px;color:#FFE9A8}
.tl .ev-date b{font-family:'Fraunces',serif;font-weight:500;font-size:38px}
.tl .ev-date i{font-size:11px;color:var(--line)}
.tl .ev-full,.tl .ev-sep{display:none}
.ev-body{align-items:center;margin-top:6px}
.tl-cal{align-self:center}
.js .tl li.rv{transform:translateY(20px)}
.tl-dot{border-radius:0;background:var(--line);box-shadow:none;clip-path:polygon(50% 0,65% 15%,85% 15%,85% 35%,100% 50%,85% 65%,85% 85%,65% 85%,50% 100%,35% 85%,15% 85%,15% 65%,0 50%,15% 35%,15% 15%,35% 15%)}

/* ===== family, notes and function drawings in Chandni's colours ===== */
.ev-art{position:static;width:50px;height:50px;margin:0 auto 4px;color:#FFE9A8}
.ev-body>time,.ev-body>b{padding-right:0}
.tl li{flex-basis:74%;padding-top:46px}
.ev-note{max-width:22ch}
.family{padding:30px 18px 26px;border-radius:140px 140px 18px 18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(243,201,107,.16),rgba(15,22,52,.35));box-shadow:0 0 26px rgba(243,201,107,.1)}
.letter{border-radius:18px;background:linear-gradient(180deg,rgba(243,201,107,.14),rgba(15,22,52,.5));box-shadow:0 0 24px rgba(243,201,107,.1)}