/* Lotus Invites – illustrated card engine */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#1a120c;color:var(--ink);font-family:var(--fb);font-size:18px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-intro{overflow:hidden;height:100vh;height:100svh}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
p{margin:0}
.bgfix{position:fixed;inset:-40px;background-size:cover;background-position:center;filter:blur(18px) saturate(1.1);transform:scale(1.08);z-index:0}
.bgfix::after{content:"";position:absolute;inset:0;background:rgba(var(--paper),.42)}

/* ---------- the card ---------- */
.stage{position:relative;width:100%;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card{position:relative;flex:none;width:var(--cw,100vw);height:var(--ch,100vh);overflow:hidden;isolation:isolate}
.card.boxed{border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.35)}
.cpar{position:absolute;inset:0;animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{transform:none}to{transform:none}}
.cimg{width:100%;height:100%;object-fit:cover;transform:none;transition:transform .25s linear;will-change:transform}
.c-intro .cpar{animation:reveal 2.2s cubic-bezier(.2,.7,.2,1) both,kb 18s 2.2s ease-in-out infinite alternate}
@keyframes reveal{from{filter:blur(14px) brightness(1.35);transform:scale(1.14)}to{filter:none;transform:scale(1)}}

/* light effects */
.lg{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:screen;z-index:2}
.lg-f{background:radial-gradient(circle,rgba(255,250,220,1) 0 7%,rgba(255,214,120,.85) 16%,rgba(255,160,50,.42) 36%,rgba(255,120,30,0) 68%);
  animation:flick calc(1.4s + var(--i) * .17s) ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.37s)}
.lg-f::after{content:"";position:absolute;inset:-130%;border-radius:50%;background:radial-gradient(circle,rgba(255,190,90,.38),rgba(255,150,60,0) 62%);animation:breathe 3.6s ease-in-out infinite alternate}
@keyframes flick{0%{opacity:.75;transform:translate(-50%,-50%) scale(.9)}22%{opacity:1;transform:translate(-50%,-52%) scale(1.06)}48%{opacity:.82;transform:translate(-50%,-50%) scale(.95)}71%{opacity:1;transform:translate(-51%,-51%) scale(1.1)}100%{opacity:.88;transform:translate(-50%,-50%) scale(1)}}
@keyframes breathe{from{opacity:.55;transform:scale(.9)}to{opacity:1;transform:scale(1.08)}}
.lg-h{background:radial-gradient(circle,rgba(255,244,205,.75),rgba(255,214,140,.32) 38%,rgba(255,200,120,0) 68%);animation:breathe 4.2s ease-in-out infinite alternate}
.lg-h::before{content:"";position:absolute;inset:-40%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,236,170,.5) 0 3deg,rgba(255,236,170,0) 3deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 18%,transparent 62%);animation:spin 40s linear infinite}
.lg-s{background:radial-gradient(circle,rgba(255,252,236,.55),rgba(255,248,220,0) 66%);animation:breathe 6s ease-in-out infinite alternate}
@keyframes spin{to{transform:rotate(360deg)}}
.shine{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.9) 46%,rgba(255,240,200,.6) 50%,transparent 64%) no-repeat;background-size:250% 100%;background-position:160% 0;animation:sweep 8s 1.6s ease-in-out infinite}
@keyframes sweep{0%{background-position:160% 0}35%,100%{background-position:-60% 0}}
.glint{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}

/* ---------- text on the card ---------- */
.cbox{position:absolute;z-index:5;container-type:size;display:flex;align-items:center;justify-content:center}
.cin{--k:1;width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink);
  text-shadow:0 0 12px rgba(var(--paper),.95),0 0 3px rgba(var(--paper),.9)}
