:root{
  --bg:#07040f;
  --bg2:#1a0b2e;
  --gold:#ffd27a;
  --gold2:#f5a623;
  --rose:#ff5c9a;
  --violet:#9b6bff;
  --ink:#fff7ec;
  --muted:#c9b8d9;
  --glass:rgba(255,255,255,.06);
  --line:rgba(255,215,140,.28);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  background:radial-gradient(ellipse at 50% 30%,#2a1046 0%,var(--bg2) 35%,var(--bg) 75%);
  color:var(--ink);font-family:Poppins,system-ui,sans-serif;
  user-select:none;
}
canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#stars{z-index:0}
#fx{z-index:50}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%)}
.grain{position:fixed;inset:-50%;z-index:3;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
.hidden{display:none!important}

/* ---------- scenes ---------- */
.scene{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 16px;text-align:center;overflow-y:auto;overflow-x:hidden;
  opacity:0;visibility:hidden;transform:scale(1.08) translateZ(0);filter:blur(12px);
  transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.8,.2,1),filter 1s ease,visibility 0s 1.2s}
.scene{justify-content:flex-start}
.scene::before,.scene::after{content:"";margin:auto;flex:0 0 0px}/* centers but never clips tall content */
.scene.active{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:0s}
.scene.leaving{opacity:0;transform:scale(.9);filter:blur(10px);visibility:visible}

.scene-title{font-family:"Cinzel Decorative",serif;font-weight:900;font-size:clamp(26px,6vw,46px);
  background:linear-gradient(180deg,#fff3d1,var(--gold) 50%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(255,190,90,.35));margin-bottom:8px}
.scene-sub{color:var(--muted);font-size:clamp(14px,3.6vw,17px);max-width:520px;margin:0 auto 22px;line-height:1.6}

/* ---------- buttons ---------- */
.btn{font-family:Poppins,sans-serif;font-weight:600;font-size:16px;color:#2a1300;cursor:pointer;border:0;
  padding:14px 26px;border-radius:999px;margin-top:18px;
  background:linear-gradient(135deg,#fff0c4,var(--gold) 40%,var(--gold2));
  box-shadow:0 10px 30px rgba(245,166,35,.35),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .2s,box-shadow .2s;position:relative}
.btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 40px rgba(245,166,35,.5)}
.btn:active{transform:scale(.96)}
.btn.ghost{background:var(--glass);color:var(--ink);border:1px solid var(--line);box-shadow:none;backdrop-filter:blur(8px)}
.btn.glow{animation:pulse 2s infinite}
.btn.next{animation:rise .8s .4s both, pulse 2.4s 1.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,210,122,.55),0 10px 30px rgba(245,166,35,.35)}50%{box-shadow:0 0 0 14px rgba(255,210,122,0),0 10px 30px rgba(245,166,35,.35)}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---------- music / progress ---------- */
.music-btn{position:fixed;top:14px;right:14px;z-index:60;width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(20,10,35,.6);border:1px solid var(--line);backdrop-filter:blur(8px);display:grid;place-items:center}
.eq{display:flex;gap:3px;align-items:flex-end;height:18px}
.eq i{width:3px;background:var(--gold);border-radius:2px;animation:eq 1s infinite ease-in-out}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}.eq i:nth-child(4){animation-delay:.1s}
.music-btn.off .eq i{animation:none;height:3px}
@keyframes eq{0%,100%{height:4px}50%{height:18px}}
.progress{position:fixed;top:30px;left:50%;transform:translateX(-50%);z-index:60;display:flex;gap:6px}
.progress span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);transition:.4s}
.progress span.on{background:var(--gold);box-shadow:0 0 10px var(--gold);width:22px;border-radius:6px}

