/* Tokens copied from the reference site's palette */
:root{
  --bg-top:#fdf6e8;--bg-mid:#f6e6c8;--bg-deep:#ecd6a8;
  --dark3:#f3e1bb;--surface-content:#faeed7eb;
  --ink:#2a1a0a;--name:#1f140a;--gold-ink:#1a120a;--muted:#6b4a18;--subtle:#8a6a35;
  --gold:#a8720e;--gold-accent:#a8780f;--gold-dim:#8a6010;--gold-light:#e0ad3c;
  --gold-line:#c08a1a99;--gold-line-md:#c08a1a85;--gold-bracket:#c08a1a80;
  --b-xs:#c08a1a40;--b-sm:#c08a1a73;
  --glow-03:#c08a1a38;--glow-04:#c08a1a47;--glow-06:#c08a1a40;--glow-08:#c08a1a47;--glow-10:#c08a1a52;--glow-25:#c08a1a52;--glow-35:#c08a1a7a;
  --rose:#b85c7a;--rose-soft:#b85c7a66;--rose-wash:#b85c7a0f;--rose-wash-md:#b85c7a1a;
  --text-glow-strong:#b428468c;--text-glow-soft:#8a1e3759;
  --rose-joiner:linear-gradient(135deg,#a8720e 0%,#b85c7a 50%,#a8720e 100%);
  --display:"Cormorant Garamond",serif;--cinzel:Cinzel,serif;--body:Raleway,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--body);font-weight:300;font-size:15px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse at top,var(--bg-top) 0%,var(--bg-mid) 50%,var(--bg-deep) 100%) fixed}
body.locked{overflow:hidden}
h1,h2,h3,h4,p{margin:0}

/* Red/rose glow every Cinzel label has in the original */
.cz{font-family:var(--cinzel);text-transform:uppercase;text-shadow:0 0 4px var(--text-glow-strong),0 0 14px var(--text-glow-soft)}
.gold{color:var(--gold)}

.sec{position:relative;z-index:1;padding:6rem 1.25rem;overflow:hidden}
.wrap{position:relative;z-index:1;max-width:1000px;margin:auto}
.head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:3rem}
.eyebrow{font-size:.72rem;letter-spacing:.55em;color:var(--gold);margin-bottom:1.1rem}
.title{font-family:var(--display);font-weight:400;font-size:clamp(2.8rem,8vw,5.5rem);line-height:.9;letter-spacing:-.03em;color:var(--name)}
.bar{display:flex;align-items:center;gap:1rem;margin-top:1.5rem}
.bar::before,.bar::after{content:"";display:block;height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--gold-line-md),transparent)}
.bar i{display:block;width:18px;height:2px;background:var(--gold-line)}
.star{display:flex;align-items:center;gap:1rem;margin:1.5rem 0}
.star::before,.star::after{content:"";display:block;height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent)}
.star b{color:var(--gold);opacity:.7;font-size:.6rem;font-weight:400}
.lead{max-width:36rem;color:var(--muted);font-size:1rem}

/* corner brackets */
.corners{position:relative}
.corners::before{content:"";position:absolute;inset:-12px;pointer-events:none;z-index:3;
  --c:linear-gradient(var(--gold-line),var(--gold-line));
  background:var(--c) top left/20px 1px,var(--c) top left/1px 20px,var(--c) top right/20px 1px,var(--c) top right/1px 20px,
    var(--c) bottom left/20px 1px,var(--c) bottom left/1px 20px,var(--c) bottom right/20px 1px,var(--c) bottom right/1px 20px;
  background-repeat:no-repeat}