.cin>*{opacity:0;transform:translateY(14px)}
.cin.on>*{animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
.cin.on>:nth-child(1){animation-delay:.1s}.cin.on>:nth-child(2){animation-delay:.25s}.cin.on>:nth-child(3){animation-delay:.4s}.cin.on>:nth-child(4){animation-delay:.55s}
.cin.on>:nth-child(5){animation-delay:.75s}.cin.on>:nth-child(6){animation-delay:.95s}.cin.on>:nth-child(7){animation-delay:1.15s}.cin.on>:nth-child(8){animation-delay:1.3s}
.cin.on>:nth-child(9){animation-delay:1.45s}.cin.on>:nth-child(10){animation-delay:1.6s}.cin.on>:nth-child(11){animation-delay:1.75s}.cin.on>:nth-child(12){animation-delay:1.9s}
@keyframes up{to{opacity:1;transform:none}}
.cin .ml{font-family:'Noto Serif Malayalam',serif;font-weight:600;font-size:calc(var(--k) * 5.6cqw);color:var(--acc);letter-spacing:.02em;line-height:1.5}
.cin .emb{width:calc(var(--k) * 13cqw);height:auto;margin:.4em auto .1em;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.cin .emb.x{width:calc(var(--k) * 7cqw);color:var(--acc2)}
.cin .tg{margin-top:.5em;font-family:var(--fd);font-weight:500;font-size:calc(var(--k) * 3.5cqw);letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--acc2) 50%,var(--ink))}
.cin .ti{margin-top:.4em;font-family:var(--fs);font-size:calc(var(--k) * 8cqw);line-height:1.2;color:var(--acc)}
.cin .nm{margin:.25em 0 .2em;font-family:var(--fs);font-weight:400;font-size:calc(var(--k) * 17cqw);line-height:1.05;display:flex;flex-direction:column;align-items:center}
.cin .nm span,.cin .nm1{display:block;max-width:none;white-space:nowrap;padding:.14em .5em .24em;margin:-.14em -.5em -.24em;background:linear-gradient(100deg,var(--ink) 0 38%,var(--acc2) 48%,var(--ink) 58%) no-repeat;background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 6px rgba(var(--paper),.9));animation:goldrun 6s 2.6s ease-in-out infinite}
@keyframes goldrun{0%{background-position:100% 0}45%,100%{background-position:0 0}}
.cin .nm i{font-style:normal;font-family:var(--fs);font-size:.5em;color:var(--acc2);margin:-.1em 0}
.cin .dt{margin-top:.6em;padding:.45em 1.2em;border-top:1px solid color-mix(in srgb,var(--acc2) 60%,transparent);border-bottom:1px solid color-mix(in srgb,var(--acc2) 60%,transparent);
  font-family:var(--fd);font-size:calc(var(--k) * 3.9cqw);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.open-btn{position:relative;margin-top:1.1em;padding:.95em 2.2em;border:0;border-radius:99px;font-family:var(--fd);font-weight:600;font-size:max(9px,calc(var(--k) * 3.6cqw));letter-spacing:.2em;white-space:nowrap;text-transform:uppercase;color:#fff;text-shadow:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 85%,#000),var(--acc) 45%,color-mix(in srgb,var(--acc) 70%,#fff));box-shadow:0 0 0 2px rgba(255,255,255,.7),0 0 0 4px color-mix(in srgb,var(--acc2) 70%,transparent),0 14px 30px -10px rgba(0,0,0,.55);overflow:hidden}
.open-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-120%);animation:btnsh 3s 3s ease-in-out infinite}
.open-btn::after{content:"";position:absolute;inset:-6px;border-radius:99px;border:2px solid var(--acc2);opacity:0;animation:ring 2.4s 3s ease-out infinite}
@keyframes btnsh{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
@keyframes ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
.open-btn span{position:relative}
/* hero (full details) */
.cin .inv{margin-top:.5em;font-style:italic;font-size:calc(var(--k) * 3.6cqw);color:var(--ink);opacity:.85}
.cin .pp1{margin-top:.4em}
.cin .nm1{font-family:var(--fs);font-size:calc(var(--k) * 13.5cqw);line-height:1.15}
.cin .par{font-size:calc(var(--k) * 3.4cqw);line-height:1.35;color:var(--ink);opacity:.85;margin-top:.1em}
.cin .amp{font-family:var(--fs);font-size:calc(var(--k) * 8cqw);line-height:1;color:var(--acc2);margin:.15em 0 0}
.cin .orn,.pan .orn{display:block;width:calc(var(--k) * 46cqw);max-width:220px;height:auto;margin:.7em auto .5em;color:var(--acc2)}
.cin .when{display:flex;align-items:center;justify-content:center;gap:.8em;font-family:var(--fd);font-size:calc(var(--k) * 3.2cqw);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);line-height:1.3}
.cin .w2{display:flex;align-items:center;gap:.35em;padding:0 .8em;border-left:1px solid var(--acc2);border-right:1px solid var(--acc2)}
.cin .w2 b{font-size:3.2em;font-weight:500;line-height:1;color:var(--acc)}
.cin .w2 em{font-style:normal;text-align:left}
.cin .ven{margin-top:.8em;font-family:var(--fd);font-weight:600;font-size:calc(var(--k) * 4.4cqw);line-height:1.25;color:var(--acc)}
.cin .area{font-size:calc(var(--k) * 3.4cqw);color:var(--ink);opacity:.85}

