:root{
--bg:#150c1f;--bg2:#241634;--rose:#e8b4a0;--gold:#f5c76e;--pink:#f7a8b8;--cream:#f9f3ee;--glow:#ffe9c7;--lilac:#c79be0;
--serif:'Cormorant Garamond',Georgia,serif;--script:'Great Vibes',cursive;--sans:'Inter',system-ui,-apple-system,sans-serif;
--maxw:1080px;--radius:24px;--shadow:0 24px 60px rgba(0,0,0,.45);
--pad:clamp(16px,5vw,24px);
--glass:linear-gradient(160deg,rgba(255,233,199,.10),rgba(247,168,184,.045));
--glass-line:rgba(255,233,199,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
body{font-family:var(--sans);color:var(--cream);background:#120a1c;min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;position:relative}
/* animated dreamy background */
body::before{content:'';position:fixed;inset:0;z-index:-2;background:
radial-gradient(1100px 780px at 18% -8%,#3a2159 0%,transparent 58%),
radial-gradient(900px 700px at 88% 6%,#4a2149 0%,transparent 52%),
radial-gradient(1000px 900px at 50% 120%,#2a1440 0%,transparent 60%),
linear-gradient(165deg,#1a1025 0%,#150c1f 55%,#0e0817 100%);
background-size:200% 200%;animation:bgShift 22s ease-in-out infinite alternate}
/* subtle starfield */
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,233,199,.5),transparent),radial-gradient(1.5px 1.5px at 70% 20%,rgba(247,168,184,.45),transparent),radial-gradient(1px 1px at 40% 70%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 85% 65%,rgba(245,199,110,.5),transparent),radial-gradient(1px 1px at 55% 45%,rgba(255,255,255,.35),transparent);background-repeat:repeat;background-size:600px 600px;opacity:.6;animation:twinkleStar 6s ease-in-out infinite alternate}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:rgba(245,199,110,.35);color:#fff}

/* canvases + decor */
#particles,#confetti-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#particles{z-index:1}#confetti-canvas{z-index:60}
.decor{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.aurora{position:absolute;inset:-25% -15% auto -15%;height:75vh;background:radial-gradient(60% 60% at 30% 30%,rgba(247,168,184,.20),transparent 70%),radial-gradient(50% 50% at 75% 20%,rgba(245,199,110,.16),transparent 70%),radial-gradient(45% 45% at 55% 60%,rgba(199,155,224,.14),transparent 70%);filter:blur(34px);animation:auroraShift 16s ease-in-out infinite alternate}
.balloons{position:absolute;inset:0}
.balloon{position:absolute;bottom:-150px;width:44px;height:56px;border-radius:50% 50% 48% 48%;opacity:.8;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));animation:floatUp linear infinite}
.balloon::after{content:'';position:absolute;left:50%;bottom:-42px;width:1px;height:42px;background:rgba(255,233,199,.45);transform:translateX(-50%)}
.balloon::before{content:'';position:absolute;left:26%;top:16%;width:11px;height:15px;border-radius:50%;background:rgba(255,255,255,.4);filter:blur(1px)}

/* GATE */
.gate{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:radial-gradient(900px 700px at 50% 40%,rgba(58,30,63,.92),rgba(15,8,23,.99));backdrop-filter:blur(6px);transition:opacity .8s ease,visibility .8s}
.gate.hidden{opacity:0;visibility:hidden}
.gate__inner{text-align:center;max-width:520px;animation:fadeIn 1s ease both}
.gate__sparkle{color:var(--gold);letter-spacing:.5em;font-size:clamp(16px,4vw,22px);animation:twinkle 2.4s ease-in-out infinite}
.gate__name{font-family:var(--script);font-size:clamp(58px,17vw,124px);font-weight:400;line-height:1;margin:12px 0 6px;background:linear-gradient(120deg,var(--gold),var(--pink),var(--lilac),var(--gold));background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite;filter:drop-shadow(0 8px 34px rgba(247,168,184,.35))}
.gate__sub{color:rgba(249,243,238,.78);font-size:clamp(14px,3.6vw,16px);margin-bottom:clamp(22px,6vw,32px)}
.gate__btn{display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border:none;border-radius:999px;background:linear-gradient(120deg,var(--gold),var(--rose));color:#2a1420;font-weight:600;font-size:clamp(15px,4vw,17px);cursor:pointer;box-shadow:0 14px 40px rgba(245,199,110,.4);transition:transform .25s ease,box-shadow .25s ease;animation:pulseBtn 2.6s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.gate__btn:active{transform:scale(.97)}
.gate__btn:hover{transform:translateY(-3px) scale(1.03)}
.gate__btn-icon{font-size:20px}
.gate__hint{margin-top:16px;font-size:clamp(12px,3.2vw,13px);color:rgba(249,243,238,.5)}

/* MUSIC CONTROL */
.music-controls{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:calc(env(safe-area-inset-right,0px) + 14px);z-index:70;display:flex;align-items:center;padding:6px;border-radius:999px;background:rgba(36,22,52,.55);border:1px solid var(--glass-line);backdrop-filter:blur(10px);opacity:0;transform:translateY(-8px);transition:opacity .5s ease,transform .5s ease}
.music-controls.is-visible{opacity:1;transform:none}
.music-toggle{width:44px;height:44px;border-radius:50%;border:none;background:linear-gradient(120deg,var(--gold),var(--rose));display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.music-toggle__bars{display:flex;align-items:flex-end;gap:3px;height:18px}
.music-toggle__bars i{width:3px;height:100%;background:#2a1420;border-radius:2px;transform-origin:bottom;animation:sound .9s ease-in-out infinite}
.music-toggle__bars i:nth-child(2){animation-delay:.15s}.music-toggle__bars i:nth-child(3){animation-delay:.3s}.music-toggle__bars i:nth-child(4){animation-delay:.45s}
.music-toggle.paused .music-toggle__bars i{animation-play-state:paused;height:40%}

/* CONTENT + SECTIONS */
.content{position:relative;z-index:10}
section{padding:clamp(56px,11vw,120px) var(--pad);max-width:var(--maxw);margin:0 auto}
.section-head{text-align:center;margin-bottom:clamp(32px,7vw,48px)}
.section-kicker{display:inline-block;font-size:clamp(11px,3vw,13px);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.section-title{font-family:var(--serif);font-weight:600;font-size:clamp(28px,7vw,52px);line-height:1.14;background:linear-gradient(120deg,var(--cream),var(--rose),var(--gold),var(--cream));background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 8s linear infinite;overflow-wrap:break-word}
.section-desc{max-width:560px;margin:14px auto 0;color:rgba(249,243,238,.72);font-size:clamp(14px,3.6vw,16px)}

/* HERO */
.hero{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;position:relative;max-width:none;padding:calc(env(safe-area-inset-top,0px) + 84px) var(--pad) 40px}
.hero__glow{position:absolute;top:14%;left:50%;width:min(720px,92vw);height:min(460px,60vh);transform:translateX(-50%);background:radial-gradient(closest-side,rgba(245,199,110,.30),transparent 70%);filter:blur(24px);animation:glowPulse 6s ease-in-out infinite}
.hero__inner{position:relative;z-index:2;max-width:840px;width:100%}
.hero__eyebrow{font-size:clamp(13px,3.6vw,18px);color:rgba(249,243,238,.8);margin-bottom:12px}
.hero__title{font-family:var(--serif);font-weight:600;font-size:clamp(34px,9.5vw,86px);line-height:1.08;margin:6px auto 8px;max-width:16ch;overflow-wrap:break-word}
.hero__title .word{display:inline-block;margin-right:.26em}
.hero__title .letter{display:inline-block;background:linear-gradient(120deg,var(--gold),var(--pink),var(--lilac));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateY(40px) rotate(6deg);animation:letterIn .7s cubic-bezier(.2,.8,.2,1) forwards;filter:drop-shadow(0 6px 22px rgba(247,168,184,.25))}
.hero__script{font-family:var(--script);font-size:clamp(26px,7vw,46px);color:var(--pink);margin:4px 0 26px;opacity:0;animation:fadeInUp 1s ease .9s forwards}
.hero__scroll{display:inline-flex;flex-direction:column;align-items:center;gap:6px;margin-top:26px;font-size:clamp(10px,2.6vw,12px);letter-spacing:.2em;text-transform:uppercase;color:rgba(249,243,238,.6);text-decoration:none;opacity:0;animation:fadeIn 1s ease 1.6s forwards}
.hero__arrow{font-size:20px;animation:bounce 1.8s ease-in-out infinite}

/* 3D CAKE */
.hero__cake{display:grid;place-items:center;margin:20px auto 0;perspective:700px}
.cake{position:relative;width:clamp(120px,34vw,160px);height:clamp(104px,30vw,138px);transform-style:preserve-3d;animation:cakeSpin 9s ease-in-out infinite alternate;filter:drop-shadow(0 20px 30px rgba(0,0,0,.4))}
.cake__plate{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:114%;height:15%;border-radius:50%;background:linear-gradient(180deg,#f9f3ee,#cbb8c9)}
.cake__mid{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);width:88%;height:42%;border-radius:14px;background:linear-gradient(180deg,#f7a8b8,#e8778f);box-shadow:inset 0 -8px 14px rgba(0,0,0,.15)}
.cake__top{position:absolute;bottom:48%;left:50%;transform:translateX(-50%);width:68%;height:34%;border-radius:12px;background:linear-gradient(180deg,#ffd9e2,#f7a8b8)}
.cake__top::before{content:'';position:absolute;top:-7px;left:0;right:0;height:15px;background:radial-gradient(circle at 10px 8px,#fff 6px,transparent 7px) repeat-x;background-size:22px 15px;opacity:.85}
.cake__candle{position:absolute;bottom:80%;left:50%;transform:translateX(-50%);width:6%;height:20%;border-radius:3px;background:linear-gradient(180deg,#fff6e6,#f5c76e)}
.cake__flame{position:absolute;bottom:98%;left:50%;transform:translateX(-50%);width:14px;height:20px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff6c2,#f5c76e 45%,#f7a8b8 90%);box-shadow:0 0 26px 7px rgba(245,199,110,.7);animation:flicker .35s ease-in-out infinite alternate}

/* COUNTDOWN */
.countdown__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2.5vw,20px);max-width:560px;margin:0 auto}
.cd-box{padding:clamp(14px,4vw,22px) clamp(6px,2vw,14px);border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);text-align:center;backdrop-filter:blur(8px);position:relative;overflow:hidden}
.cd-box::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.12),transparent 40%);pointer-events:none}
.cd-num{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(28px,8vw,52px);color:var(--gold);line-height:1;text-shadow:0 6px 20px rgba(245,199,110,.3)}
.cd-label{display:block;margin-top:7px;font-size:clamp(9px,2.6vw,12px);letter-spacing:.14em;text-transform:uppercase;color:rgba(249,243,238,.6)}
.countdown__celebrate{text-align:center;margin-top:30px}
.celebrate__text{font-family:var(--serif);font-size:clamp(22px,6vw,38px);color:var(--pink);margin-bottom:18px}

/* GALLERY */
.gallery__stage{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,14px)}
.gallery__frame{position:relative;width:min(760px,100%);aspect-ratio:4/5;max-height:78vh;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow),0 0 0 1px var(--glass-line);background:linear-gradient(160deg,#2a1840,#1c1030)}
@media(min-width:700px){.gallery__frame{aspect-ratio:16/10}}
.gallery__frame::after{content:'';position:absolute;inset:0;border-radius:var(--radius);box-shadow:inset 0 0 60px rgba(0,0,0,.35);pointer-events:none;z-index:3}
.gallery__img{position:absolute;inset:0;opacity:0;transform:scale(1.1);transition:opacity 1.1s ease}
.gallery__img.is-active{opacity:1;animation:kenburns 8s ease-out both}
.gallery__caption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 20px 18px;font-family:var(--serif);font-size:clamp(15px,4vw,19px);color:var(--cream);background:linear-gradient(0deg,rgba(15,8,23,.85),transparent)}
.gallery__empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:28px;background:linear-gradient(135deg,rgba(247,168,184,.10),rgba(245,199,110,.06),rgba(199,155,224,.08));background-size:200% 200%;animation:bgShift 8s ease-in-out infinite alternate}
.gallery__empty-icon{font-size:clamp(40px,12vw,60px);filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));animation:floatY 3.5s ease-in-out infinite}
.gallery__empty-title{font-family:var(--serif);font-size:clamp(20px,5.5vw,26px);color:var(--cream)}
.gallery__empty-sub{font-size:clamp(13px,3.6vw,15px);color:rgba(249,243,238,.6);max-width:320px}
.gallery__nav{flex:0 0 auto;width:clamp(40px,11vw,48px);height:clamp(40px,11vw,48px);border-radius:50%;border:1px solid var(--glass-line);background:rgba(36,22,52,.6);color:var(--cream);font-size:22px;cursor:pointer;transition:background .2s,transform .2s;backdrop-filter:blur(6px);-webkit-tap-highlight-color:transparent;z-index:4}
.gallery__nav:active{transform:scale(.92)}
.gallery__nav:hover{background:rgba(245,199,110,.25)}
.gallery__dots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.gallery__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,233,199,.3);cursor:pointer;transition:transform .2s,background .2s}
.gallery__dot.is-active{background:var(--gold);transform:scale(1.4)}

/* MESSAGE */
.message__card{max-width:720px;margin:0 auto;text-align:center;padding:clamp(28px,7vw,56px);border-radius:var(--radius);background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);position:relative;overflow:hidden;backdrop-filter:blur(8px)}
.message__card::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.10),transparent 45%);pointer-events:none}
.message__title{font-family:var(--serif);font-size:clamp(24px,6vw,42px);margin:12px 0 22px;color:var(--cream)}
.message__body{font-size:clamp(15px,4vw,20px);line-height:1.9;color:rgba(249,243,238,.92);white-space:pre-wrap;min-height:2em}
.message__body::after{content:'|';color:var(--gold);animation:caret 1s step-end infinite}
.message__body.done::after{content:''}
.message__sign{font-family:var(--script);font-size:clamp(28px,7vw,44px);color:var(--pink);margin-top:24px}

/* WISHES */
.wish-form{max-width:600px;margin:0 auto clamp(32px,7vw,44px);display:flex;flex-direction:column;gap:14px}
.wish-form__row{position:relative}
.wish-form input,.wish-form textarea{width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--glass-line);background:rgba(36,22,52,.5);color:var(--cream);font-family:inherit;font-size:16px;resize:vertical;-webkit-appearance:none}
.wish-form input:focus,.wish-form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,199,110,.18)}
.wish-form__count{position:absolute;right:12px;bottom:10px;font-size:12px;color:rgba(249,243,238,.45)}
.wish-form__msg{text-align:center;font-size:14px;min-height:20px}
.wish-form__msg.ok{color:var(--gold)}.wish-form__msg.err{color:#ff9db0}
.wishes__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:16px}
.wishes__empty{grid-column:1/-1;text-align:center;color:rgba(249,243,238,.55);font-family:var(--serif);font-size:clamp(18px,5vw,22px)}
.wish-card{padding:20px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 10px 30px rgba(0,0,0,.25);animation:cardIn .6s ease both;backdrop-filter:blur(6px)}
.wish-card__text{font-size:15px;line-height:1.7;color:rgba(249,243,238,.92);margin-bottom:16px;overflow-wrap:break-word}
.wish-card__meta{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(249,243,238,.6)}
.wish-card__avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:600;color:#2a1420;background:linear-gradient(120deg,var(--gold),var(--pink));flex:0 0 auto}