/* ---------- LOCK ---------- */
.lock-wrap{display:flex;flex-direction:column;align-items:center}
.file-3d{position:relative;width:220px;height:160px;perspective:800px;margin-bottom:34px;animation:float 4s ease-in-out infinite}
.file-back,.file-front{position:absolute;inset:0;border-radius:10px}
.file-back{background:linear-gradient(135deg,#a8752a,#6e4612);transform:translateZ(-1px)}
.file-back::before{content:"";position:absolute;top:-16px;left:0;width:90px;height:22px;background:#a8752a;border-radius:8px 8px 0 0}
.file-paper{position:absolute;left:14px;right:14px;top:-10px;height:120px;background:#fffaf0;border-radius:6px;
  display:grid;place-items:center;font-size:42px;transition:transform .8s;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.file-front{background:linear-gradient(135deg,#f0c062,#c8902f);transform-origin:bottom;transform:rotateX(-12deg);
  display:flex;flex-direction:column;justify-content:center;align-items:center;color:#3a2200;
  box-shadow:0 20px 40px rgba(0,0,0,.5);transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
.file-front h3{font-family:"Cinzel Decorative",serif;font-size:16px}
.file-front p{font-size:12px;margin-top:4px}
.stamp{position:absolute;top:10px;right:-8px;border:2px solid #c0182f;color:#c0182f;font-weight:800;font-size:11px;letter-spacing:2px;
  padding:3px 8px;transform:rotate(14deg);border-radius:4px;background:rgba(255,255,255,.3)}
.file-3d.open .file-front{transform:rotateX(-75deg)}
.file-3d.open .file-paper{transform:translateY(-60px) rotate(-4deg)}
.whisper{min-height:28px;font-size:clamp(15px,4vw,19px);color:var(--muted);max-width:420px}
.whisper::after{content:"|";animation:blink .8s infinite;color:var(--gold)}
@keyframes blink{50%{opacity:0}}
.hint{margin-top:14px;color:#8e7ca3;font-size:12px}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}

/* ---------- COUNTDOWN ---------- */
.count-num{font-family:"Cinzel Decorative",serif;font-weight:900;font-size:min(42vw,260px);line-height:1;
  background:linear-gradient(180deg,#fff,var(--gold) 60%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 40px rgba(255,200,100,.7))}
.count-num.tick{animation:tick 1s ease-out}
@keyframes tick{0%{transform:scale(2.4);opacity:0;filter:blur(20px)}30%{transform:scale(1);opacity:1;filter:blur(0) drop-shadow(0 0 40px rgba(255,200,100,.7))}100%{transform:scale(.6);opacity:0}}
.count-ring{position:absolute;width:min(70vw,420px);aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,210,122,.4);
  animation:ring 1s infinite ease-out}
@keyframes ring{from{transform:scale(.4);opacity:1}to{transform:scale(1.4);opacity:0}}

/* ---------- 3D TITLE ---------- */
.title3d{font-family:"Cinzel Decorative",serif;font-weight:900;font-size:clamp(26px,7.4vw,84px);max-width:100%;line-height:1.05;position:relative;
  color:#fff3d6;letter-spacing:1px;
  text-shadow:0 1px 0 #f2c56b,0 2px 0 #e3ae4f,0 3px 0 #d39a3c,0 4px 0 #c0852c,0 5px 0 #a86f20,0 6px 0 #8e5a17,
    0 8px 14px rgba(0,0,0,.6),0 0 40px rgba(255,190,90,.45);
  animation:titleIn 1.6s cubic-bezier(.2,.9,.2,1) both, sway 6s 1.6s ease-in-out infinite}
.title3d.small{font-size:clamp(24px,6.6vw,58px)}
.title3d::after{content:attr(data-text);position:absolute;inset:0;color:transparent;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;text-shadow:none;animation:shine 3.5s 1.5s infinite}
@keyframes shine{from{background-position:150% 0}to{background-position:-100% 0}}
@keyframes titleIn{from{opacity:0;transform:perspective(600px) rotateX(70deg) translateY(60px) scale(.6);letter-spacing:30px}to{opacity:1;transform:none}}
@keyframes sway{0%,100%{transform:perspective(600px) rotateY(-6deg)}50%{transform:perspective(600px) rotateY(6deg)}}

/* ---------- HERO ---------- */
.hero{display:flex;flex-direction:column;align-items:center;padding-top:20px}
.kicker{letter-spacing:5px;text-transform:uppercase;font-size:11px;color:var(--gold);margin-bottom:10px;animation:rise 1s both}
.frame-stage{perspective:1000px;margin:22px 0 4px;position:relative}
.frame{position:relative;width:min(62vw,260px);aspect-ratio:600/640;border-radius:18px;transform-style:preserve-3d;
  transition:transform .15s ease-out;animation:frameIn 1.6s .5s cubic-bezier(.2,.9,.2,1) both}
.frame img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block;
  border:4px solid transparent;
  background:linear-gradient(#000,#000) padding-box,linear-gradient(135deg,#fff3c9,var(--gold2),#fff3c9,#b07a22) border-box;
  box-shadow:0 30px 60px rgba(0,0,0,.6);transform:translateZ(20px)}
.frame-glow{position:absolute;inset:-18px;border-radius:30px;background:conic-gradient(from 0deg,var(--gold),var(--rose),var(--violet),var(--gold));
  filter:blur(26px);opacity:.55;animation:spin 6s linear infinite;transform:translateZ(-30px)}
.frame-shine{position:absolute;inset:4px;border-radius:12px;pointer-events:none;transform:translateZ(22px);
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);background-size:300% 100%;animation:shine 4s infinite}
.badge{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%) translateZ(50px);background:linear-gradient(135deg,var(--rose),var(--violet));
  padding:6px 16px;border-radius:999px;font-weight:600;font-size:13px;box-shadow:0 8px 20px rgba(255,92,154,.5);white-space:nowrap}
@keyframes spin{to{transform:translateZ(-30px) rotate(360deg)}}
@keyframes frameIn{from{opacity:0;transform:rotateY(-180deg) scale(.4)}to{opacity:1;transform:none}}
.orbit{position:absolute;inset:-40px;animation:orbit 12s linear infinite;pointer-events:none}
.orbit span{position:absolute;font-size:24px;animation:counter 12s linear infinite}
.orbit span:nth-child(1){top:0;left:50%}.orbit span:nth-child(2){top:50%;right:0}
.orbit span:nth-child(3){bottom:0;left:50%}.orbit span:nth-child(4){top:50%;left:0}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes counter{to{transform:rotate(-360deg)}}
.name-script{font-family:"Great Vibes",cursive;font-weight:400;font-size:clamp(54px,14vw,96px);line-height:1.1;margin-top:18px;
  background:linear-gradient(90deg,#ffd1e3,var(--rose),#ffd27a,var(--rose),#ffd1e3);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:rise 1.2s 1.2s both,flow 4s linear infinite;
  filter:drop-shadow(0 0 20px rgba(255,92,154,.5))}
@keyframes flow{to{background-position:200% 0}}
.sub{color:var(--muted);max-width:420px;animation:rise 1s 1.6s both;line-height:1.6}

/* ---------- CARD ---------- */
.card{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid var(--line);
  border-radius:22px;padding:24px 22px;max-width:480px;width:100%;backdrop-filter:blur(14px);
  box-shadow:0 30px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.15);margin-top:14px}
.card.pop{animation:popIn .9s cubic-bezier(.2,1.5,.4,1) both}
@keyframes popIn{from{opacity:0;transform:perspective(800px) rotateX(-60deg) translateY(60px) scale(.6)}to{opacity:1;transform:none}}
.card-emoji{font-size:40px;margin-bottom:8px}
.shayari{font-family:Kalam,cursive;font-size:clamp(17px,4.4vw,21px);line-height:1.75;color:#fff4e0}
.shayari b{color:var(--gold)}

/* ---------- GIFT ---------- */
.gift-stage{perspective:900px;height:240px;display:grid;place-items:center;margin-top:10px}
.gift{position:relative;width:140px;height:140px;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(35deg);
  cursor:pointer;animation:giftBob 2.5s ease-in-out infinite}
.gift.shake{animation:shake .5s ease-in-out 2}
@keyframes giftBob{0%,100%{transform:rotateX(-22deg) rotateY(35deg) translateY(0)}50%{transform:rotateX(-22deg) rotateY(55deg) translateY(-14px)}}
@keyframes shake{0%,100%{transform:rotateX(-22deg) rotateY(35deg)}25%{transform:rotateX(-22deg) rotateY(25deg) rotateZ(-8deg)}75%{transform:rotateX(-22deg) rotateY(45deg) rotateZ(8deg)}}
.box,.lid{position:absolute;transform-style:preserve-3d}
.box{inset:0}
.box div,.lid div{position:absolute;backface-visibility:visible}
.bf,.bb,.bl,.br{width:140px;height:140px;
  background:linear-gradient(90deg,transparent 42%,var(--gold) 42%,#fff0b8 50%,var(--gold) 58%,transparent 58%),linear-gradient(135deg,#ff4f8b,#c2185b)}
.bf{transform:translateZ(70px)}.bb{transform:rotateY(180deg) translateZ(70px)}
.bl{transform:rotateY(-90deg) translateZ(70px);filter:brightness(.8)}.br{transform:rotateY(90deg) translateZ(70px);filter:brightness(.8)}
.bbot{width:140px;height:140px;background:#8e1043;transform:rotateX(-90deg) translateZ(70px)}
.lid{width:156px;height:156px;left:-8px;top:-8px;transition:transform 1s cubic-bezier(.3,1.3,.5,1);z-index:2}
.lid-top{width:156px;height:156px;transform:rotateX(90deg) translateZ(8px);
  background:linear-gradient(90deg,transparent 42%,var(--gold) 42%,#fff0b8 50%,var(--gold) 58%,transparent 58%),
  linear-gradient(0deg,transparent 42%,var(--gold) 42%,#fff0b8 50%,var(--gold) 58%,transparent 58%),linear-gradient(135deg,#ff6fa1,#d81b60)}
.lid-f,.lid-b,.lid-l,.lid-r{width:156px;height:26px;top:-5px;background:linear-gradient(90deg,#e0306f,#b0124f)}
.lid-f{transform:translateZ(78px)}.lid-b{transform:rotateY(180deg) translateZ(78px)}
.lid-l{transform:rotateY(-90deg) translateZ(78px)}.lid-r{transform:rotateY(90deg) translateZ(78px)}
.bow{position:absolute;left:50%;top:0;transform:translate(-50%,-8px) rotateX(0deg) translateY(-14px);transform-style:preserve-3d}
.bow i{position:absolute;width:44px;height:30px;border:8px solid var(--gold);border-radius:50% 50% 50% 50%;top:-22px}
.bow i:first-child{left:-44px;transform:rotate(-20deg)}.bow i:last-child{left:0;transform:rotate(20deg)}
.gift.open .lid{transform:translateY(-220px) rotateX(-40deg) rotateZ(25deg) translateX(80px)}
.gift.open{animation:none}
.gift-light{position:absolute;left:50%;top:0;width:10px;height:10px;transform:translate(-50%,0) rotateY(-35deg) rotateX(22deg);
  border-radius:50%;opacity:0;transition:1s;box-shadow:0 0 80px 60px rgba(255,230,160,.9)}
.gift.open .gift-light{opacity:1}

/* ---------- QUIZ ---------- */
.quiz{display:flex;flex-direction:column;align-items:center;width:100%;max-width:520px}
.quiz-emoji{font-size:64px;animation:float 3s ease-in-out infinite}
.quiz-q{font-size:clamp(19px,5vw,26px);margin:6px 0 10px}
.quiz-btns{display:flex;gap:14px;justify-content:center;position:relative;min-height:80px;width:100%}
#yesBtn{transition:left .25s, top .25s, transform .2s}
#yesBtn.run{position:fixed;z-index:70}
.quiz-msg{color:var(--rose);min-height:22px;margin-top:6px;font-weight:600}

/* ---------- ENVELOPES ---------- */
.envs{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;max-width:980px}
.env{width:min(88vw,290px);height:220px;perspective:1000px;cursor:pointer;animation:rise .8s both}
.env:nth-child(2){animation-delay:.15s}.env:nth-child(3){animation-delay:.3s}
.env-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.3,1.3,.5,1)}
.env.open .env-inner{transform:rotateY(180deg)}
.env:not(.open):hover .env-inner{transform:rotateY(-12deg) rotateX(6deg)}
.env-front,.env-back{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.env-front{background:linear-gradient(160deg,#f9e3c0,#e6c08a);color:#5a3810;box-shadow:0 20px 40px rgba(0,0,0,.45);overflow:hidden}
.env-front::before{content:"";position:absolute;top:0;left:0;right:0;height:60%;
  background:linear-gradient(160deg,#f3d3a0,#d9ab68);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))}
.env-front small{position:absolute;bottom:18px;font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:11px}
.seal{position:relative;z-index:2;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 35%,#ff6b8a,#b3123c);color:#ffe;font-family:"Cinzel Decorative";font-weight:900;font-size:20px;
  box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 -3px 6px rgba(0,0,0,.3);margin-top:-30px}
.env-back{transform:rotateY(180deg);background:linear-gradient(160deg,#2b1446,#170a28);border:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.45)}
.env-back p{font-family:Kalam,cursive;font-size:15.5px;line-height:1.6;color:#fff2dd}
.env-back b{color:var(--gold)}

/* ---------- VAULT ---------- */
.vault{display:flex;flex-direction:column;align-items:center;max-width:460px;width:100%}
.vault-door{width:150px;height:150px;border-radius:50%;margin-bottom:20px;position:relative;
  background:radial-gradient(circle at 35% 30%,#6e6e7e,#2c2c38 70%);border:8px solid #4a4a58;
  box-shadow:0 0 0 6px #22222c,0 20px 50px rgba(0,0,0,.6),inset 0 0 30px rgba(0,0,0,.6);transition:transform 1.2s}
.vault-wheel{position:absolute;inset:30px;border-radius:50%;border:6px solid var(--gold);transition:transform 1.4s cubic-bezier(.5,0,.3,1)}
.vault-wheel i{position:absolute;left:50%;top:50%;width:100%;height:6px;background:var(--gold);transform:translate(-50%,-50%)}
.vault-wheel i:nth-child(2){transform:translate(-50%,-50%) rotate(60deg)}.vault-wheel i:nth-child(3){transform:translate(-50%,-50%) rotate(120deg)}
.vault-door.unlock .vault-wheel{transform:rotate(540deg)}
.vault-door.unlock{transform:perspective(600px) rotateY(-80deg);transform-origin:left;transition-delay:1.2s}
.vault-door.wrong{animation:shakeX .4s}
@keyframes shakeX{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
#passForm{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
#passIn{flex:1;min-width:180px;font:600 16px Poppins;padding:14px 18px;border-radius:999px;margin-top:18px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--ink);outline:none;text-align:center;letter-spacing:2px}
#passIn:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,210,122,.15)}
.pass-msg{min-height:26px;margin-top:14px;color:var(--rose);font-weight:600}

/* ---------- VIDEO ---------- */
.tv{position:relative;width:min(70vw,300px);aspect-ratio:9/16;max-height:58vh;border-radius:22px;overflow:hidden;
  border:3px solid var(--gold);box-shadow:0 0 0 8px rgba(255,210,122,.08),0 30px 80px rgba(0,0,0,.7),0 0 60px rgba(255,92,154,.3);
  animation:tvIn 1.2s cubic-bezier(.2,.9,.2,1) both}
.tv video{width:100%;height:100%;object-fit:cover;display:block}
.tv-flare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 60%);
  background-size:300% 100%;animation:shine 5s infinite}
@keyframes tvIn{from{opacity:0;transform:perspective(900px) rotateX(40deg) scale(.5)}to{opacity:1;transform:none}}
.caption{margin-top:14px;font-family:Kalam;font-size:18px;color:#ffe3ee}

/* ---------- CAKE ---------- */
.cake-stage{height:300px;display:flex;align-items:flex-end;justify-content:center;margin-top:10px}
.cake{position:relative;display:flex;flex-direction:column;align-items:center;animation:rise 1s both}
.tier{position:relative;border-radius:50% / 22px;background:linear-gradient(90deg,#3b1d0e,#6b3a1d 30%,#7d4524 50%,#5a2f16 75%,#2f160a)}
.tier::before{content:"";position:absolute;left:0;right:0;top:-1px;height:44px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#8a5230,#4a2511)}
.t2{width:170px;height:90px;z-index:2;margin-bottom:-22px}
.t1{width:250px;height:110px;z-index:1}
.drip{position:absolute;left:0;right:0;top:18px;height:26px;
  background:radial-gradient(circle at 10% 0,#fff8ec 12px,transparent 13px),radial-gradient(circle at 30% 0,#fff8ec 16px,transparent 17px),
  radial-gradient(circle at 52% 0,#fff8ec 11px,transparent 12px),radial-gradient(circle at 74% 0,#fff8ec 15px,transparent 16px),
  radial-gradient(circle at 92% 0,#fff8ec 12px,transparent 13px);opacity:.85}
.cake-name{position:absolute;left:0;right:0;top:46px;z-index:3;font-family:Kalam;font-weight:700;color:#fff8ec;letter-spacing:3px;font-size:18px}
.plate{width:300px;height:30px;border-radius:50%;background:radial-gradient(ellipse,#e8e8f0,#9a9aab);margin-top:-16px;box-shadow:0 20px 40px rgba(0,0,0,.6)}
.candles{display:flex;gap:18px;position:relative;z-index:4;margin-bottom:-14px}
.candle{width:12px;height:56px;border-radius:3px;cursor:pointer;position:relative;
  background:repeating-linear-gradient(45deg,#fff 0 6px,var(--rose) 6px 12px);box-shadow:inset -2px 0 3px rgba(0,0,0,.2)}
.candle::after{content:"";position:absolute;left:50%;top:-8px;width:2px;height:8px;background:#333;transform:translateX(-50%)}
.candle::before{content:"";position:absolute;inset:-30px -14px 0;}/* bigger tap target */
.flame{position:absolute;left:50%;top:-34px;width:16px;height:28px;transform:translateX(-50%);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 70%,#fff 0 15%,#ffe066 30%,#ff9a1f 60%,rgba(255,80,0,0) 75%);
  filter:drop-shadow(0 0 12px #ffb347) drop-shadow(0 0 24px rgba(255,150,40,.7));animation:flicker .15s infinite alternate;transition:opacity .3s}
@keyframes flicker{from{transform:translateX(-50%) scale(1) rotate(-2deg)}to{transform:translateX(-50%) scale(1.08,.94) rotate(2deg)}}
.candle.out .flame{opacity:0}
.candle.out::after{animation:smoke 1.5s ease-out}
@keyframes smoke{0%{box-shadow:0 0 0 0 rgba(200,200,200,.6)}100%{box-shadow:0 -60px 20px 6px rgba(200,200,200,0)}}

/* ---------- DIWALI ---------- */
#s-diwali{transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.8,.2,1),filter 1s ease,visibility 0s 1.2s,background 1.5s}
#s-diwali.glow{background:radial-gradient(ellipse at 50% 55%,rgba(255,150,40,.22),transparent 65%)}
.diwali-stage{position:relative;width:min(92vw,420px);height:230px;display:grid;place-items:center;margin-top:6px}
.rangoli{position:absolute;width:220px;height:220px;border-radius:50%;opacity:0;transform:scale(0) rotate(-180deg);
  transition:transform 1.6s cubic-bezier(.2,1.3,.4,1),opacity 1s;
  filter:drop-shadow(0 0 20px rgba(255,170,60,.5))}
.rangoli svg{width:100%;height:100%;display:block}
.rangoli.bloom{opacity:.9;transform:scale(1) rotate(0);animation:rangoliSpin 30s 1.6s linear infinite}
@keyframes rangoliSpin{to{transform:rotate(360deg)}}
.diyas{position:relative;z-index:2;display:flex;gap:clamp(12px,4vw,24px);align-items:flex-end;margin-top:120px}
.diya{position:relative;width:54px;height:24px;cursor:pointer;border-radius:4px 4px 50% 50% / 4px 4px 100% 100%;
  background:linear-gradient(180deg,#d9682b,#9c3d12 70%,#6e2808);box-shadow:inset 0 -4px 6px rgba(0,0,0,.35),0 8px 14px rgba(0,0,0,.5);
  animation:rise .8s both}
.diya:nth-child(2){animation-delay:.1s}.diya:nth-child(3){animation-delay:.2s}.diya:nth-child(4){animation-delay:.3s}.diya:nth-child(5){animation-delay:.4s}
.diya::before{content:"";position:absolute;left:3px;right:3px;top:-5px;height:10px;border-radius:50%;
  background:radial-gradient(ellipse,#f7c56a,#b8761e);border:2px solid #e07a35}
.diya::after{content:"";position:absolute;inset:-34px -10px -6px}/* bigger tap target */
.dflame{position:absolute;left:62%;top:-30px;width:14px;height:26px;transform:translateX(-50%) scale(0);transform-origin:bottom;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 70%,#fff 0 15%,#ffe066 30%,#ff9a1f 60%,rgba(255,80,0,0) 75%);
  filter:drop-shadow(0 0 10px #ffb347) drop-shadow(0 0 26px rgba(255,150,40,.8));transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.diya.lit .dflame{transform:translateX(-50%) scale(1);animation:dflick .18s .4s infinite alternate}
.diya.lit{box-shadow:inset 0 -4px 6px rgba(0,0,0,.35),0 8px 14px rgba(0,0,0,.5),0 -10px 40px rgba(255,170,60,.45)}
@keyframes dflick{from{transform:translateX(-50%) scale(1) rotate(-3deg)}to{transform:translateX(-50%) scale(1.06,.92) rotate(3deg)}}
.diwali-wish{margin-top:14px;font-family:"Great Vibes",cursive;font-size:clamp(28px,7vw,36px);color:var(--gold);
  text-shadow:0 0 18px rgba(255,180,60,.6)}

/* ---------- FINAL ---------- */
.final{display:flex;flex-direction:column;align-items:center;width:100%;padding:40px 0 30px}
.carousel-stage{perspective:1100px;height:290px;width:100%;display:grid;place-items:center;margin:26px 0 10px}
.carousel{position:relative;width:160px;height:220px;transform-style:preserve-3d;animation:carousel 20s linear infinite}
.carousel figure{position:absolute;inset:0;background:#fffdf7;padding:8px 8px 34px;border-radius:6px;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.carousel img{width:100%;height:100%;object-fit:cover;border-radius:3px;display:block}
.carousel figcaption{position:absolute;bottom:6px;left:0;right:0;color:#4a2b10;font-family:Kalam;font-size:13px;font-weight:700}
@keyframes carousel{to{transform:rotateY(-360deg)}}
.final-card{text-align:center}
.from{margin-top:14px;font-family:"Great Vibes";font-size:30px;color:var(--gold)}
.ps{margin-top:8px;font-size:13px;color:var(--muted)}
.final-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

@media (max-width:480px){
  .gift-stage{height:210px}
  .t1{width:220px}.plate{width:260px}.t2{width:150px}
  .carousel{width:130px;height:180px}
  .carousel-stage{height:240px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}