/* ---------- intro & opening ---------- */
#intro{position:fixed;inset:0;z-index:50;background:#1a120c}
#intro[hidden]{display:none!important}
.bloom{position:absolute;left:50%;top:60%;width:20px;height:20px;margin:-10px;border-radius:50%;z-index:20;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff,rgba(255,240,200,.9) 30%,rgba(255,220,150,0) 70%)}
.opening .bloom{animation:bloom 1.5s cubic-bezier(.3,0,.2,1) forwards}
@keyframes bloom{0%{opacity:0;transform:scale(1)}30%{opacity:1}100%{opacity:0;transform:scale(160)}}
.opening #intro .cin{transition:opacity .6s,transform .8s,filter .8s;opacity:0;transform:scale(1.06);filter:blur(4px)}
.opening #intro{animation:fadeout .9s .65s ease forwards}
@keyframes fadeout{to{opacity:0;visibility:hidden}}
#inv{position:relative;z-index:2}
body.is-intro #inv{visibility:hidden}
.hero{position:relative}
.scroll-hint{position:absolute;left:50%;bottom:18px;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.85);border-radius:14px;z-index:6;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.scroll-hint span{position:absolute;left:50%;top:8px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:#fff;animation:hint 1.8s infinite}
@keyframes hint{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(15px)}}