/* cover */
#cover{position:fixed;inset:0;z-index:50;background:#2a1d12;cursor:pointer;transition:opacity 1s,visibility 1s}
#cover video{width:100%;height:100%;object-fit:cover;display:block}
#cover.hide{opacity:0;visibility:hidden}
.tap{position:absolute;left:0;right:0;bottom:12%;text-align:center;color:#fff;letter-spacing:.4em;font-size:.8rem;animation:pulse 2s infinite;text-shadow:0 2px 8px #000a}
@keyframes pulse{50%{opacity:.3}}

/* fixed decor */
.decor{position:fixed;z-index:0;pointer-events:none;height:auto}
.decor.tl{top:0;left:0;width:16rem}
.decor.br{bottom:0;right:0;width:18rem}
@media(min-width:640px){.decor.tl{width:21.25rem}.decor.br{width:23.75rem}}

/* Ganesha opening */
.open{background:radial-gradient(ellipse at center,var(--glow-06) 0%,var(--rose-wash) 45%,transparent 70%);text-align:center;padding:4.5rem 1.5rem}
.ganesha{width:200px;height:200px;object-fit:contain;display:block;margin:0 auto;filter:drop-shadow(0 6px 18px #c08a1a77)}
.verse{font-family:var(--display);font-style:italic;font-size:1.15rem;line-height:2;color:var(--muted)}
.verse-by{font-size:.7rem;letter-spacing:.3em;color:var(--gold-accent);margin-top:1rem}

/* couple card */
.glowbg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 40% at 50% 50%,var(--glow-04) 0%,transparent 100%)}
.couple{position:relative;max-width:28rem;margin:auto;background:var(--dark3);border:1px solid var(--b-sm);border-radius:2px;text-align:center;padding:3.5rem 2.5rem;box-shadow:0 0 40px var(--glow-04),inset 0 0 28px var(--glow-03)}
.couple .lbl{font-size:.72rem;letter-spacing:.35em;color:var(--gold);opacity:.9;margin-bottom:.75rem}
.couple h3{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,7vw,2.75rem);line-height:1;color:var(--gold-ink);margin-bottom:.25rem;text-shadow:0 0 6px #d89428b3,0 0 18px #8a1e3759,0 1px 1px #2a1a0a40}
.couple .role{font-family:var(--display);font-style:italic;color:var(--ink);opacity:.85;margin-bottom:1.5rem}
.couple .par{color:var(--ink);opacity:.88}
.couple .amp-s{color:var(--gold);margin:.25rem 0}
.couple .city{font-size:.72rem;letter-spacing:.25em;color:var(--gold-accent);opacity:.8;margin-top:.5rem}
.joiner{display:flex;align-items:center;gap:1rem;margin:2.5rem 0}
.joiner::before,.joiner::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--glow-35))}
.joiner::after{transform:scaleX(-1)}
.joiner span{font-family:var(--display);font-size:2.5rem;line-height:1;color:var(--gold)}
.bless{margin-top:3rem}
.bless .star{justify-content:center;margin:0 0 1rem}
.bless .star::before,.bless .star::after{width:48px;background:linear-gradient(90deg,transparent,var(--glow-35))}
.bless p{font-family:var(--display);font-style:italic;color:var(--ink);opacity:.8;font-size:1rem}
.lotus{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:.75rem;margin:.5rem 0;color:var(--gold)}
.lotus::before,.lotus::after{content:"";width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim))}
.lotus::after{transform:scaleX(-1)}

/* countdown */
.count-sec{text-align:center;padding:6rem 1.5rem}
.count{display:flex;gap:.6rem;justify-content:center;margin:2rem 0}
.count div{position:relative;border:1px solid var(--b-xs);width:72px;padding:.9rem 0;background:#fffa}
.count b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(2.2rem,7vw,3.8rem);line-height:1;letter-spacing:-.04em;color:var(--name);text-shadow:0 0 30px var(--glow-25);font-variant-numeric:tabular-nums}
.count small{font-size:.5rem;letter-spacing:.38em;color:var(--gold);opacity:.75;display:block;margin-top:.4rem}
@media(min-width:500px){.count div{width:96px}}

