:root{--gold:#ffd36b;--ease:cubic-bezier(.4,0,.2,1)}
*{box-sizing:border-box;margin:0}
html,body{min-height:100%;background:#12060a}
body{display:flex;flex-direction:column;align-items:center;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.stage{position:relative;width:100%;max-width:100vw;aspect-ratio:1024/1536;container-type:inline-size;overflow:hidden;background:#1a0a0a;isolation:isolate;
  --u:calc(100cqw/1024);animation:in 1.6s var(--ease) both}

@keyframes in{from{opacity:0;filter:brightness(.4)}to{opacity:1;filter:none}}
.stage>*{position:absolute}
.poster{inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.stage>[data-r],.stage>.layer{pointer-events:none}
#fx{inset:0;width:100%;height:100%;pointer-events:none}
/* blend layers */
.layer{inset:0}.layer>*{position:absolute}
.cloud{background:radial-gradient(closest-side,#ffb86655,transparent);mix-blend-mode:screen;filter:blur(6px);opacity:.55;animation:drift 70s linear infinite}
.c2{animation-duration:95s;animation-delay:-40s;opacity:.4}
@keyframes drift{from{transform:translateX(-30%)}to{transform:translateX(130%)}}
.ray{background:repeating-conic-gradient(from 0deg at 45% 48%,#ffd27a30 0 4deg,transparent 4deg 14deg);mix-blend-mode:screen;opacity:.35;
  -webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent);animation:spin 120s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.firelight{background:radial-gradient(ellipse at 70% 80%,#ff6a0044,transparent 70%);mix-blend-mode:screen;animation:fl 2.3s ease-in-out infinite alternate}
@keyframes fl{0%{opacity:.35}30%{opacity:.8}55%{opacity:.5}100%{opacity:.95}}
/* crops */
.crop{background-image:url(assets/poster.png);background-repeat:no-repeat;pointer-events:none;
  -webkit-mask:radial-gradient(closest-side,#000 62%,transparent 100%);mask:radial-gradient(closest-side,#000 62%,transparent 100%);will-change:transform}
.bell{transform-origin:50% 4%;animation:swing 4.6s ease-in-out infinite alternate}
.b2{animation-duration:5.4s;animation-delay:-1.2s}.b3{animation-duration:4.1s;animation-delay:-2.3s}.b4{animation-duration:5s;animation-delay:-.6s}
@keyframes swing{from{transform:rotate(-3.2deg)}to{transform:rotate(3.2deg)}}
.sway{animation:sway 7s ease-in-out infinite alternate}
.garland{transform-origin:50% 0}.mari{transform-origin:50% 100%;animation-duration:6s}.mari.r{animation-delay:-2.5s}.garland.r{animation-delay:-3s}
@keyframes sway{from{transform:rotate(-1.1deg)}to{transform:rotate(1.1deg)}}
/* glows */
.glow{border-radius:50%;mix-blend-mode:screen}
.arrow{background:radial-gradient(closest-side,#fff8d8,#ffd24a99 35%,transparent);animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.trail{background:linear-gradient(100deg,transparent,#ffe08a88 60%,#fff);mix-blend-mode:screen;clip-path:polygon(0 100%,100% 0,100% 45%,0 100%);transform-origin:100% 0;animation:tr 2.4s ease-in-out infinite alternate}
@keyframes tr{from{opacity:.25}to{opacity:.9}}
.eye{background:radial-gradient(closest-side,#ff5a2a,transparent);mix-blend-mode:screen;animation:pulse 2.6s ease-in-out infinite}.e2{animation-delay:-.4s}
.fire{background:radial-gradient(closest-side,#ff7a1a99,transparent);animation:flick 1.1s ease-in-out infinite alternate}
.f2{animation-duration:1.7s;animation-delay:-.5s}
@keyframes flick{0%{opacity:.4;transform:scale(.95,.9)}40%{opacity:.9;transform:scale(1.05,1.12)}70%{opacity:.55}100%{opacity:1;transform:scale(1,1.05)}}
.diya{background:radial-gradient(closest-side,#ffd36bcc,#ff9a2a55 40%,transparent);animation:flick 1.4s ease-in-out infinite alternate}
/* type effects */
.sweep{mix-blend-mode:overlay;overflow:hidden}
.sweep::after{content:"";position:absolute;top:-10%;bottom:-10%;width:30%;left:-40%;background:linear-gradient(105deg,transparent,#fff 50%,transparent);opacity:.85;animation:sw 6.5s ease-in-out infinite}
.marathi::after{animation-duration:5s;animation-delay:2s;background:linear-gradient(105deg,transparent,#ffe9a0 50%,transparent)}
@keyframes sw{0%{left:-40%}45%,100%{left:120%}}
.sweep.title{animation:glow 5s ease-in-out infinite alternate;background:radial-gradient(closest-side,#ffd16a40,transparent)}
@keyframes glow{from{opacity:.45}to{opacity:1}}
.spark{font-size:calc(var(--u)*22);color:#fff3c0;text-align:center;line-height:1;text-shadow:0 0 8px #ffc94a,0 0 16px #ff9a1a;opacity:0;transform:scale(.3);animation:tw 4.8s ease-in-out infinite;animation-delay:var(--d)}
@keyframes tw{0%,60%,100%{opacity:0;transform:scale(.3) rotate(0)}75%{opacity:1;transform:scale(1.25) rotate(45deg)}}
.panel-glow{border-radius:calc(var(--u)*50);box-shadow:inset 0 0 calc(var(--u)*26) #ffe3a088,0 0 calc(var(--u)*30) #ffb04c66;animation:pg 5s ease-in-out infinite alternate}
@keyframes pg{from{opacity:.25}to{opacity:.9}}
.ring{border-radius:50%;border:calc(var(--u)*3) solid #ffd36b;box-shadow:0 0 calc(var(--u)*14) #ffb84c;opacity:0;animation:ringin .9s var(--ease) calc(1.8s + var(--i)*.25s) forwards,pg 3.5s ease-in-out calc(3s + var(--i)*.4s) infinite alternate}
@keyframes ringin{from{opacity:0;transform:scale(.5)}to{opacity:.7;transform:scale(1)}}
/* name pill */
.namepill{display:flex;align-items:center;justify-content:center;border-radius:calc(var(--u)*26);
  background:radial-gradient(ellipse at 50% 40%,#fddb8c 35%,#f4b95c 75%,#eb9d40);box-shadow:inset 0 0 calc(var(--u)*8) #fff6;overflow:hidden}
#sender{font:700 calc(var(--u)*46)/1 "Playfair Display",Georgia,"Times New Roman",serif;color:#7a0d10;white-space:nowrap;max-width:94%;text-align:center;text-shadow:0 1px 0 #fff8;
  animation:up 1.2s var(--ease) 1s both}
@keyframes up{from{opacity:0;transform:translateY(calc(var(--u)*14))}to{opacity:1;transform:none}}
/* greeting panel */
.panel-edge{border-radius:calc(var(--u)*44);pointer-events:none;padding:calc(var(--u)*3);
  background:conic-gradient(from var(--a,0deg),transparent 0 70%,#ffe9a8 85%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:ang 6s linear infinite;filter:drop-shadow(0 0 6px #ffbf55)}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes ang{to{--a:360deg}}
.field{display:flex;align-items:center;gap:calc(var(--u)*18);padding:0 calc(var(--u)*28);background:#fff;border-radius:999px;border:calc(var(--u)*2) solid #d9d2c6;transition:box-shadow .3s,border-color .3s;z-index:3}
.field:hover,.field:focus-within{box-shadow:0 0 calc(var(--u)*22) #ffb347aa;border-color:#f0a030}
.field svg{width:calc(var(--u)*30);height:calc(var(--u)*30);flex:none}
input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 max(16px,calc(var(--u)*26)) system-ui,Segoe UI,Roboto,sans-serif;color:#2b2b2b}
input::placeholder{color:#8b8f98}
.wa{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*22);border:0;border-radius:999px;cursor:pointer;color:#fff;z-index:3;
  background:linear-gradient(#0fa650,#008540);font:700 calc(var(--u)*30) Georgia,serif;box-shadow:0 0 calc(var(--u)*16) #1fdc7a77,0 calc(var(--u)*5) calc(var(--u)*10) #0006;animation:wag 3s ease-in-out infinite alternate;transition:transform .2s,filter .2s}
@keyframes wag{to{box-shadow:0 0 calc(var(--u)*34) #2bff8aaa,0 calc(var(--u)*5) calc(var(--u)*10) #0006}}
.wa:hover{transform:translateY(-2px) scale(1.01);filter:brightness(1.1)}.wa:active{transform:scale(.97)}
.waicon{width:calc(var(--u)*44);height:calc(var(--u)*44)}.chev{width:calc(var(--u)*28);height:calc(var(--u)*28);animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(calc(var(--u)*10))}}
.copy{z-index:3;background:#7a0d1018;color:#7a0d10;border:calc(var(--u)*1.5) solid #7a0d1055;border-radius:999px;font:600 calc(var(--u)*19) Georgia,serif;cursor:pointer;transition:background .2s}
.copy:hover{background:#7a0d1030}
:focus-visible{outline:3px solid #fff;outline-offset:2px}
.toast{z-index:5;display:flex;justify-content:center;pointer-events:none!important;height:auto!important}
.toast span{background:#0b7a3c;color:#fff;font:600 calc(var(--u)*24) system-ui,sans-serif;padding:calc(var(--u)*12) calc(var(--u)*26);border-radius:999px;box-shadow:0 0 calc(var(--u)*24) #2bff8a88;opacity:0;transform:translateY(calc(var(--u)*14));transition:.4s var(--ease)}
.toast.show span{opacity:1;transform:none}
/* pause / reduce */
.paused *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.spark,.ring{opacity:.6}#sender{opacity:1}.cloud,.ray{display:none}}
/* interactive controls must stay clickable (declared after the blanket pointer-events:none) */
.stage>.field,.stage>.wa,.stage>.copy{pointer-events:auto}

/* ---- responsive sizes ---- */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:#12060a url(assets/poster.png) center/cover;filter:blur(28px) brightness(.35);transform:scale(1.1)}
/* mobile: full width (up to 599px) */
@media(max-width:599px){.stage{width:100vw;border-radius:0}}
/* tablet: 600-1023px, centred card */
@media(min-width:600px) and (max-width:1023px){.stage{width:min(88vw,760px);margin:20px 0;border-radius:22px;box-shadow:0 0 60px #ff8a0055}}
/* desktop: 1024px+, fits the screen height */
@media(min-width:1024px){.stage{width:min(720px,calc((100svh - 40px)*1024/1536));min-width:560px;margin:20px 0;border-radius:22px;box-shadow:0 0 80px #ff8a0055}}
/* landscape phones: keep full poster width, scroll vertically */
@media(max-height:500px) and (orientation:landscape){.stage{width:min(100vw,520px);margin:0}}

/* ---- ad block: same width as the card, hidden when unfilled ---- */
.adwrap{width:100%;max-width:760px;padding:4px 12px 28px;min-height:0}
@media(min-width:600px) and (max-width:1023px){.adwrap{width:min(88vw,760px);padding-inline:0}}
.adwrap ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
/* desktop redesign: bigger card, ad matches its width */
@media(min-width:1024px){.stage{width:clamp(560px,calc((100svh - 40px)*1024/1536),760px)}.adwrap{width:clamp(560px,calc((100svh - 40px)*1024/1536),760px);padding-inline:0}}
@media(max-width:599px){body{min-height:100svh;justify-content:flex-start}}

/* ---- WhatsApp number dialog ---- */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:#000a;backdrop-filter:blur(4px)}
.modal[hidden]{display:none}
.mcard{position:relative;width:min(100%,380px);background:linear-gradient(#fff3d6,#f6dfae);color:#4a0d10;border:2px solid #e8a33a;border-radius:20px;padding:24px 20px 16px;box-shadow:0 0 40px #ffb04caa;font-family:Georgia,serif;animation:up .3s var(--ease)}
.mcard h2{font-size:22px;margin-bottom:6px;color:#7a0d10}.mcard p{font-size:14px;line-height:1.4;margin-bottom:12px}
.mcard input{width:100%;padding:13px 16px;border-radius:999px;border:2px solid #d9b87a;background:#fff;font:16px system-ui,sans-serif;outline:0}
.mcard input:focus{border-color:#e8a33a;box-shadow:0 0 14px #ffb347aa}
.merr{color:#a3191f;font:600 13px system-ui;min-height:18px;margin:6px 4px 0}
.mrow{display:flex;gap:10px;margin-top:6px}.mrow button{flex:1;padding:13px;border-radius:999px;border:0;font:700 15px Georgia,serif;cursor:pointer}
.mgo{background:linear-gradient(#0fa650,#008540);color:#fff}.mskip{background:#fff;color:#7a0d10;border:2px solid #d9b87a!important;flex:.6!important}
.mcard small{display:block;text-align:center;margin-top:10px;font:12px system-ui;opacity:.75}
.mx{position:absolute;top:6px;right:10px;background:none;border:0;font-size:28px;line-height:1;color:#7a0d10;cursor:pointer}