/* ---------- content panels ---------- */
.sec{position:relative;padding:34px 16px}
.pan{position:relative;max-width:640px;margin:0 auto;padding:46px 26px 42px;text-align:center;border-radius:26px;background:rgba(var(--paper),.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 30px 70px -36px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.6)}
.pan::before{content:"";position:absolute;inset:9px;border-radius:19px;border:1px solid color-mix(in srgb,var(--acc2) 55%,transparent);pointer-events:none}
.pan.wide{max-width:980px}
.k{font-family:var(--fd);font-size:13px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:color-mix(in srgb,var(--acc2) 55%,var(--ink))}
.h2{margin:6px 0 30px;font-family:var(--fs);font-weight:400;font-size:clamp(40px,7vw,58px);line-height:1.15;color:var(--acc)}
.h2::after{content:"";display:block;width:120px;height:14px;margin:8px auto 0;background:radial-gradient(circle,var(--acc2) 3px,transparent 3.5px) 50% 50%/14px 14px no-repeat,linear-gradient(var(--acc2),var(--acc2)) 0 50%/45px 1px no-repeat,linear-gradient(var(--acc2),var(--acc2)) 100% 50%/45px 1px no-repeat}
[data-a]{opacity:0;transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
[data-a=up]{transform:translateY(46px)}[data-a=zoom]{transform:scale(.85)}[data-a=left]{transform:translateX(-50px)}[data-a=right]{transform:translateX(50px)}
[data-a].in{opacity:1;transform:none}
.cd{display:flex;justify-content:center;gap:12px;margin-top:20px}
.cd[hidden]{display:none}
.cd div{min-width:72px;padding:14px 6px 10px;border-radius:16px;background:#fff;box-shadow:0 12px 26px -16px rgba(0,0,0,.4),inset 0 0 0 1px color-mix(in srgb,var(--acc2) 45%,transparent)}
.cd b{display:block;font-family:var(--fd);font-size:30px;font-weight:600;line-height:1.1;color:var(--acc)}
.cd span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.75}
.cd b.tk{animation:tk .5s ease}
@keyframes tk{from{transform:translateY(-35%);opacity:0}}
.cd-note{margin-top:14px;font-family:var(--fs);font-size:34px;color:var(--acc)}
.verse{margin:10px auto;font-style:italic;font-size:clamp(20px,3vw,25px);line-height:1.6;color:var(--ink)}
.w{display:inline-block;opacity:.1;transform:translateY(8px);transition:opacity .7s calc(var(--i) * .06s),transform .7s calc(var(--i) * .06s)}
.verse.in .w,.pan.in .w{opacity:1;transform:none}
.pp{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:20px}
.ph{position:relative;width:min(210px,58vw);aspect-ratio:4/5;margin:0 auto 20px;padding:7px;border-radius:999px 999px 18px 18px;background:linear-gradient(140deg,#F7E3A1,#B8862B 40%,#FCEFC0 60%,#9C7226)}
.ph-in{width:100%;height:100%;border-radius:999px 999px 13px 13px;overflow:hidden;background:#fff;clip-path:inset(100% 0 0 0);transition:clip-path 1.3s cubic-bezier(.6,0,.2,1) calc(var(--d,0s) + .25s)}
.pcard.in .ph-in{clip-path:inset(0 0 0 0)}
.ph-in img{width:100%;height:100%;object-fit:cover;transform:scale(1.2);transition:transform 2s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .25s)}
.pcard.in .ph-in img{transform:none}
.ph-in span{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-family:var(--fs);font-size:90px;color:#fff;background:linear-gradient(150deg,var(--acc2),var(--acc))}
.role{font-family:var(--fd);font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--acc2)}
.pcard h3{margin:2px 0 6px;font-family:var(--fs);font-weight:400;font-size:clamp(44px,6vw,56px);line-height:1.1;color:var(--acc)}
.par{font-weight:600;color:var(--ink)}
.adr{margin-top:4px;font-size:16px;color:var(--ink);opacity:.8}
.pp-amp{align-self:center;font-family:var(--fs);font-size:64px;color:var(--acc2)}
.evs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.ev{position:relative;padding:34px 22px 28px;border-radius:20px;background:#fff;box-shadow:0 24px 50px -30px rgba(0,0,0,.45),inset 0 0 0 1px color-mix(in srgb,var(--acc2) 45%,transparent)}
.ev::before{content:"";position:absolute;left:50%;top:-1px;width:60%;height:4px;transform:translateX(-50%);border-radius:0 0 4px 4px;background:linear-gradient(90deg,transparent,var(--acc2),transparent)}
.ev-t{font-family:var(--fs);font-size:40px;line-height:1.1;color:var(--acc)}
.ev-date{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 6px}
.ev-date b{font-family:var(--fd);font-size:54px;font-weight:500;line-height:.9;color:var(--acc2)}
.ev-date span{text-align:left;font-size:13px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ev-time{font-weight:600}
.ev-note{font-size:15px;opacity:.8}
.ev-v{margin-top:12px;font-family:var(--fd);font-size:19px;font-weight:600;line-height:1.3;color:var(--ink)}
.ev-a{font-size:15px;opacity:.8}
.ev-btns,.sh-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.qr{width:110px;margin:18px auto 0;padding:7px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.qr img,.qr canvas{width:100%!important;height:auto!important}
.qr[hidden]{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border-radius:99px;border:1.5px solid var(--acc);background:var(--acc);color:#fff;font-family:var(--fb);font-size:15px;font-weight:600;text-decoration:none;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -10px var(--acc)}
.btn.ghost{background:transparent;color:var(--acc)}
.btn.wa{background:#25D366;border-color:#25D366;color:#fff}
.gl-1{display:grid;max-width:560px;margin:0 auto}
.gallery .gl,.gl-2,.gl-3{display:grid;gap:12px}
.gl-2{grid-template-columns:1fr 1fr}.gl-3{grid-template-columns:repeat(3,1fr)}
.gi{position:relative;padding:0;border:0;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:#eee;box-shadow:0 20px 34px -24px rgba(0,0,0,.6),0 0 0 3px #fff,0 0 0 4px color-mix(in srgb,var(--acc2) 55%,transparent)}
.gl-1 .gi{aspect-ratio:4/3}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.gi:hover img{transform:scale(1.07)}
.vid{position:relative;max-width:820px;margin:0 auto;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#111}
.vid img{width:100%;height:100%;object-fit:cover;opacity:.85}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vplay{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--acc);display:flex;align-items:center;justify-content:center;animation:pulse 2.2s infinite}
.vplay svg{width:32px;height:32px;margin-left:4px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}100%{box-shadow:0 0 0 26px rgba(255,255,255,0)}}
.card-img{max-width:480px;margin:18px auto 0;border-radius:12px;overflow:hidden;box-shadow:0 26px 50px -26px rgba(0,0,0,.55)}
.foot{padding-bottom:110px}
.ty{font-family:var(--fs);font-size:clamp(66px,13vw,104px);line-height:1.15;color:var(--acc)}
.ft-sub{font-size:13px;letter-spacing:.24em;text-transform:uppercase;opacity:.8}
.ft-n{margin-top:18px;font-family:var(--fs);font-size:40px;color:var(--ink)}
.ft-n span{display:inline-block;color:var(--acc);animation:beat 1.6s infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.15)}}
.ft-d{letter-spacing:.3em;opacity:.8}

/* ---------- chrome ---------- */
.mus{position:fixed;right:16px;bottom:16px;z-index:60;width:48px;height:48px;border-radius:50%;border:0;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.mus[hidden]{display:none}
.mus svg{width:22px;height:22px}
.mus.on svg{animation:spin 4s linear infinite}
.lb{position:fixed;inset:0;z-index:80;background:rgba(10,8,12,.55);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.lb[hidden]{display:none}
.lb img{max-width:92vw;max-height:82vh;border-radius:10px;box-shadow:0 30px 70px -20px rgba(0,0,0,.7);user-select:none;-webkit-user-drag:none}
.lb img.z{animation:lz .45s ease}.lb img.l{animation:ll .45s ease}.lb img.r{animation:lr .45s ease}
@keyframes lz{from{opacity:0;transform:scale(.9)}}@keyframes ll{from{opacity:0;transform:translateX(-60px)}}@keyframes lr{from{opacity:0;transform:translateX(60px)}}
.lb button{position:absolute;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:26px;line-height:1}
.lb button[hidden]{display:none}
.lb-x{top:16px;right:16px;font-size:18px!important}
.lb-p{left:14px;top:50%;margin-top:-24px}.lb-n{right:14px;top:50%;margin-top:-24px}
.lb-c{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#ddd;font-size:13px;letter-spacing:.2em;pointer-events:none}
.toast{position:fixed;left:50%;bottom:84px;z-index:90;transform:translateX(-50%);padding:10px 20px;border-radius:99px;background:#111;color:#fff;font-size:14px}
.toast[hidden]{display:none}
.m-ribbon{position:fixed;top:10px;left:50%;z-index:95;transform:translateX(-50%);padding:5px 14px;border-radius:99px;background:rgba(0,0,0,.72);color:#fff;font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;white-space:nowrap}
@media (max-width:320px){.m-ribbon{top:30px;font-size:9px;padding:4px 10px}}
.fxc,.spk{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.spk{z-index:70}
.fxc.amb{z-index:3}
@media (max-width:720px){
  body{font-size:17px}
  .pan{padding:40px 18px 36px}
  .pp{grid-template-columns:1fr;gap:4px}
  .pp-amp{font-size:52px}
  .cd{gap:8px}.cd div{min-width:0;flex:1;max-width:78px}.cd b{font-size:26px}.cd span{font-size:9.5px;letter-spacing:.1em}
  .gl-3{grid-template-columns:1fr 1fr}.gl-3 .gi:first-child{grid-column:1/-1;aspect-ratio:4/3}
  .lb-p,.lb-n{top:auto!important;bottom:14px;margin-top:0!important}
}

/* ---------- side decoration (fills the space around the card) ---------- */
.bgfix{filter:blur(10px) saturate(1.15)}
.bgfix::after{background:radial-gradient(ellipse at center,rgba(var(--paper),.55) 0,rgba(var(--paper),.35) 45%,rgba(var(--paper),.1) 100%)}
.deco{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.deco::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 50% 50%,transparent 55%,color-mix(in srgb,var(--acc) 22%,transparent) 100%)}
.md{position:absolute;aspect-ratio:1;color:var(--acc2);opacity:.55;filter:drop-shadow(0 0 6px rgba(255,236,170,.6))}
.md svg{width:100%;height:100%;display:block;animation:spin 140s linear infinite}
.md.l{left:0;top:50%;width:min(92vh,760px);transform:translate(-50%,-50%)}
.md.r{right:0;top:50%;width:min(92vh,760px);transform:translate(50%,-50%)}
.md.r svg{animation-direction:reverse}
.md.s1{left:22%;top:0;width:min(34vh,300px);transform:translate(-50%,-50%);opacity:.4}
.md.s2{right:22%;bottom:0;width:min(34vh,300px);transform:translate(50%,50%);opacity:.4}
.md.s1 svg,.md.s2 svg{animation-duration:70s}
.md.s2 svg{animation-direction:reverse}
.md.l::after,.md.r::after{content:"";position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,rgba(255,240,200,.75),rgba(255,220,150,0) 70%);animation:breathe 4.5s ease-in-out infinite alternate}
.bok i{position:absolute;bottom:-60px;width:var(--s,40px);height:var(--s,40px);border-radius:50%;
  background:radial-gradient(circle,rgba(255,250,232,.95),rgba(255,226,160,.45) 45%,rgba(255,214,140,0) 70%);mix-blend-mode:screen;animation:rise var(--t,16s) linear var(--dl,0s) infinite}
.bok i:nth-child(1){left:3%;--s:46px;--t:17s;--dl:-2s}.bok i:nth-child(2){left:9%;--s:22px;--t:12s;--dl:-7s}.bok i:nth-child(3){left:15%;--s:60px;--t:21s;--dl:-12s}
.bok i:nth-child(4){left:20%;--s:18px;--t:11s;--dl:-4s}.bok i:nth-child(5){left:6%;--s:30px;--t:15s;--dl:-10s}.bok i:nth-child(6){left:12%;--s:14px;--t:9s;--dl:-1s}
.bok i:nth-child(7){right:4%;--s:50px;--t:18s;--dl:-5s}.bok i:nth-child(8){right:10%;--s:20px;--t:12s;--dl:-9s}.bok i:nth-child(9){right:16%;--s:56px;--t:20s;--dl:-15s}
.bok i:nth-child(10){right:21%;--s:16px;--t:10s;--dl:-3s}.bok i:nth-child(11){right:7%;--s:32px;--t:14s;--dl:-11s}.bok i:nth-child(12){right:13%;--s:12px;--t:9s;--dl:-6s}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}50%{transform:translate(18px,-55vh)}90%{opacity:.8}100%{transform:translate(-12px,-115vh);opacity:0}}
#intro>.deco,#intro>.bgfix{position:absolute}

/* glowing gold frame around the card on wide screens */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.card.boxed{overflow:visible}
.card.boxed .cpar,.card.boxed .lg,.card.boxed .shine,.card.boxed .glint{clip-path:inset(0 round 14px)}
.card.boxed .cpar{overflow:hidden;border-radius:14px}
.card.boxed::before{content:"";position:absolute;inset:-7px;border-radius:20px;padding:3px;z-index:-1;
  background:conic-gradient(from var(--ang),#8C6420,#F7E3A1,#C9962E,#FFF4C8,#9C7226,#E9CD84,#8C6420);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ang 8s linear infinite;
  box-shadow:0 0 30px rgba(255,214,140,.6)}
.card.boxed::after{content:"";position:absolute;inset:-22px;border-radius:30px;z-index:-2;background:radial-gradient(ellipse at center,rgba(255,236,190,.65),rgba(255,236,190,0) 70%);filter:blur(10px);animation:breathe 4s ease-in-out infinite alternate}
@keyframes ang{to{--ang:360deg}}
.bgfix{inset:-30px;filter:blur(5px) saturate(1.2) brightness(1.02);transform:scale(1.04);animation:bgdrift 30s ease-in-out infinite alternate}
@keyframes bgdrift{to{transform:scale(1.12) translateY(-1.5%)}}
.bgfix::after{background:radial-gradient(ellipse 60% 100% at 50% 50%,rgba(var(--paper),.78) 0,rgba(var(--paper),.42) 55%,rgba(var(--paper),.12) 100%)}
.md{opacity:.75}
.md path,.md circle{stroke-width:1.5}
.deco::after{background:radial-gradient(ellipse 75% 95% at 50% 50%,transparent 60%,color-mix(in srgb,var(--acc) 28%,transparent) 100%)}
/* flanking copies of the artwork (wide screens) */
.stage{perspective:1400px}
.flank{display:none}
.stage.wide .flank{display:block;position:absolute;top:50%;height:calc(var(--ch) * .84);width:auto;aspect-ratio:var(--ar);border-radius:12px;pointer-events:none;
  filter:blur(1.5px) saturate(1.1);opacity:.6;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);animation:flk2 7s ease-in-out infinite alternate}
.stage.wide .flank.l{right:calc(50% + var(--cw) / 2 + 26px);transform:translateY(-50%) rotateY(32deg);transform-origin:100% 50%;-webkit-mask:linear-gradient(90deg,transparent,#000 55%);mask:linear-gradient(90deg,transparent,#000 55%)}
.stage.wide .flank.r{left:calc(50% + var(--cw) / 2 + 26px);transform:translateY(-50%) rotateY(-32deg);transform-origin:0 50%;-webkit-mask:linear-gradient(-90deg,transparent,#000 55%);mask:linear-gradient(-90deg,transparent,#000 55%)}
@keyframes flk2{from{opacity:.5}to{opacity:.68}}
.opening .flank{transition:opacity .6s;opacity:0!important}
/* 1.9.3: no side copies / animated frame */
.stage.wide .flank,.flank{display:none!important}
.card.boxed::before,.card.boxed::after{content:none!important;display:none!important}
.card.boxed{box-shadow:0 30px 70px -30px rgba(0,0,0,.45)}
/* user background photo */
.has-ubg .bgfix{filter:saturate(1.05);inset:-20px;transform:scale(1.02)}
.has-ubg .bgfix::after{background:radial-gradient(ellipse 65% 100% at 50% 50%,rgba(var(--paper),.5),rgba(var(--paper),.15) 70%,rgba(var(--paper),.05))}
.has-ubg .md{opacity:.35}
/* user photo only after the invitation is opened */
.ct>.bgfix{transition:opacity 1.4s ease}
.ct.is-intro>.bgfix{opacity:0}
/* user background photo: one full-screen photo (no copies), faces kept in view */
.ct.has-ubg>.bgfix{background-position:center 25%}
@media (min-aspect-ratio:1/1){
  .ct.has-ubg>.bgfix{filter:none;inset:0;transform:none;animation:none;background-size:cover;background-repeat:no-repeat;background-position:center 25%}
  .ct.has-ubg>.bgfix::after{background:rgba(var(--paper),.18)}
  .has-ubg .md{opacity:.08}
}

/* save the date / live stream (optional links) */
.lnk .vid{margin-bottom:6px}
.lnk-act{margin:20px 0 0;text-align:center}
.lnk-sub{margin:-4px 0 18px;text-align:center;font-family:var(--fb);font-size:16px;opacity:.85}
.live-dot{display:inline-block;width:9px;height:9px;margin-right:4px;border-radius:50%;background:#E53935;vertical-align:middle;animation:livep 1.6s infinite}
@keyframes livep{0%{box-shadow:0 0 0 0 rgba(229,57,53,.6)}70%{box-shadow:0 0 0 9px rgba(229,57,53,0)}100%{box-shadow:0 0 0 0 rgba(229,57,53,0)}}
.lb button{background:rgba(0,0,0,.38)!important;border-color:rgba(255,255,255,.55)!important}
.lb .lc,.lb [class*=cnt],.lb [class*=count]{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}