/* BUTTONS */
.btn-primary{align-self:center;position:relative;overflow:hidden;padding:15px 34px;border:none;border-radius:999px;background:linear-gradient(120deg,var(--gold),var(--rose));color:#2a1420;font-weight:600;font-size:16px;cursor:pointer;box-shadow:0 12px 34px rgba(245,199,110,.35);transition:transform .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.btn-primary::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sheen 3.4s ease-in-out infinite}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-ghost{padding:12px 22px;border-radius:999px;border:1px solid rgba(255,233,199,.3);background:rgba(255,233,199,.04);color:var(--cream);font-family:inherit;font-size:14px;cursor:pointer;transition:background .2s,transform .2s;-webkit-tap-highlight-color:transparent}
.btn-ghost:hover{background:rgba(245,199,110,.16)}
.btn-ghost:active{transform:scale(.97)}

/* FOOTER */
.footer{text-align:center;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 70px)}
.footer__inner{max-width:520px;margin:0 auto}
.footer__heart{font-size:34px;animation:heartbeat 1.6s ease-in-out infinite}
.footer__text{font-family:var(--serif);font-size:clamp(18px,4.6vw,24px);margin:12px 0 22px;color:var(--cream)}
.share-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.footer__credit{margin-top:26px;font-size:12px;letter-spacing:.1em;color:rgba(249,243,238,.4)}