/* scratch heart */
.heartwrap{position:relative;width:min(100%,340px);aspect-ratio:1;margin:0 auto}
#scratch{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:3}
#scratch.done{opacity:0;pointer-events:none;transition:opacity 1s}
.reveal-text{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:12%;pointer-events:none;z-index:2;text-align:center}
.reveal-text span{font-size:.7rem;letter-spacing:.3em;color:var(--gold)}
.reveal-text b{display:block;font-family:var(--display);font-weight:400;font-size:3.2rem;color:#5c0a1e;line-height:1}
.goon{font-family:var(--display);font-style:italic;color:var(--muted);margin:1.2rem 0 2rem;font-size:1.05rem}
.cta{position:relative;display:inline-flex;align-items:center;gap:.7rem;margin-top:1rem;border:1px solid var(--gold-line);outline:1px solid var(--b-xs);outline-offset:4px;padding:.75rem 2rem;text-decoration:none;color:var(--gold-ink);letter-spacing:.42em;font-size:.65rem;background:#fff6;transition:.3s}
.cta:hover{background:var(--gold-light);color:#fff}
.save{font-size:.7rem;letter-spacing:.4em;color:var(--gold);margin-top:1rem}

/* story */
.story-grid{display:flex;flex-direction:column;gap:3rem;align-items:center}
.photo{position:relative;width:calc(100% - 24px);max-width:24rem;margin:12px}
.photo .in{position:relative;overflow:hidden;aspect-ratio:3/4;border-radius:2px;background:linear-gradient(135deg,#efe4cc,#d9c394)}
.photo .in::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#f8e8c666 0%,#e8c07a1a 50%,#e8c07a2e 100%)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo::after{content:"";position:absolute;inset:-12px;border:1px solid var(--b-xs);pointer-events:none}
.tag{position:absolute;z-index:4;bottom:1rem;left:50%;transform:translateX(-50%);white-space:nowrap;padding:.5rem 1.25rem;background:#f3deaff0;border:1px solid var(--glow-25);backdrop-filter:blur(8px);font-family:var(--display);color:var(--gold-light);font-size:1.15rem}
.tag em{font-style:italic;font-size:.8em;margin:0 .4rem;background:var(--rose-joiner);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.timeline{width:100%;max-width:34rem}
.chap{display:flex;gap:1.5rem;text-align:left}
.chap .rail{display:flex;flex-direction:column;align-items:center}
.chap .dot{margin-top:.4rem;width:10px;height:10px;border-radius:50%;border:1px solid var(--gold);background:var(--bg-top);box-shadow:0 0 8px var(--gold-bracket);flex:none}
.chap .line{flex:1;width:1px;margin-top:.5rem;min-height:60px;background:linear-gradient(to bottom,var(--glow-35),var(--glow-06))}
.chap:last-child .line{display:none}
.chap .n{display:block;font-size:.72rem;letter-spacing:.35em;color:var(--gold);opacity:.75;margin-bottom:.25rem}
.chap h4{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,3.5vw,1.75rem);letter-spacing:-.02em;color:var(--name);margin-bottom:.5rem}
.chap p{color:var(--muted);font-size:.9rem;padding-bottom:2.5rem}
@media(min-width:1024px){.story-grid{flex-direction:row;align-items:flex-start;gap:5rem}.photo{flex:0 0 38%}}

/* petals falling in Our Story */
#petalfall{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.pt{position:absolute;top:-20px;width:10px;height:12px;border-radius:70% 0 70% 0;background:var(--c);opacity:.85;animation:fall var(--d) linear infinite}
@keyframes fall{to{transform:translate(var(--x),620px) rotate(540deg);opacity:0}}

/* gallery carousel */
.carousel{position:relative;margin:0 -1.25rem}
.track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 11%;scroll-padding:0 11%}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 78%;scroll-snap-align:center;aspect-ratio:2/3;position:relative;overflow:hidden;border:1px solid var(--glow-10);cursor:pointer;transition:transform .5s,opacity .5s;opacity:.55;transform:scale(.93)}
.slide.on{opacity:1;transform:none}
.slide .ph{position:absolute;inset:0;background:linear-gradient(135deg,#efe4cc,#d9c394)}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .view{position:absolute;bottom:1rem;left:0;right:0;text-align:center;font-size:.6rem;letter-spacing:.4em;color:var(--gold-light);opacity:0;transition:.3s}
.slide:hover .view{opacity:1}
.nav{position:absolute;top:42%;width:40px;height:40px;border-radius:50%;border:1px solid var(--gold-line);background:#fffd;color:var(--gold);font-size:1.4rem;line-height:1;cursor:pointer;z-index:2}
.nav.prev{left:8px}.nav.next{right:8px}
.dots{display:flex;gap:8px;justify-content:center;margin-top:1.2rem}
.dots i{width:7px;height:7px;border-radius:50%;border:1px solid var(--gold);transition:.3s;cursor:pointer}
.dots i.on{background:var(--gold);transform:scale(1.3)}
@media(min-width:700px){.slide{flex-basis:34%}.track{padding:0 33%}}

/* events */
.events{display:flex;flex-direction:column;gap:1.25rem}
.ev{display:flex;flex-direction:column;border:1px solid var(--b-sm);overflow:hidden}
.ev .pic{position:relative;height:14rem;background:linear-gradient(135deg,#efe4cc,#d9c394)}
.ev .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ev .txt{background:var(--surface-content);backdrop-filter:blur(8px);padding:2.25rem 2rem;text-align:left}
.ev .date{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;font-size:.72rem;letter-spacing:.32em;color:var(--gold);opacity:.9}
.ev .date i{display:block;width:18px;height:2px;background:var(--gold-line);flex:none}
.ev h3{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4.5vw,2.8rem);line-height:.93;letter-spacing:-.03em;color:var(--name);margin-bottom:1rem}
.ev .desc{color:var(--muted);letter-spacing:.05em;max-width:40ch;margin-bottom:1.75rem;opacity:.9}
.ev .lab{font-size:.75rem;letter-spacing:.25em;color:var(--gold);opacity:.8;margin-bottom:.1rem}
.ev .lab.pl{letter-spacing:.3em}
.ev .val{font-family:var(--display);color:var(--name);font-size:1.5rem;letter-spacing:.025em}
.ev .val.pl{font-size:1.15rem;letter-spacing:0}
.ev hr{border:0;height:1px;width:3rem;background:var(--rose-soft);margin:1rem 0}
@media(min-width:1024px){.ev{flex-direction:row}.ev .pic{height:auto;flex:0 0 42%}.ev .txt{flex:1;padding:2.5rem}}

/* venue */
.mapbox{position:relative;display:block;border:1px solid var(--b-xs)}
.mapbox iframe{display:block;width:100%;height:420px;border:0;pointer-events:none;filter:grayscale(35%) sepia(22%) brightness(.8) contrast(1.06)}
.mapbox .tint{position:absolute;inset:0;pointer-events:none;background:#e8c07a1f;mix-blend-mode:multiply}
.mapbox .hov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#e8c07a52;opacity:0;transition:opacity .4s;font-size:.75rem;letter-spacing:.45em;color:var(--gold-light)}
.mapbox:hover .hov{opacity:1}

/* footer */
footer{position:relative;z-index:1;padding:4rem 1.5rem 7rem;text-align:center;background:radial-gradient(ellipse 60% 50% at 50% 100%,var(--glow-06) 0%,var(--rose-wash) 45%,transparent 70%)}
footer::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--glow-35),transparent)}
footer .names{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,8vw,5rem);line-height:.9;letter-spacing:-.03em;color:var(--name)}
footer .names em{display:inline-block;margin:0 .6rem;font-style:italic;font-size:.55em;background:var(--rose-joiner);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
footer .bar{margin:1.25rem 0;justify-content:center}
footer .bar::before,footer .bar::after{width:56px}
footer .bar i{width:14px}
footer .sh{font-family:var(--display);font-style:italic;color:var(--muted);font-size:clamp(1rem,2.5vw,1.3rem)}
#insta{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;justify-content:center;margin-top:1.5rem}
#insta a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--muted);font-family:var(--cinzel);text-transform:uppercase;text-shadow:0 0 4px var(--text-glow-strong),0 0 14px var(--text-glow-soft);font-size:.54rem;letter-spacing:.38em}
#insta svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.5}

#musicBtn{position:fixed;left:16px;bottom:16px;z-index:5;width:44px;height:44px;border:1px solid var(--gold-line);background:#3b2f2a;color:#f3e1bb;font-size:1.2rem;cursor:pointer}
#musicBtn.off{opacity:.55;text-decoration:line-through}
#lightbox{position:fixed;inset:0;background:#140e06eb;display:none;align-items:center;justify-content:center;z-index:60;cursor:zoom-out}
#lightbox.on{display:flex}
#lightbox img{max-width:92vw;max-height:92vh}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s,transform .9s}
.reveal.in{opacity:1;transform:none}

/* Reference quirk: ".text-gold*" labels are dark ink with a rose glow, and every Cormorant/Cinzel text carries that glow */
.cz{color:var(--gold-ink)!important}
.tap.cz{color:#fff!important;text-shadow:0 2px 8px #000a!important}
.star b{color:var(--gold-ink);opacity:.7;text-shadow:0 0 6px #d89428b3,0 0 18px #8a1e3759}
.title,.verse,.couple .role,.chap h4,.ev h3,.ev .val,.bless p,.goon,.tag,.sh,.joiner span,footer .names,.reveal-text b,.slide .view{
  text-shadow:0 0 4px var(--text-glow-strong),0 0 14px var(--text-glow-soft)}
.mapbox .hov,.slide .view{color:var(--gold-ink)!important}
/* event text sizes as in the reference */
.ev .date{font-size:.9rem;letter-spacing:.42em}
.ev .lab{font-size:.85rem}
.ev .desc{font-size:1rem;letter-spacing:.05em}

/* reference details: card flourishes, rectangular calendar button, equalizer music button, confetti */
.orn{position:absolute;color:var(--gold);opacity:.75;font-style:normal;font-size:1.3rem;line-height:1}
.orn.tl{top:8px;left:10px}.orn.tr{top:8px;right:10px;transform:scaleX(-1)}
.orn.bl{bottom:8px;left:10px;transform:scaleY(-1)}.orn.br{bottom:8px;right:10px;transform:scale(-1)}
.cta{outline:none;padding:.9rem 2.6rem;min-width:15rem;justify-content:center;background:#fff4}
.lotus svg{display:block}
.lotus{gap:.6rem;margin:1rem 0}
#musicBtn{display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:12px 0}
#musicBtn[hidden]{display:none}
#musicBtn span{width:3px;background:#e0ad3c;border-radius:1px;animation:eq 1s ease-in-out infinite alternate}
#musicBtn span:nth-child(1){height:10px}#musicBtn span:nth-child(2){height:18px;animation-delay:-.3s}
#musicBtn span:nth-child(3){height:13px;animation-delay:-.6s}#musicBtn span:nth-child(4){height:16px;animation-delay:-.2s}
#musicBtn.off{text-decoration:none;opacity:.7}#musicBtn.off span{animation-play-state:paused}
@keyframes eq{to{transform:scaleY(.3);transform-origin:bottom}}
.cf{position:absolute;top:-16px;width:9px;height:12px;border-radius:70% 0 70% 0;background:var(--c);animation:fall2 var(--d) ease-in forwards}
@keyframes fall2{to{transform:translate(var(--x),110vh) rotate(720deg)}}
/* caption: reference's .text-gold-light is dark ink with glow, not pale gold */
.tag{color:var(--gold-ink)}
.tag,.tag em{text-shadow:0 0 6px #d89428b3,0 0 18px #8a1e3759,0 1px 1px #2a1a0a40}
.tag em{-webkit-text-fill-color:initial;background:none;color:#b85c7a}
/* portrait couple photos in landscape event frames: keep faces in view */
.ev .pic img{object-position:50% 25%}

/* revealed heart + countdown frames, as in the reference */
.heartbg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 28px #c08a1a77);z-index:1}
.reveal-text{padding-bottom:6%}
.reveal-text .dow{display:block;font-family:var(--body);font-weight:500;font-size:1.05rem;letter-spacing:.4em;color:#fff;text-shadow:0 2px 8px #0005;padding-left:.4em;margin-bottom:.4rem}
.reveal-text b{font-family:var(--display);font-style:italic;font-weight:600;font-size:2.3rem;color:#e0b24a;text-shadow:0 2px 10px #0006;line-height:1.1}
.count{align-items:flex-start;gap:.35rem}
.count div{background:none;border:0;outline:0;width:auto;padding:0}
.count .cell{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.count .box{position:relative;width:72px;height:80px;display:grid;place-items:center;border:1px solid var(--b-sm);background:radial-gradient(circle,#c08a1a24,transparent 70%)}
.count .box::before{content:"";position:absolute;inset:6px;pointer-events:none;--c:linear-gradient(var(--gold-line),var(--gold-line));
  background:var(--c) top left/12px 1px,var(--c) top left/1px 12px,var(--c) top right/12px 1px,var(--c) top right/1px 12px,var(--c) bottom left/12px 1px,var(--c) bottom left/1px 12px,var(--c) bottom right/12px 1px,var(--c) bottom right/1px 12px;background-repeat:no-repeat}
.count .box b{font-size:2.2rem}
.count small{margin:0;font-size:.5rem}
.count .dots{display:block;width:6px;height:22px;margin:30px 2px 0;background:radial-gradient(circle,#c08a1aa0 3px,transparent 3.5px) top/6px 11px repeat-y}
@media(min-width:500px){.count .box{width:96px;height:104px}.count .box b{font-size:3.4rem}}
.reveal-text .dow{text-transform:uppercase}

/* before reveal: prompt; after reveal: "Save the date" */
.datesec .save{display:none}
.datesec.done .goon{display:none}
.datesec.done .save{display:block;margin-top:2rem}

/* chapter timeline as in the reference: small-caps label, ring marker, larger copy */
.chap .n{text-transform:none;font-size:.95rem;opacity:.85}
.chap .dot{width:18px;height:18px;border:2px solid var(--gold);background:transparent;box-shadow:none;margin-top:.15rem}
.chap p{font-size:1.05rem;line-height:1.8}
.chap h4{font-size:clamp(1.6rem,4vw,2rem)}
#credits{margin:2rem auto 0;max-width:34rem;font-size:.7rem;line-height:1.6;color:var(--subtle)}#credits a{color:var(--muted)}

/* animated decor */
.ganwrap{display:flex;align-items:flex-end;justify-content:center;gap:.5rem}
.diya{width:54px;height:auto;flex:none;margin-bottom:.4rem;overflow:visible}
.diya .halo{transform-origin:30px 26px;animation:halo 2.4s ease-in-out infinite alternate}
.diya .flame{transform-origin:30px 31px;animation:flicker 1.3s ease-in-out infinite alternate;filter:drop-shadow(0 0 6px #ffb02e)}
.ganwrap .diya:last-child .flame{animation-delay:-.6s}
@keyframes flicker{0%{transform:scale(1,1) skewX(0)}30%{transform:scale(.92,1.08) skewX(-3deg)}60%{transform:scale(1.05,.95) skewX(2deg)}100%{transform:scale(.95,1.1) skewX(-1deg)}}
@keyframes halo{from{opacity:.55;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}

.count-sec,.datesec{isolation:isolate}
.mandala{position:absolute;left:50%;top:50%;width:min(125vw,640px);aspect-ratio:1;translate:-50% -50%;opacity:.16;pointer-events:none;z-index:-1;animation:spin 140s linear infinite;mix-blend-mode:multiply}
.datesec .mandala{animation-direction:reverse;opacity:.13}
@keyframes spin{to{rotate:360deg}}

.toran{position:absolute;top:0;left:0;right:0;height:150px;pointer-events:none;z-index:1}
.toran .wire{position:absolute;top:8px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#a8720e99,transparent)}
.strand{position:absolute;top:8px;display:flex;flex-direction:column;align-items:center;gap:1px;transform-origin:top center;animation:sway 4.6s ease-in-out infinite alternate}
.strand i{display:block;width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 2px #ffffff55,0 1px 2px #6b3a0a55}
.strand b{width:7px;height:12px;border-radius:50% 50% 60% 60%;background:#6a8a3a;margin-top:1px}
@keyframes sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

/* slow zoom on photos */
.ev .pic img,.photo img{animation:kb 20s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.09)}}
@media(prefers-reduced-motion:reduce){.diya .flame,.diya .halo,.mandala,.strand,.ev .pic img,.photo img{animation:none}}
.sec:has(.toran){padding-top:9.5rem}

/* animated event illustrations */
.ev .pic.art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ev .pic.art{animation:none}
.tw{animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:1}}
.pf{animation:petal 7s linear infinite}
@keyframes petal{to{transform:translate(var(--sx),280px) rotate(540deg)}}
.art-spin{animation:spin 90s linear infinite}
.art-float{animation:floaty 5s ease-in-out infinite alternate}
@keyframes floaty{to{transform:translateY(-5px)}}
.art-bob{animation:bobbing .9s ease-in-out infinite alternate}
@keyframes bobbing{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.art-leg{animation:step 1.2s ease-in-out infinite alternate}
.art-leg.l2{animation-direction:alternate-reverse}
@keyframes step{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.art-tail{animation:tail 1.6s ease-in-out infinite alternate}
@keyframes tail{from{transform:rotate(-6deg)}to{transform:rotate(7deg)}}
.art-sway{animation:swaybunt 3.5s ease-in-out infinite alternate}
@keyframes swaybunt{from{transform:translateX(-4px)}to{transform:translateX(4px)}}
.art-drum{animation:thump .5s ease-in-out infinite alternate}
@keyframes thump{from{transform:scale(1)}to{transform:scale(1.03,.98)}}
.art-stick{animation:hit .5s ease-in infinite alternate}
.art-stick.s2{animation-direction:alternate-reverse}
@keyframes hit{from{transform:rotate(-26deg)}to{transform:rotate(4deg)}}
.art-ring{opacity:0;animation:ring 1.5s ease-out infinite}
.art-ring.r2{animation-delay:.5s}.art-ring.r3{animation-delay:1s}
@keyframes ring{0%{opacity:.7;transform:scale(.3)}100%{opacity:0;transform:scale(2.4)}}
.diya .flame,.halo,.flame{transform-box:fill-box}
.flame{transform-origin:50% 100%;animation:flicker 1.3s ease-in-out infinite alternate}
.halo{transform-origin:50% 50%;animation:halo 2.4s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.tw,.pf,.art-spin,.art-float,.art-bob,.art-leg,.art-tail,.art-sway,.art-drum,.art-stick,.art-ring,.flame,.halo{animation:none}}