:root{--gold:#b88734;--cream:#fff8eb;--ink:#542f20;--muted:#775b3f;--line:rgba(167,119,42,.32);--gu-font:'Noto Sans Gujarati',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Cormorant Garamond',Georgia,serif;color:var(--ink);background:radial-gradient(ellipse at 50% 0%,#b96929 0%,#79391e 42%,#38180f 100%) fixed;min-height:100vh;overflow-x:hidden}
body.locked{overflow:hidden;height:100svh}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit}a,button{outline-offset:5px}a:focus-visible,button:focus-visible{outline:3px solid #d89933}
[hidden]{display:none!important}[lang="gu"]{font-family:var(--gu-font);font-style:normal;letter-spacing:0;text-transform:none}
canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#dust{z-index:0}#petals{z-index:1} /* BELOW the opaque card, never over its text. */
.foil,.foil-s{background:linear-gradient(110deg,#805018,#ac7825 28%,#8c571c 58%,#bb8632 85%,#805018);-webkit-background-clip:text;background-clip:text;color:#8c571c;-webkit-text-fill-color:transparent}
.language-toggle{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:35;display:inline-flex;padding:4px;border:1px solid rgba(255,224,162,.5);border-radius:999px;background:rgba(54,22,12,.94);box-shadow:0 5px 22px rgba(35,13,4,.18)}
.language-toggle button{min-height:40px;padding:8px 15px;border:0;border-radius:999px;color:#f9e3ae;background:transparent;font-family:Georgia,serif;font-size:14px;cursor:pointer}
.language-toggle button[lang="gu"]{font-family:var(--gu-font)}.language-toggle button[aria-pressed="true"]{background:#f6dc9f;color:#572e19}
/* One centered flex column. No horizontal transforms, GSAP offsets or xPercent. */
#intro{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.6vh,28px);margin:0;padding:78px 20px 28px;color:#f7dfae;transition:opacity .7s,visibility .7s}
#intro.gone{opacity:0;visibility:hidden;pointer-events:none}
.for,.tap{width:100%;text-align:center;font-family:Cinzel,Georgia,serif}
.for{font-size:clamp(11px,1.1vw,14px);line-height:1.7;letter-spacing:.21em;text-transform:uppercase}
.for>span,.tap>span{display:block}
.intro-gu{display:block;margin-top:8px;font-family:var(--gu-font);font-size:15px;line-height:1.65;letter-spacing:0;text-transform:none;color:#fff0cb}
.intro-greeting{width:min(92vw,600px);text-align:center;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;pointer-events:none}
#script{display:block;width:100%;height:auto;overflow:visible}
#script text{font-family:'Great Vibes',cursive;font-size:84px;fill:url(#gg);fill-opacity:0;stroke:#f5d27c;stroke-width:1;stroke-dasharray:1400;stroke-dashoffset:1400;filter:drop-shadow(0 2px 8px rgba(255,199,90,.25))}
.script-gu{font-family:var(--gu-font);font-size:clamp(18px,3vw,25px);margin-top:-14px;color:#f7dea2}
.opening .intro-greeting{opacity:1;transform:translateY(0)}
.opening #script text{animation:write 1.8s ease forwards,fillin .8s 1s forwards}
@keyframes write{to{stroke-dashoffset:0}}@keyframes fillin{to{fill-opacity:1}}
.scene{width:clamp(280px,38vw,520px);max-width:calc(100vw - 40px);aspect-ratio:1.42;flex:0 0 auto;margin-inline:auto;transform-origin:50% 50%;animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-7px)}}.opening .scene{animation:none}
.env{position:relative;width:100%;height:100%;transform-style:flat;transform-origin:50% 50%;transform:none;filter:none;border-radius:8px;box-shadow:0 24px 32px rgba(29,10,2,.32)}
.env-back{position:absolute;inset:0;border-radius:8px;background:linear-gradient(#e7c38a,#bd8c47)}
.env-front{position:absolute;inset:0;z-index:3;border-radius:8px;background:linear-gradient(to top right,transparent 49.6%,#f6e6c2 50%) left/50.2% 100% no-repeat,linear-gradient(to top left,transparent 49.6%,#f6e6c2 50%) right/50.2% 100% no-repeat,linear-gradient(#fff1d7,#eace9b);clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:7%}
.env-front::after{content:"";position:absolute;inset:7px;border:1px solid rgba(153,102,27,.5);border-radius:5px;clip-path:inherit}
.filigree{position:absolute;inset:0;background:radial-gradient(circle,rgba(173,118,34,.28) 0 1px,transparent 1.5px) 0 0/22px 22px;opacity:.3}
.env-to{position:relative;text-align:center;color:#85531b;line-height:1.2}.env-to span{display:block}
.env-to [lang="en"]{font-family:'Great Vibes',cursive;font-size:clamp(25px,3vw,36px)}.env-to [lang="gu"]{font-family:var(--gu-font);font-size:clamp(11px,1.2vw,15px);margin-top:4px}
.flap{position:absolute;left:0;right:0;top:0;height:58%;z-index:4;transform-origin:50% 0;transform-style:flat;transform:perspective(900px) rotateX(0deg);transition:transform 1s cubic-bezier(.6,0,.3,1)}
.flap-in{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(#f8e4bd,#d6ad67);backface-visibility:visible}
.flap-in::after{content:"";position:absolute;inset:0;clip-path:polygon(4% 3%,96% 3%,50% 93%);background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(173,122,39,.09) 9px 10px)}
.open .flap{transform:perspective(900px) rotateX(180deg);z-index:1}
.seal{position:absolute;z-index:6;left:50%;top:52%;width:84px;height:84px;margin:-42px 0 0 -42px;border:0;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 35% 30%,#bc4333,#8e231b 55%,#59160f);box-shadow:0 6px 14px rgba(0,0,0,.32),inset 0 -4px 8px rgba(0,0,0,.25),inset 0 3px 6px rgba(255,170,140,.35);animation:pulse 2.8s infinite}
.seal::before{content:"";position:absolute;inset:-5px;border-radius:47% 53% 50% 50%/55% 45% 55% 45%;background:inherit;z-index:-1;filter:brightness(.88)}
@keyframes pulse{70%{box-shadow:0 6px 14px rgba(0,0,0,.32),inset 0 -4px 8px rgba(0,0,0,.25),inset 0 3px 6px rgba(255,170,140,.35),0 0 0 14px rgba(255,210,120,0)}}
.lotus{position:absolute;inset:12px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}.half{display:none}
.cracked .seal{animation:none;transition:transform .6s ease,opacity .6s;transform:translateY(60px) rotate(32deg) scale(.65);opacity:0;pointer-events:none}
.mini{position:absolute;left:6%;right:6%;top:6%;bottom:6%;z-index:2;transition:transform 1.1s cubic-bezier(.3,.7,.2,1)}
.mini-in{height:100%;border-radius:5px;background:linear-gradient(#fffaf0,#f6e4bf);border:1px solid #bd8b38;box-shadow:inset 0 0 0 4px #fffaf0,inset 0 0 0 5px #d9a845;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#71381d;text-align:center;overflow:hidden}
.mini .mj{font-family:'Great Vibes',cursive;font-size:22px;color:#8d6222}.mini img{width:28%;height:auto;border-radius:50%;aspect-ratio:1;object-fit:cover;object-position:50% 20%;border:2px solid #d9a845}
.mini b{font-family:Cinzel,Georgia,serif;font-size:14px;margin-top:6px}.mini i{font-size:14px}.rise .mini{transform:translateY(-68%);z-index:5}
.tap{font-size:clamp(10px,1vw,12px);line-height:1.6;letter-spacing:.23em;text-transform:uppercase}.tap .intro-gu{font-size:14px}
.opening .tap,.opening .for{opacity:0;transition:opacity .4s}
#flash{position:fixed;inset:0;z-index:30;pointer-events:none;background:radial-gradient(circle,rgba(255,245,218,.8),rgba(255,220,150,.22) 40%,transparent 75%);opacity:0;transition:opacity .7s}#flash.on{opacity:1;transition:opacity .4s}
/* Opaque paper ensures petals cannot cover the greeting or any card content. */
#card{position:relative;z-index:10;opacity:0;visibility:hidden;transform:scale(.95) translateY(30px);transition:opacity .9s,transform 1.1s cubic-bezier(.2,.8,.2,1);padding:88px 22px 68px}#card.show{opacity:1;visibility:visible;transform:none}
.frame{max-width:640px;margin:0 auto;position:relative;border-radius:14px;padding:48px 38px 36px;background:radial-gradient(ellipse at 50% 0%,#fffdf5,transparent 42%),linear-gradient(180deg,#fff8eb,#fbf0d9);border:1px solid #d3ad66;box-shadow:0 0 0 6px rgba(53,23,11,.6),0 0 0 7px rgba(240,202,130,.5),0 26px 65px rgba(28,10,2,.4);text-align:center;overflow:hidden}
.frame::before{content:"";position:absolute;inset:10px;border:1px solid rgba(171,126,52,.28);border-radius:7px;pointer-events:none}
.greet{font-family:'Great Vibes',cursive;font-size:clamp(36px,8.6vw,62px);line-height:1.3;white-space:nowrap}.greet:focus{outline:none}
.grace{font-size:clamp(17px,4.2vw,20px);font-style:italic;color:var(--muted);margin:12px auto 0;max-width:29em;line-height:1.6}
.medal{position:relative;width:min(100%,420px);aspect-ratio:800/730;margin:24px auto 22px}
.medal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;-webkit-mask-image:radial-gradient(ellipse at center,#000 52%,rgba(0,0,0,.84) 70%,transparent 100%);mask-image:radial-gradient(ellipse at center,#000 52%,rgba(0,0,0,.84) 70%,transparent 100%)}
.medal .ring{display:none}.medal .halo{position:absolute;inset:8%;border-radius:50%;background:#edbf65;filter:blur(30px);opacity:.25}
h1{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:clamp(38px,10vw,62px);letter-spacing:.04em;line-height:1.2}.son{font-size:19px;color:var(--muted);margin-top:6px;line-height:1.5}
.div{display:flex;align-items:center;gap:12px;color:var(--gold);margin:23px auto;max-width:240px}.div span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.body{font-size:clamp(18px,4.6vw,21px);line-height:1.65;max-width:27em;margin:0 auto}.body em{font-family:Cinzel,Georgia,serif;font-style:normal;font-weight:700}
.frame section{margin-top:44px}h2{font-family:Cinzel,Georgia,serif;font-size:clamp(23px,5.4vw,29px);font-weight:500;letter-spacing:.08em;margin-bottom:16px;line-height:1.4}
.cap{font-family:Cinzel,Georgia,serif;letter-spacing:.3em;font-size:13px;color:#815b2b;text-transform:uppercase}
.date{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(10px,3vw,22px);font-family:Cinzel,Georgia,serif;margin:8px 0 0}.date .m,.date .y{font-size:clamp(15px,4vw,21px);letter-spacing:.12em;color:#815b2b;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 3px}.date .m{text-align:right}.date .y{text-align:left}.date .d{text-align:center;font-size:clamp(65px,18vw,92px);font-weight:700;line-height:1}
.tl{list-style:none;position:relative;max-width:350px;margin:0 auto;padding-left:34px;text-align:left}.tl::before{content:"";position:absolute;left:10px;top:10px;bottom:24px;width:1px;background:linear-gradient(#c6923d,rgba(184,135,52,.18))}.tl li{position:relative;padding:12px 0 20px}.tl li::before{content:"";position:absolute;left:-29px;top:19px;width:11px;height:11px;border-radius:50%;background:#bf8e3c;border:2px solid #fff4d8;box-shadow:0 0 0 1px #bf8e3c}
.tl time{font-family:Cinzel,Georgia,serif;font-size:13px;letter-spacing:.06em;color:#785323}.tl h3{font-weight:600;font-size:clamp(23px,5.8vw,28px);color:var(--ink);line-height:1.4;margin-top:3px}
.mandir{width:165px;margin:0 auto 14px;display:block}.vn{font-family:Cinzel,Georgia,serif;font-size:clamp(17px,4.3vw,20px);color:#744f24;line-height:1.5}.va{font-size:20px;color:var(--muted);margin:8px 0 20px;line-height:1.45}
.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.btns.col{flex-direction:column;max-width:340px;margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;text-decoration:none;cursor:pointer;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:13px;letter-spacing:.06em;line-height:1.5;padding:14px 22px;border-radius:999px;border:1px solid var(--gold);transition:transform .2s,box-shadow .2s,background-color .2s}.btn:active{transform:scale(.98)}.ghost{color:#75501c;background:rgba(255,255,255,.3)}.gold{color:#472b15;background:linear-gradient(115deg,#deb569,#f5dda4 48%,#e3bb70);border:1px solid #c49a50;box-shadow:0 5px 15px rgba(140,94,26,.15)}.big{font-size:17px;padding:16px 36px;margin:16px 0 12px}
.by{font-size:21px;font-style:italic;color:var(--muted)}.note{font-size:16px;color:var(--muted);line-height:1.5;max-width:29em;margin:0 auto}
.family-message{padding:26px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(239,210,151,.16)}.family-message h2{font-size:clamp(19px,4.6vw,24px);letter-spacing:.04em}.family-message p{font-size:19px;font-style:italic;line-height:1.65}
.rsvp{padding:28px 12px;border-radius:12px;background:radial-gradient(ellipse at 50% 0%,rgba(221,163,65,.16),transparent 80%)}
.rsvp-status{margin:18px auto 0;max-width:28em;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(243,215,155,.2);color:#78521b;font-size:18px;line-height:1.5}.rsvp-status span{display:block}.rsvp-status [lang="gu"]{margin-top:5px;font-size:13px;line-height:1.7}
.tyMsg{font-size:19px;line-height:1.5;margin-bottom:16px}.cal{padding:12px 0;border-radius:12px;scroll-margin-top:88px}.cal.ty{animation:glow 1.6s ease 2}@keyframes glow{50%{box-shadow:0 0 30px rgba(204,155,60,.3)}}
.memories{padding:30px 20px;border:1px solid var(--line);border-radius:12px;background:rgba(255,253,244,.62)}.memories p{font-size:20px;line-height:1.55;max-width:24em;margin:0 auto 20px}
footer{margin-top:46px;padding-top:28px;border-top:1px solid var(--line)}.svc{font-style:italic;font-size:20px;color:var(--muted)}.fam{font-family:'Great Vibes',cursive;font-size:clamp(31px,7.5vw,41px);line-height:1.35;margin-top:7px}.replay{margin-top:22px;padding:10px 8px;min-height:44px;background:none;border:0;color:#7c5a2e;font-family:inherit;font-size:16px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.r{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .85s cubic-bezier(.2,.8,.2,1)}.r.in{opacity:1;transform:none}
html[lang="gu"] body{font-family:var(--gu-font)}html[lang="gu"] .greet{font-family:var(--gu-font);font-size:clamp(27px,6.9vw,42px);white-space:normal;line-height:1.6}
html[lang="gu"] h1,html[lang="gu"] h2,html[lang="gu"] .cap,html[lang="gu"] .date,html[lang="gu"] .vn,html[lang="gu"] .btn,html[lang="gu"] .body em,html[lang="gu"] .mini b,html[lang="gu"] .mini .mj{font-family:var(--gu-font);letter-spacing:0}
html[lang="gu"] h1{font-size:clamp(34px,8.5vw,48px);line-height:1.55}html[lang="gu"] h2{font-size:clamp(21px,5.2vw,27px);line-height:1.7;font-weight:600}
html[lang="gu"] .grace,html[lang="gu"] .body,html[lang="gu"] .family-message p{font-size:16px;line-height:1.95;font-style:normal}
html[lang="gu"] .son,html[lang="gu"] .va,html[lang="gu"] .vn,html[lang="gu"] .by,html[lang="gu"] .tyMsg,html[lang="gu"] .memories p,html[lang="gu"] .svc{font-size:16px;line-height:1.9;font-style:normal}
html[lang="gu"] .tl h3{font-size:19px;line-height:1.8}html[lang="gu"] .btn{font-size:13px;line-height:1.75}html[lang="gu"] .note{font-size:13px;line-height:1.85}html[lang="gu"] .fam{font-family:var(--gu-font);font-size:clamp(20px,5vw,27px);line-height:1.8}html[lang="gu"] .mini .mj{font-size:16px}html[lang="gu"] .mini b,html[lang="gu"] .mini i{font-size:11px;line-height:1.8}
#sheet{position:fixed;inset:0;z-index:60;background:rgba(38,15,7,.72);backdrop-filter:blur(5px);display:flex;align-items:flex-end;justify-content:center}.sheet-in{position:relative;width:100%;max-width:620px;height:92svh;background:#fffaf0;border-radius:20px 20px 0 0;overflow:hidden;display:flex;flex-direction:column;padding-top:54px;animation:up .4s cubic-bezier(.2,.8,.2,1)}@keyframes up{from{transform:translateY(100%)}}
.sheet-in iframe{flex:1;min-height:0;border:0;width:100%}.x{position:absolute;right:10px;top:8px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:#66341b;color:#fff1cb;font-size:18px;cursor:pointer}.done{margin:10px 12px max(12px,env(safe-area-inset-bottom));text-align:center;flex-shrink:0}
@media(hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(140,94,26,.2)}.ghost:hover{background:#fff9ed}}
@media(max-width:480px){#card{padding:82px 16px 42px}.frame{padding:34px 20px 28px}.frame section{margin-top:34px}.family-message{padding:22px 15px}.memories{padding:25px 16px}.rsvp{padding:22px 0}.btns:not(.col) .btn{font-size:11px;padding-inline:14px}.language-toggle{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right))}.language-toggle button{padding-inline:12px}}
@media(max-height:700px){#intro{gap:12px;padding-top:66px;padding-bottom:16px}.intro-greeting{width:min(72vw,390px)}.for{font-size:10px;line-height:1.5}.for .intro-gu{font-size:12px;line-height:1.5}.script-gu{font-size:17px}}
@media(max-height:500px) and (orientation:landscape){#intro{justify-content:flex-start;overflow-y:auto}.intro-greeting{position:absolute;top:68px;width:350px}.for{margin-bottom:22px}.scene{margin-top:35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:.01s!important}.r{opacity:1;transform:none}.opening #script text{stroke-dashoffset:0;fill-opacity:1}}

/* Audio control is visible from the first envelope screen. */
.music-toggle{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:35;display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:#d4ad65;box-shadow:none;cursor:pointer}
.music-toggle svg{width:24px;height:24px;opacity:.6;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.music-toggle .sound-off{display:none}.music-toggle.is-muted .sound-off{display:block}.music-toggle.is-muted .sound-waves{display:none}
.redirect-thanks{padding:40px;text-align:center;color:#542f20;font-size:22px}
/* QA tweaks: larger envelope on phones; keep seal clear of the envelope label */
.scene{width:clamp(280px,max(38vw,min(86vw,360px)),520px)}
.seal{top:44%}
.env-front{padding-bottom:4%}