/* ---- Card (shared by gallery, wizard preview and the public page) ---- */
.card-stage{width:100%;display:flex;justify-content:center}
.card{position:relative;container-type:inline-size;width:100%;max-width:420px;aspect-ratio:9/16;overflow:hidden;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.28);isolation:isolate;background:#111}
.bg-layer,.frame{position:absolute;inset:0}
.bg-layer{overflow:hidden;z-index:0}
.bg-video{width:100%;height:100%;object-fit:cover}
.frame{z-index:1;margin:3.2cqw;inset:0;border:1.5px solid currentColor;border-radius:12px;pointer-events:none;opacity:.55}
.card.bg-gold{background:radial-gradient(120% 90% at 50% 0%,#14614a 0%,#0b3b2e 55%,#06231b 100%);color:#e8c766}
.card.bg-rose{background:linear-gradient(165deg,#fff0f3 0%,#ffd9e2 55%,#f8bccb 100%);color:#b4486a}
.card.bg-night{background:linear-gradient(180deg,#0b1030 0%,#1a1f52 60%,#2b2560 100%);color:#e9c46a}
.card.bg-gold::before,.card.bg-night::before{content:"";position:absolute;inset:0;z-index:0;background:conic-gradient(from 0deg at 50% 38%,transparent 0 10%,rgba(255,236,170,.08) 12% 14%,transparent 16% 30%,rgba(255,236,170,.07) 32% 34%,transparent 36% 60%,rgba(255,236,170,.08) 62% 64%,transparent 66%);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fx{position:absolute;top:-8%;display:block;animation:fall linear infinite;will-change:transform}
.fx-gold{width:calc(1.4cqw*var(--s));height:calc(1.4cqw*var(--s));background:#ffe9a6;border-radius:50%;box-shadow:0 0 6px 2px rgba(255,226,140,.6)}
.fx-rose{width:calc(3cqw*var(--s));height:calc(4cqw*var(--s));background:radial-gradient(circle at 30% 30%,#ff9db7,#d94f78);border-radius:60% 0 60% 0}
.fx-night{width:calc(1cqw*var(--s));height:calc(1cqw*var(--s));background:#fff;border-radius:50%;top:auto;animation:twinkle ease-in-out infinite}
.fx-night:nth-child(3n){top:12%}.fx-night:nth-child(3n+1){top:42%}.fx-night:nth-child(3n+2){top:75%}
@keyframes fall{0%{transform:translate3d(0,-10%,0) rotate(0)}100%{transform:translate3d(8cqw,115cqh,0) rotate(540deg)}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.5)}}
.ct{position:absolute;z-index:2;transform:translate(-50%,-50%);line-height:1.35;opacity:0;animation-fill-mode:both;animation-duration:1.1s;animation-timing-function:cubic-bezier(.2,.7,.2,1);overflow-wrap:anywhere;text-shadow:0 1px 8px rgba(0,0,0,.15)}
.anim-rise{animation-name:rise}.anim-fade{animation-name:fadein;animation-duration:1.6s}.anim-pop{animation-name:pop}
@keyframes rise{from{opacity:0;transform:translate(-50%,calc(-50% + 14px))}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.font-script{font-family:'Great Vibes','Cormorant Garamond',cursive;font-weight:400;line-height:1.1}
.font-display{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;letter-spacing:.02em}
.font-body{font-family:'Jost','Segoe UI',sans-serif;font-weight:500;letter-spacing:.02em}
.font-urdu{font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaliq',serif;line-height:2}
.ct[dir=rtl]{font-family:'Noto Nastaliq Urdu',serif;line-height:1.9}
.paused .card *,.paused .card::before{animation-play-state:paused}

/* ---- Public card page ---- */
body.view{margin:0;background:#0c0c10;min-height:100svh;display:flex;align-items:center;justify-content:center}
body.view #wrap{position:relative;width:100%;max-width:420px;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
body.view .card{border-radius:0;max-width:none;height:100svh;aspect-ratio:auto}
@media(min-width:500px){body.view .card{border-radius:18px;height:auto;aspect-ratio:9/16;max-height:96svh;margin:2svh auto}}
.cover{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border:0;cursor:pointer;color:#f6e7b0;background:radial-gradient(120% 90% at 50% 20%,#14614a,#06231b);font-family:'Cormorant Garamond',serif;transition:opacity .7s,visibility .7s}
.cover .env{font-size:64px;animation:bob 2.2s ease-in-out infinite}.cover b{font-size:30px;padding:0 24px;text-align:center}.cover small{font:500 14px 'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.cover.gone{opacity:0;visibility:hidden}
@keyframes bob{50%{transform:translateY(-8px)}}
.mute{position:fixed;right:14px;top:14px;z-index:10;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.4);color:#fff;font-size:18px;cursor:pointer}
.mute.off{opacity:.5;text-decoration:line-through}
body.gone{font-family:system-ui,sans-serif;display:flex;min-height:100vh;align-items:center;justify-content:center;text-align:center;margin:0;background:#faf6ef;color:#2a2320}
body.gone main{padding:24px;max-width:420px}
/* wizard live preview: show text instantly instead of replaying the entrance on every keystroke */
.static-prev .ct{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .ct{animation:none;opacity:1}.fx{display:none}.card::before{animation:none}.cover .env{animation:none}
}
.card{box-shadow:0 18px 50px rgba(14,40,32,.3)}
.cover .env{font-size:64px;line-height:1}.mute{display:grid;place-items:center;font-size:20px}