/* ==========================================================================
   BADSHAH LOVE - Jelly Pastel romantic UI
   ========================================================================== */
:root{
  --pink:#ffc2d8;--rose:#ff5b8a;--rose-d:#d6336c;--ink:#5a2d4a;--ink2:#8b5c7d;
  --lav:#cdb8ff;--peach:#ffd3bf;--cream:#fff6ef;--gold:#ffd36e;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Quicksand',system-ui,sans-serif;color:var(--ink);min-height:100vh;overflow-x:hidden;line-height:1.5;
  background:
    radial-gradient(circle at 12% 8%,rgba(255,214,230,.9) 0,transparent 45%),
    radial-gradient(circle at 90% 20%,rgba(222,206,255,.8) 0,transparent 48%),
    radial-gradient(circle at 50% 90%,rgba(255,226,208,.9) 0,transparent 50%),
    linear-gradient(160deg,#fff3ea 0%,#ffe3ee 40%,#f3e6ff 100%);
  background-attachment:fixed;
}
body.intro-lock{overflow:hidden;height:100vh;height:100dvh}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
svg{display:block}
:focus-visible{outline:3px solid rgba(255,91,138,.65);outline-offset:3px;border-radius:14px}
::selection{background:#ffb3cc;color:#3b1630}
.script{font-family:'Great Vibes','Dancing Script',cursive;font-weight:400}
.center{text-align:center;margin-top:26px}
.noscript{position:fixed;inset:auto 0 20px;text-align:center;z-index:500;font-weight:700}

/* ---------- glass + jelly ---------- */
.glass{
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.46));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1.5px solid rgba(255,255,255,.88);border-radius:34px;
  box-shadow:0 18px 40px rgba(255,120,170,.22),inset 0 2px 6px rgba(255,255,255,.9),inset 0 -6px 14px rgba(255,170,205,.22);
}
.jelly-btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;border-radius:999px;font:700 1rem 'Quicksand',sans-serif;color:#fff;text-shadow:0 1px 2px rgba(150,20,70,.4);
  background:linear-gradient(180deg,#ff9ec0 0%,#ff5b8a 55%,#e8346b 100%);
  box-shadow:0 10px 22px rgba(232,52,107,.38),inset 0 4px 6px rgba(255,255,255,.55),inset 0 -6px 10px rgba(160,20,70,.28);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,filter .25s;
}
.jelly-btn::before{content:"";position:absolute;top:5px;left:14px;right:14px;height:36%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));pointer-events:none}
.jelly-btn:hover{transform:scale(1.06,.96);filter:saturate(1.1)}
.jelly-btn:active{transform:scale(.94,1.06)}
.jelly-btn.small{padding:11px 20px;font-size:.92rem}
.jelly-btn.alt,.jelly-btn.lav{background:linear-gradient(180deg,#e0d2ff 0%,#a98cf7 55%,#8466e0 100%);box-shadow:0 10px 22px rgba(132,102,224,.38),inset 0 4px 6px rgba(255,255,255,.55),inset 0 -6px 10px rgba(70,40,150,.25)}
.jelly-btn.peach{background:linear-gradient(180deg,#ffd9c4 0%,#ff9d72 55%,#f0733f 100%);box-shadow:0 10px 22px rgba(240,115,63,.35),inset 0 4px 6px rgba(255,255,255,.55),inset 0 -6px 10px rgba(150,60,10,.25)}
.jelly-btn.ghost{color:var(--rose-d);text-shadow:none;background:linear-gradient(180deg,#fff,#ffe9f1);box-shadow:0 8px 18px rgba(255,120,170,.25),inset 0 3px 5px #fff,inset 0 -5px 9px rgba(255,170,205,.3)}
.mini-btn{padding:9px 14px;border-radius:999px;font-weight:700;font-size:.9rem;color:var(--rose-d);background:linear-gradient(180deg,#fff,#ffe9f1);box-shadow:0 5px 12px rgba(255,120,170,.25),inset 0 2px 4px #fff;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.mini-btn:hover{transform:scale(1.07)}.mini-btn:active{transform:scale(.93)}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
/* pause CSS animations that are off-screen */
.sec:not(.vis) *,.sec:not(.vis) *::before,.sec:not(.vis) *::after{animation-play-state:paused!important}

/* ---------- ambient animated flowers + hearts ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.amb{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);opacity:var(--o);animation:ambFloat var(--t) ease-in-out infinite;animation-delay:var(--d);--r0:var(--r);filter:drop-shadow(0 4px 8px rgba(255,100,150,.25))}
.bokeh{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7),rgba(255,194,216,.25) 60%,transparent 70%);animation:ambFloat var(--t) ease-in-out infinite;animation-delay:var(--d);--r0:0deg;--dx:10px}
@keyframes ambFloat{0%,100%{transform:translate3d(0,0,0) rotate(var(--r0)) scale(1)}50%{transform:translate3d(var(--dx,14px),-26px,0) rotate(calc(var(--r0) * -1)) scale(1.12)}}
@keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.18)}28%{transform:scale(1)}42%{transform:scale(1.12)}70%{transform:scale(1)}}

/* ==========================================================================
   WEDDING CURTAINS (CSS 3D)
   ========================================================================== */
.curtain{position:fixed;inset:0;z-index:100;perspective:1600px;overflow:hidden;cursor:pointer;
  background:radial-gradient(ellipse at 50% 45%,#fff6dd 0,#ffdce8 38%,#ffb3cc 100%);
  transition:background-color .9s ease,opacity .9s ease .1s,visibility 0s 1s;touch-action:manipulation}
.curtain.open{background:transparent;pointer-events:none}
.curtain.gone{opacity:0;visibility:hidden}
.stage-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.95),transparent 55%);animation:glowPulse 3.2s ease-in-out infinite;transition:opacity .8s}
.curtain.open .stage-glow{opacity:0}
@keyframes glowPulse{0%,100%{opacity:.7}50%{opacity:1}}
.c-panel{
  position:absolute;top:0;bottom:0;width:50.6%;backface-visibility:hidden;will-change:transform;
  transition:transform 2.2s cubic-bezier(.66,0,.24,1);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23ffd36e' stroke-width='1.3' opacity='.8'%3E%3Cpath d='M48 8l14 22-14 22-14-22z'/%3E%3Ccircle cx='48' cy='30' r='5'/%3E%3Cpath d='M0 48q24-12 48 0t48 0'/%3E%3Cpath d='M48 54c-10 8-10 20 0 28 10-8 10-20 0-28z'/%3E%3Ccircle cx='48' cy='68' r='2.4'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg,rgba(90,0,40,.32) 0 2%,rgba(255,255,255,0) 2% 4%,rgba(255,205,225,.26) 4% 6%,rgba(90,0,40,.12) 6% 8%),
    linear-gradient(180deg,#ff7aa5 0%,#ee4b7b 55%,#b8244f 100%);
  background-size:96px 96px,100% 100%,100% 100%;
  box-shadow:inset 0 0 80px rgba(80,0,40,.35),0 0 60px rgba(80,0,40,.35);
}
.c-left{left:0;transform-origin:0 50%}
.c-right{right:0;transform-origin:100% 50%}
.curtain.open .c-left{transform:rotateY(82deg)}
.curtain.open .c-right{transform:rotateY(-82deg)}
.c-gold{position:absolute;top:0;bottom:0;width:14px;background:linear-gradient(90deg,#ffe9a8,#ffc94d,#c98a00);box-shadow:0 0 14px rgba(255,200,80,.7)}
.c-left .c-gold{right:0}.c-right .c-gold{left:0}
.c-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42px;background:linear-gradient(180deg,rgba(255,211,110,0),rgba(255,211,110,.9) 40%,#c98a00);}
.c-tassel{position:absolute;bottom:16%;width:30px;height:110px;z-index:3}
.c-left .c-tassel{right:20px}.c-right .c-tassel{left:20px}
.c-tassel::before{content:"";position:absolute;left:50%;top:0;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#ffc94d 60%,#b8860b);box-shadow:0 3px 8px rgba(0,0,0,.3)}
.c-tassel::after{content:"";position:absolute;left:50%;top:22px;width:22px;height:80px;margin-left:-11px;border-radius:4px 4px 12px 12px;background:repeating-linear-gradient(90deg,#ffd36e 0 3px,#c98a00 3px 5px);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.valance{position:absolute;top:0;left:0;right:0;height:clamp(64px,12vh,108px);z-index:5;pointer-events:none;
  background:linear-gradient(180deg,#c92c5c,#ee4b7b 70%,#ff6f9c);box-shadow:0 8px 24px rgba(80,0,40,.4)}
.valance::before{content:"";position:absolute;left:0;right:0;bottom:-4px;height:10px;background:linear-gradient(90deg,#c98a00,#ffe9a8,#c98a00,#ffe9a8,#c98a00);}
.valance::after{content:"";position:absolute;left:0;right:0;top:100%;height:26px;margin-top:2px;background:radial-gradient(circle at 25px 0,#ee4b7b 24px,transparent 25px) repeat-x;background-size:50px 26px;filter:drop-shadow(0 6px 4px rgba(80,0,40,.25))}
.garland{position:absolute;inset:0;overflow:visible}
.garland .g{position:absolute;width:clamp(26px,5vw,44px);height:clamp(26px,5vw,44px);transform:translate(-50%,-50%);filter:drop-shadow(0 3px 4px rgba(80,0,40,.35));animation:sway 4s ease-in-out infinite;animation-delay:var(--d)}
.garland .gl{position:absolute;width:clamp(16px,3vw,26px);height:clamp(10px,2vw,16px);transform:translate(-50%,-50%) rotate(var(--r))}
@keyframes sway{0%,100%{rotate:-4deg}50%{rotate:4deg}}
.lights{position:absolute;left:0;right:0;bottom:-18px;height:20px}
.lights i{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff6c4;box-shadow:0 0 10px 3px rgba(255,235,150,.9);animation:twinkle 1.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.curtain-heart{position:absolute;left:50%;top:52%;width:clamp(52px,9vw,84px);transform:translate(-50%,-50%);z-index:6;animation:beat 1.6s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(255,255,255,.9));transition:opacity .4s}
.curtain.open .curtain-heart{opacity:0}

/* ==========================================================================
   NAME CARD
   ========================================================================== */
.name-stage{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;
  background:radial-gradient(circle at 50% 40%,rgba(255,244,248,.6),rgba(255,194,216,.45));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:opacity .8s ease,visibility 0s .8s}
.name-stage.show{opacity:1;visibility:visible;transition:opacity .8s ease}
.name-card{position:relative;width:min(92vw,400px);padding:34px 26px 28px;text-align:center;animation:cardFloat 5s ease-in-out infinite;transition:transform .8s cubic-bezier(.6,0,.4,1),opacity .8s}
.name-stage.leaving .name-card{transform:scale(.7) translateY(-30px);opacity:0}
@keyframes cardFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.nc-heart{width:54px;margin:-62px auto 8px;animation:beat 1.6s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(255,46,99,.45))}
.name-card h1{font-size:clamp(2.4rem,9vw,3.2rem);color:var(--rose-d);line-height:1.1}
.nc-sub{font-size:.95rem;color:var(--ink2);font-weight:600;margin:6px 0 18px}
.field{text-align:left;margin-bottom:14px}
.field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin:0 0 6px 8px}
.field input{width:100%;padding:14px 18px;border-radius:999px;border:1.5px solid #fff;background:rgba(255,255,255,.85);font-weight:700;font-size:1rem;outline:none;
  box-shadow:inset 3px 4px 9px rgba(230,150,185,.28),inset -3px -3px 8px #fff;transition:box-shadow .2s}
.field input::placeholder{color:#c9a3b8;font-weight:600}
.field input:focus{box-shadow:inset 3px 4px 9px rgba(230,150,185,.28),0 0 0 3px rgba(255,91,138,.4)}
.field input[aria-invalid="true"]{box-shadow:inset 3px 4px 9px rgba(230,150,185,.28),0 0 0 3px rgba(214,51,108,.55)}
.form-err{min-height:22px;font-size:.88rem;font-weight:700;color:var(--rose-d);margin-bottom:8px}
.name-card .jelly-btn{width:100%}
.name-card.shake{animation:shake .45s}
@keyframes shake{0%,100%{translate:0}20%{translate:-9px}40%{translate:8px}60%{translate:-6px}80%{translate:5px}}

/* ==========================================================================
   MAIN EXPERIENCE
   ========================================================================== */
.experience{position:relative;z-index:1;opacity:0;transition:opacity 1.2s ease}
.experience.enter{opacity:1}
.sec{position:relative;max-width:1100px;margin:0 auto;padding:clamp(44px,8vw,86px) 16px;scroll-margin-top:70px}
.sec-title{text-align:center;font-size:clamp(2.3rem,8.4vw,3.8rem);color:var(--rose-d);line-height:1.15;text-shadow:0 3px 14px rgba(255,120,170,.3)}
.sec-sub{text-align:center;color:var(--ink2);font-weight:600;margin:6px auto 26px;max-width:560px}
.canvas-wrap{position:relative;overflow:hidden}
.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.fallback-content{display:none;position:absolute;inset:0;place-items:center;align-content:center}
.no-webgl .canvas-wrap canvas,.canvas-wrap.fallback canvas{display:none}
.no-webgl .fallback-content,.canvas-wrap.fallback .fallback-content{display:grid}

/* header */
.top{position:sticky;top:10px;z-index:70;padding:0 12px}
.top-in{position:relative;max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:8px 14px 8px 20px;border-radius:999px}
.brand{display:flex;align-items:center;gap:6px;font-size:1.9rem;color:var(--rose-d);line-height:1}
.brand svg{width:22px;animation:beat 1.6s infinite}
.top-actions{display:flex;gap:8px}
.menu{position:absolute;top:calc(100% + 10px);right:0;width:min(92vw,370px);display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px;border-radius:28px;
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.96);transform-origin:top right;transition:opacity .25s,transform .25s,visibility 0s .25s}
.menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
.menu a{padding:11px 12px;border-radius:18px;font-weight:700;font-size:.9rem;color:var(--ink);transition:background .2s,transform .2s}
.menu a:hover,.menu a:focus-visible{background:rgba(255,194,216,.55);transform:translateX(3px)}
@media(max-width:560px){.hide-sm{display:none}}

/* hero */
.hero{display:grid;gap:26px;grid-template-columns:1fr;align-items:center;padding-top:30px}
@media(min-width:900px){.hero{grid-template-columns:1fr 1.05fr;min-height:78vh}}
.hero-text{text-align:center}
@media(min-width:900px){.hero-text{text-align:left}}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
.names{font-size:clamp(2.8rem,10vw,5rem);line-height:1.08;color:var(--rose-d);margin:6px 0 10px;word-break:break-word;text-shadow:0 4px 18px rgba(255,120,170,.35)}
.names .amp{color:#a98cf7}
.lead{font-weight:600;color:var(--ink2);max-width:460px;margin:0 auto 16px}
@media(min-width:900px){.lead{margin-left:0}}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:12px}
@media(min-width:900px){.actions{justify-content:flex-start}}
.scene-card{height:clamp(360px,62vh,560px);border-radius:44px}
.scene-names{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:clamp(1.5rem,5vw,2.3rem);color:var(--rose-d);text-shadow:0 2px 10px #fff;pointer-events:none;z-index:2}

/* ---------- envelope ---------- */
.env-stage{display:grid;place-items:center;padding:10px 0}
.envelope{position:relative;width:260px;height:170px;perspective:900px;filter:drop-shadow(0 16px 22px rgba(220,80,130,.3))}
.envelope>div{position:absolute;inset:0}
.e-back{background:linear-gradient(180deg,#ffa9c4,#ff8fb4);border-radius:8px}
.e-front{background:linear-gradient(135deg,#ffd6e5,#ffc2d8);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);border-radius:8px;z-index:3}
.e-flap{background:linear-gradient(180deg,#ff8fb4,#ff6f9c);clip-path:polygon(0 0,100% 0,50% 62%);transform-origin:50% 0;z-index:4;border-radius:8px 8px 0 0}
.e-seal{position:absolute;left:50%;top:42%;width:36px;transform:translate(-50%,-50%);z-index:6;filter:drop-shadow(0 3px 5px rgba(120,0,40,.4));animation:beat 1.8s infinite}
.e-paper{background:#fffaf5;margin:10px 14px;border-radius:6px;z-index:2;transform:translateY(-8px)}
.envelope.mini{animation:envFloat 4s ease-in-out infinite}
@keyframes envFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.envelope.big{width:min(78vw,340px);height:calc(min(78vw,340px) * .655);margin:0;z-index:5}
.envelope.big .e-seal{width:44px}

/* modal letter */
.modal{position:fixed;inset:0;z-index:150;display:grid;justify-items:center;align-items:start;overflow-y:auto;padding:24px 14px;overscroll-behavior:contain;opacity:0;transition:opacity .45s}
.modal.show{opacity:1}
.modal-bg{position:fixed;inset:0;background:rgba(95,25,70,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.env3d{position:relative;display:grid;place-items:center;width:min(94vw,600px);min-height:min(80vh,560px);margin:auto 0}
.env3d>*{grid-area:1/1}
.modal .envelope.big{transform:scale(.4) translateY(40px);opacity:0;transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .5s}
.modal.show .envelope.big{transform:none;opacity:1}
.modal.flap-open .e-flap{animation:flapOpen .9s ease forwards}
.modal.flap-open .e-seal{opacity:0;transition:opacity .3s}
@keyframes flapOpen{0%{transform:rotateX(0);z-index:4}49%{z-index:4}50%{z-index:1}100%{transform:rotateX(180deg);z-index:1}}
.modal.paper-out .envelope.big{transform:translateY(120px) scale(.8);opacity:0;transition:transform .9s ease,opacity .8s ease .15s}
.paper{position:relative;z-index:6;width:100%;padding:34px clamp(20px,5vw,44px) 30px;border-radius:14px;text-align:center;
  background:
    repeating-linear-gradient(180deg,transparent 0 33px,rgba(255,143,180,.16) 33px 34px),
    linear-gradient(160deg,#fffdf8,#fff3ea);
  border:2px solid rgba(255,143,180,.35);box-shadow:0 24px 60px rgba(120,20,70,.4),inset 0 0 40px rgba(255,194,216,.35);
  transform-origin:50% 0;transform:perspective(1100px) rotateX(-90deg) scaleY(.15);opacity:0;pointer-events:none}
.modal.unfold .paper{transform:none;opacity:1;pointer-events:auto;transition:transform 1.4s cubic-bezier(.2,.9,.2,1),opacity .5s}
.paper::before,.paper::after{content:"";position:absolute;width:46px;height:42px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath d='M16 28C4 18 0 12 0 8 0 3 4 0 8.5 0 12 0 14.5 2 16 5 17.5 2 20 0 23.5 0 28 0 32 3 32 8 32 12 28 18 16 28Z' fill='%23ff9ebb' opacity='.6'/%3E%3C/svg%3E") center/contain no-repeat}
.paper::before{top:10px;left:12px;transform:rotate(-14deg)}.paper::after{bottom:10px;right:12px;transform:rotate(12deg)}
.letter-title{font-size:clamp(2rem,7vw,2.8rem);color:var(--rose-d);line-height:1.15;margin-bottom:14px}
.letter-body p{font-family:'Dancing Script',cursive;font-weight:600;font-size:clamp(1.15rem,3.8vw,1.42rem);line-height:1.55;color:#6a2f55;margin:0 0 9px;opacity:0;transform:translateY(10px)}
.modal.unfold .letter-body p{animation:lineIn .8s ease forwards;animation-delay:calc(.9s + var(--i) * .22s)}
@keyframes lineIn{to{opacity:1;transform:none}}
.sign{font-size:clamp(1.8rem,6vw,2.4rem);color:var(--rose-d);margin:16px 0 18px;line-height:1.25;opacity:0}
.modal.unfold .sign{animation:lineIn .8s ease forwards;animation-delay:calc(.9s + var(--n,12) * .22s + .3s)}
.paper .jelly-btn{margin-top:4px}

/* ---------- heart gift ---------- */
.gift-grid{display:grid;gap:22px;align-items:center}
@media(min-width:860px){.gift-grid{grid-template-columns:1.2fr 1fr}}
.gift-wrap{height:clamp(320px,52vh,500px);border-radius:44px}
.gift-wrap canvas{cursor:pointer;touch-action:manipulation}
.gift-side{display:grid;gap:18px;justify-items:center}
.gift-msg{padding:24px 22px;text-align:center;width:100%;min-height:150px;display:grid;align-content:center;gap:8px}
.gift-nick{font-size:clamp(2rem,6.6vw,2.8rem);color:var(--rose-d);line-height:1.15;word-break:break-word}
.gift-text{font-weight:600;color:var(--ink2)}
.gift-msg.pop{animation:popIn .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{0%{transform:scale(.8);opacity:.3}100%{transform:none;opacity:1}}
.fb-gift{width:min(60%,260px);aspect-ratio:1;position:relative;cursor:pointer;animation:envFloat 4s ease-in-out infinite}
.fb-gift svg{width:100%;height:100%;overflow:visible}
.fb-gift .fb-lid{transform-origin:50% 40%;transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
.fb-gift.open .fb-lid{transform:translateY(-34px) rotate(-18deg)}
.fb-gift .fb-mini{transform-origin:50% 50%;transform:scale(0);transition:transform .8s cubic-bezier(.34,1.56,.64,1) .2s;filter:drop-shadow(0 0 14px #ff2e63)}
.fb-gift.open .fb-mini{transform:scale(1) translateY(-28px)}

/* ---------- CSS 3D dancing toys ---------- */
.toy-stage{position:relative;padding:34px 10px 54px;overflow:hidden;border-radius:44px;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,214,230,.55))}
.toy-row{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,7vw,90px)}
.toy-floor{position:absolute;left:8%;right:8%;bottom:20px;height:58px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,143,180,.5),rgba(255,143,180,0) 70%)}
.toy-names{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:space-around;font-size:clamp(1.3rem,4.4vw,2rem);color:var(--rose-d);z-index:3;pointer-events:none}
.toy-hearts{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.fx-heart{position:absolute;width:1.5rem;height:1.4rem;left:var(--x,50%);bottom:42%;animation:riseHeart 2.6s ease-out forwards;filter:drop-shadow(0 2px 4px rgba(255,46,99,.4))}
.fx-heart.boom{left:50%;bottom:45%;animation:boom 1.7s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes riseHeart{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx,0),-190px) scale(1.2) rotate(var(--rot,0deg));opacity:0}}
@keyframes boom{0%{transform:translate(0,0) scale(.3);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.4) rotate(var(--rot));opacity:0}}

.toy{--fur:#ffb3cd;--fur-hi:#ffe3ee;--fur-lo:#f08fb2;--acc:#ff4d79;--dir:1;position:relative;width:14em;height:19.5em;font-size:clamp(8px,2.35vw,15px);perspective:70em;flex:none}
.toy.boy{--fur:#cbbbff;--fur-hi:#f0eaff;--fur-lo:#9f8be8;--acc:#6c7bd9;--dir:-1}
.toy-3d{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 95%;animation:toySway 2.4s ease-in-out infinite}
.toy-3d>*{position:absolute;transform-style:preserve-3d}
.t-head{left:2em;top:.6em;width:10em;height:9em;border-radius:50% 50% 48% 48%/54% 54% 46% 46%;transform:translateZ(2.5em);animation:headBob 2.4s ease-in-out infinite;
  background:radial-gradient(circle at 35% 28%,var(--fur-hi),var(--fur) 58%,var(--fur-lo));
  box-shadow:inset -.6em -.8em 1.2em rgba(0,0,0,.08),inset .5em .6em 1em rgba(255,255,255,.55),0 .6em 1.2em rgba(150,60,100,.25)}
.t-ear{position:absolute;top:-1.1em;width:3.9em;height:3.9em;border-radius:50%;transform:translateZ(-1.2em);background:radial-gradient(circle at 35% 30%,var(--fur-hi),var(--fur) 65%,var(--fur-lo))}
.t-ear.l{left:-.5em}.t-ear.r{right:-.5em}
.t-ear::after{content:"";position:absolute;inset:.95em;border-radius:50%;background:#ffc2d8;box-shadow:inset 0 .2em .4em rgba(0,0,0,.12)}
.t-eye{position:absolute;top:3.5em;width:1.3em;height:1.6em;border-radius:50%;background:#3a2233;animation:blink 4.2s infinite;box-shadow:inset .15em .2em .3em rgba(255,255,255,.2)}
.t-eye.l{left:2.55em}.t-eye.r{right:2.55em}
.t-eye::after{content:"";position:absolute;left:.25em;top:.22em;width:.45em;height:.45em;border-radius:50%;background:#fff}
.t-cheek{position:absolute;top:5em;width:1.9em;height:1.1em;border-radius:50%;background:rgba(255,100,150,.45);filter:blur(.12em)}
.t-cheek.l{left:.9em}.t-cheek.r{right:.9em}
.t-muzzle{position:absolute;left:50%;top:4.7em;width:4.4em;height:3.3em;margin-left:-2.2em;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff9f2,#ffe6d6);box-shadow:inset 0 -.3em .5em rgba(0,0,0,.08)}
.t-nose{position:absolute;left:50%;top:.4em;width:1.5em;height:1em;margin-left:-.75em;border-radius:50% 50% 60% 60%;background:#5a2a45}
.t-muzzle::after{content:"";position:absolute;left:50%;top:1.4em;width:1.4em;height:.8em;margin-left:-.7em;border-bottom:.18em solid #5a2a45;border-radius:0 0 50% 50%}
.t-bow{position:absolute;right:.2em;top:-.5em;width:3.4em;height:2.2em;transform:translateZ(.8em) rotate(16deg);background:radial-gradient(circle,#c81b50 0 .5em,transparent .55em)}
.t-bow::before,.t-bow::after{content:"";position:absolute;top:0;width:50%;height:100%;background:var(--acc)}
.t-bow::before{left:0;clip-path:polygon(0 0,100% 50%,0 100%)}.t-bow::after{right:0;clip-path:polygon(100% 0,0 50%,100% 100%)}
.t-tuft{position:absolute;left:50%;top:-1em;width:2.2em;height:2.2em;margin-left:-1.1em;border-radius:50% 50% 50% 0;background:var(--fur-lo);transform:translateZ(.6em) rotate(45deg)}
.t-torso{left:2.6em;top:8.2em;width:8.8em;height:7.6em;border-radius:46% 46% 40% 40%/40% 40% 45% 45%;
  background:radial-gradient(circle at 35% 25%,var(--fur-hi),var(--fur) 60%,var(--fur-lo));
  box-shadow:inset -.6em -.8em 1.3em rgba(0,0,0,.08),inset .5em .6em 1em rgba(255,255,255,.5)}
.t-belly{position:absolute;left:50%;top:1.2em;width:5em;height:5.2em;margin-left:-2.5em;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff9f2,#ffe6d6)}
.t-skirt{position:absolute;left:-1em;right:-1em;bottom:-.5em;height:4.4em;background:linear-gradient(180deg,var(--acc),#ff8fb4);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);transform:translateZ(.5em)}
.t-tie{position:absolute;left:50%;top:-.1em;width:3.6em;height:2em;margin-left:-1.8em;transform:translateZ(.6em);background:radial-gradient(circle,#4f5fc0 0 .5em,transparent .55em)}
.t-tie::before,.t-tie::after{content:"";position:absolute;top:0;width:50%;height:100%;background:var(--acc)}
.t-tie::before{left:0;clip-path:polygon(0 0,100% 50%,0 100%)}.t-tie::after{right:0;clip-path:polygon(100% 0,0 50%,100% 100%)}
.t-arm{top:8.9em;width:2.8em;height:6.2em;transform-origin:50% 12%;transform:translateZ(1.4em)}
.t-arm.l{left:.2em;animation:armL 1.2s ease-in-out infinite}.t-arm.r{right:.2em;animation:armR 1.2s ease-in-out infinite}
.t-arm i{position:absolute;inset:0;border-radius:1.4em;background:linear-gradient(90deg,var(--fur-lo),var(--fur) 40%,var(--fur-hi));box-shadow:inset 0 -.5em .6em rgba(0,0,0,.07)}
.t-arm i::after{content:"";position:absolute;left:50%;bottom:.35em;width:1.5em;height:1.5em;margin-left:-.75em;border-radius:50%;background:#ffc2d8;opacity:.85}
.t-leg{top:15em;width:3.8em;height:4em;border-radius:46% 46% 40% 40%;transform:translateZ(.6em);background:radial-gradient(circle at 35% 25%,var(--fur-hi),var(--fur) 65%,var(--fur-lo))}
.t-leg.l{left:3em;animation:legL 1.2s ease-in-out infinite}.t-leg.r{right:3em;animation:legR 1.2s ease-in-out infinite}
.t-leg::after{content:"";position:absolute;left:50%;bottom:.45em;width:2em;height:1.4em;margin-left:-1em;border-radius:50%;background:#ffc2d8;opacity:.85}
.t-shadow{position:absolute;left:1.5em;right:1.5em;bottom:-.9em;height:1.7em;border-radius:50%;background:radial-gradient(rgba(130,50,90,.38),transparent 70%);animation:shadowPulse 2.4s ease-in-out infinite}
@keyframes toySway{0%,100%{transform:translate3d(calc(var(--dir) * -.9em),0,0) rotateY(calc(var(--dir) * -18deg)) rotateZ(calc(var(--dir) * -3deg))}25%,75%{transform:translate3d(0,-1.3em,0) rotateY(0) rotateZ(0)}50%{transform:translate3d(calc(var(--dir) * .9em),0,0) rotateY(calc(var(--dir) * 18deg)) rotateZ(calc(var(--dir) * 3deg))}}
@keyframes headBob{0%,100%{transform:translateZ(2.5em) rotateZ(-5deg)}50%{transform:translateZ(2.5em) rotateZ(5deg)}}
@keyframes armL{0%,100%{transform:translateZ(1.4em) rotateZ(26deg)}50%{transform:translateZ(1.4em) rotateZ(-36deg)}}
@keyframes armR{0%,100%{transform:translateZ(1.4em) rotateZ(-26deg)}50%{transform:translateZ(1.4em) rotateZ(36deg)}}
@keyframes legL{0%,100%{transform:translateZ(.6em) translateY(0)}50%{transform:translateZ(.6em) translateY(-.7em)}}
@keyframes legR{0%,100%{transform:translateZ(.6em) translateY(-.7em)}50%{transform:translateZ(.6em) translateY(0)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes shadowPulse{0%,100%{transform:scale(1);opacity:1}25%,75%{transform:scale(.8);opacity:.7}}
/* special sequence: spin, jump, arms up */
.toy-stage.special .toy-3d{animation:toySpecial 1.3s ease-in-out 4}
.toy-stage.special .t-arm.l{animation:armUpL .35s ease-in-out infinite}
.toy-stage.special .t-arm.r{animation:armUpR .35s ease-in-out infinite}
.toy-stage.special .t-head{animation:headBob .5s ease-in-out infinite}
@keyframes toySpecial{0%{transform:translateY(0) rotateY(0)}15%{transform:translateY(-3.6em) rotateY(180deg)}30%{transform:translateY(0) rotateY(360deg)}45%{transform:translateY(-2.6em) rotateY(540deg) rotateZ(8deg)}60%{transform:translateY(0) rotateY(720deg) rotateZ(-8deg)}75%{transform:translateY(-3.2em) rotateY(900deg)}100%{transform:translateY(0) rotateY(1080deg)}}
@keyframes armUpL{0%,100%{transform:translateZ(1.4em) rotateZ(150deg)}50%{transform:translateZ(1.4em) rotateZ(115deg)}}
@keyframes armUpR{0%,100%{transform:translateZ(1.4em) rotateZ(-150deg)}50%{transform:translateZ(1.4em) rotateZ(-115deg)}}
.toy.mini{font-size:clamp(6px,1.5vw,10px)}

/* ==========================================================================
   SIX ROMANTIC PAGES
   ========================================================================== */
/* 1 - connection */
.conn{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:clamp(22px,5vw,40px) 12px;border-radius:44px}
.conn-name{flex:none;max-width:27%;text-align:center;font-size:clamp(1.5rem,5.2vw,2.8rem);line-height:1.1;color:var(--rose-d);word-break:break-word;text-shadow:0 2px 12px rgba(255,120,170,.4)}
.conn-svg{flex:1;min-width:0;height:auto;overflow:visible}
.cl{fill:none;stroke:url(#lineG);stroke-width:4;stroke-linecap:round;filter:url(#neon);stroke-dasharray:1;stroke-dashoffset:1}
.conn.in .l1,.conn.in .l2{animation:draw 1.5s ease forwards}
.conn.in .heart-line{animation:draw 1.8s ease 1.4s forwards}
.heart-fill{fill:url(#gHeart);opacity:0;transform-box:fill-box;transform-origin:50% 60%;filter:drop-shadow(0 0 10px rgba(255,46,99,.7))}
.conn.in .heart-fill{animation:fillIn .8s ease 3s forwards,beat 1.6s ease-in-out 3.8s infinite}
.travel{fill:#fff;filter:drop-shadow(0 0 8px #ff2e63) drop-shadow(0 0 14px #ff9ebb);opacity:0;transition:opacity .4s ease 1.6s}
.conn.in .travel{opacity:1}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillIn{to{opacity:.95}}

/* 2 - universe */
.universe{height:clamp(360px,64vh,580px);border-radius:44px;background:linear-gradient(160deg,#3a2c7c 0%,#8a5fd0 45%,#ff9ec4 100%);border-color:rgba(255,255,255,.4)}
.uni-text{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:16px;pointer-events:none;z-index:2}
.uni-names{font-size:clamp(2.4rem,9vw,4.6rem);color:#fff;line-height:1.1;text-shadow:0 0 12px #fff,0 0 30px #ff9ebb,0 0 60px #ff5b8a;animation:glowText 3.4s ease-in-out infinite}
.uni-names i{font-style:normal;color:#ffd1e1}
.uni-line{color:#fff;font-weight:700;margin-top:10px;text-shadow:0 2px 10px rgba(60,20,100,.6)}
@keyframes glowText{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
.uni-fb{background:radial-gradient(2px 2px at 12% 22%,#fff,transparent),radial-gradient(2px 2px at 32% 70%,#ffd1e1,transparent),radial-gradient(3px 3px at 58% 30%,#fff,transparent),radial-gradient(2px 2px at 76% 64%,#d8c1ff,transparent),radial-gradient(2px 2px at 90% 18%,#fff,transparent);animation:twinkleBg 3s ease-in-out infinite}
@keyframes twinkleBg{0%,100%{opacity:.6}50%{opacity:1}}

/* 3 - rose garden */
.garden{position:relative;overflow:hidden;min-height:470px;padding:28px 12px 26px;border-radius:44px;background:linear-gradient(180deg,#fff2f7 0%,#ffe3ee 55%,#ffd0e1 100%)}
.garden-light{position:absolute;left:50%;top:-30%;width:120%;height:90%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(255,250,220,.95),transparent 62%);animation:glowPulse 5s ease-in-out infinite;pointer-events:none}
.garden::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,rgba(160,225,185,.55));pointer-events:none}
.petal-rain{position:absolute;inset:0;pointer-events:none;z-index:1}
.petal{position:absolute;top:-30px;left:var(--x);width:var(--s);height:calc(var(--s) * 1.3);background:linear-gradient(135deg,#ffc2d8,#ff4d79);border-radius:150% 0 150% 0;opacity:.85;animation:petalFall var(--t) linear var(--d) infinite}
@keyframes petalFall{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(46px,270px,0) rotate(200deg)}100%{transform:translate3d(-24px,560px,0) rotate(400deg)}}
.roses{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end;gap:clamp(0px,1.6vw,22px);height:clamp(230px,40vw,320px)}
.rose{width:clamp(64px,17vw,138px);flex:none;transform-origin:50% 100%;transform:scale(.04);opacity:0}
.garden.in .rose{animation:grow 1.5s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(var(--i) * .28s + .2s)}
.rose svg{width:100%;height:auto;overflow:visible;transform-origin:50% 100%;animation:roseSway 5s ease-in-out infinite;animation-delay:calc(var(--i) * -.9s)}
.rose.v2 svg{filter:hue-rotate(-18deg) saturate(1.1)}.rose.v3 svg{filter:hue-rotate(22deg)}.rose.v4 svg{filter:hue-rotate(-105deg) saturate(.9)}
@keyframes grow{0%{transform:scale(.04);opacity:0}100%{transform:none;opacity:1}}
@keyframes roseSway{0%,100%{rotate:-2.5deg}50%{rotate:2.5deg}}
.garden-msg{position:relative;z-index:3;text-align:center;font-size:clamp(1.5rem,5vw,2.2rem);color:var(--rose-d);margin-top:14px;line-height:1.3;text-shadow:0 2px 10px #fff}

/* 4 - promise */
.promise{padding:34px 18px 28px;text-align:center;border-radius:44px}
.rings{position:relative;width:210px;height:140px;margin:0 auto 14px;transform-style:preserve-3d;perspective:700px;animation:ringsSpin 7s ease-in-out infinite}
.ring{position:absolute;top:14px;width:112px;height:112px;border-radius:50%;
  background:conic-gradient(from 25deg,#ffe9a8,#d9a520,#fff3c4,#c98a00,#ffe9a8);
  -webkit-mask:radial-gradient(circle,transparent 0 38px,#000 39px);mask:radial-gradient(circle,transparent 0 38px,#000 39px);filter:drop-shadow(0 6px 8px rgba(160,100,0,.35))}
.ring.r1{left:20px}.ring.r2{left:76px;transform:rotateY(55deg)}
.gem{position:absolute;left:119px;top:2px;width:20px;height:20px;background:linear-gradient(135deg,#fff,#aee3ff 60%,#fff);transform:rotate(45deg);box-shadow:0 0 14px 4px rgba(190,235,255,.9);animation:twinkle 2s infinite}
@keyframes ringsSpin{0%,100%{transform:rotateY(-20deg) rotateX(8deg)}50%{transform:rotateY(20deg) rotateX(-4deg)}}
.vows{margin:12px auto 6px;max-width:640px}
.vow{font-family:'Dancing Script',cursive;font-weight:600;font-size:clamp(1.2rem,3.8vw,1.55rem);line-height:1.5;color:var(--ink);margin:10px 0;opacity:0;transform:translateY(12px)}
.promise.in .vow{animation:lineIn .8s ease forwards}
.promise.in .vow:nth-child(1){animation-delay:.6s}.promise.in .vow:nth-child(2){animation-delay:1.3s}.promise.in .vow:nth-child(3){animation-delay:2s}
.lock{display:inline-grid;justify-items:center;gap:2px;margin-top:10px;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.lock svg{width:84px;height:98px;filter:drop-shadow(0 8px 12px rgba(255,46,99,.4));animation:beat 2.4s infinite}
.lock:hover{transform:scale(1.08)}.lock:active{transform:scale(.94)}
.lock .shackle{transform:translateY(-10px);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.lock[aria-pressed="true"] .shackle{transform:translateY(0)}
.lock-label{font-weight:700;font-size:.9rem;color:var(--rose-d)}
.sealed{min-height:2.2em;font-size:clamp(1.6rem,5vw,2.3rem);color:var(--rose-d);margin-top:6px;text-shadow:0 0 14px rgba(255,160,190,.7)}

/* 5 - memories scrapbook */
.scrap{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:26px 22px;padding:20px 4px 10px}
.card{position:relative;width:clamp(140px,42vw,214px);padding:10px 10px 16px;background:#fff;border-radius:6px;box-shadow:0 14px 28px rgba(190,80,130,.28);animation:floaty 6s ease-in-out infinite;transition:transform .3s,box-shadow .3s;z-index:1}
.c1{--r:-4deg;animation-delay:0s}.c2{--r:3deg;animation-delay:-1.1s}.c3{--r:-2deg;animation-delay:-2.2s;margin-top:18px}.c4{--r:4deg;animation-delay:-3.3s}.c5{--r:-3deg;animation-delay:-4.4s;margin-top:14px}
.card:hover{animation-play-state:paused;transform:rotate(0) scale(1.06);box-shadow:0 20px 38px rgba(190,80,130,.4);z-index:3}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-12px) rotate(calc(var(--r) * -.6))}}
.tape{position:absolute;top:-11px;left:50%;width:72px;height:22px;margin-left:-36px;background:rgba(255,226,150,.7);transform:rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.art{aspect-ratio:1;border-radius:4px;display:grid;place-items:center;background:linear-gradient(135deg,#ffd9e6,#ffc2d8)}
.art.lav{background:linear-gradient(135deg,#e7dcff,#cdb8ff)}.art.peach{background:linear-gradient(135deg,#ffe6d6,#ffc9a8)}.art.mint{background:linear-gradient(135deg,#dcf6e6,#b4e9c9)}
.art svg{width:46%;animation:beat 2.4s infinite}
.card figcaption{display:grid;gap:3px;margin-top:10px;text-align:center}
.card figcaption b{font-size:1.5rem;color:var(--rose-d);line-height:1.1;font-weight:400}
.card figcaption span{font-size:.84rem;font-weight:600;color:var(--ink2);line-height:1.4}
.bg-heart{position:absolute;width:var(--s);left:var(--x);bottom:-10%;opacity:0;animation:floatUp var(--t) ease-in infinite;animation-delay:var(--d);pointer-events:none;z-index:0}
@keyframes floatUp{0%{transform:translateY(0) rotate(-8deg);opacity:0}15%{opacity:.8}100%{transform:translateY(-420px) rotate(12deg);opacity:0}}

/* 6 - forever */
.sunset{height:clamp(400px,68vh,620px);border-radius:44px;background:linear-gradient(180deg,#ffb5c8 0%,#ffcba4 34%,#ffe3a8 54%,#ffb3d1 76%,#c9a8ff 100%)}
.sun{position:absolute;left:50%;top:30%;width:min(46vw,260px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#fff8d6,#ffd27a 58%,rgba(255,170,110,0) 72%);box-shadow:0 0 90px 40px rgba(255,190,120,.55);animation:sunPulse 6s ease-in-out infinite}
@keyframes sunPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
.sunset::before{content:"";position:absolute;left:-5%;right:-5%;bottom:0;height:26%;background:radial-gradient(ellipse at 30% 100%,#c9a8ff 0 60%,transparent 61%),radial-gradient(ellipse at 75% 100%,#b794f4 0 55%,transparent 56%);opacity:.7}
.joined{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,20px);font-size:clamp(1.8rem,6.4vw,3rem);color:#fff;text-shadow:0 2px 14px rgba(190,60,110,.6);padding:0 10px;pointer-events:none;flex-wrap:wrap}
.joined span{max-width:40%;word-break:break-word;text-align:center}
.join-heart{width:clamp(36px,8vw,56px);flex:none;animation:beat 1.4s ease-in-out infinite;filter:drop-shadow(0 0 14px #ff2e63)}
.sunset .fallback-content{align-content:end;padding-bottom:90px}

/* emoji garden */
.emoji-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:12px;padding:22px;position:relative;border-radius:44px}
.emo{position:relative;aspect-ratio:1;display:grid;place-items:center;font-size:clamp(2rem,8vw,2.8rem);border-radius:32px;border:1.5px solid #fff;background:linear-gradient(145deg,#fff,#ffe9f1);box-shadow:0 8px 16px rgba(255,120,170,.25),inset 0 3px 5px #fff,inset 0 -5px 9px rgba(255,170,205,.3);animation:emoFloat 3.4s ease-in-out infinite;animation-delay:var(--d);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.emo span{display:block;animation:emoRot 4s ease-in-out infinite alternate;animation-delay:var(--d)}
.emo:hover{transform:scale(1.18) rotate(-4deg)}
.emo.tap{animation:jelly .7s ease}
@keyframes emoFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes emoRot{from{rotate:-12deg}to{rotate:12deg}}
@keyframes jelly{0%{transform:scale(1)}25%{transform:scale(1.35,.7)}45%{transform:scale(.8,1.3)}65%{transform:scale(1.15,.9)}85%{transform:scale(.95,1.05)}100%{transform:scale(1)}}
.emo-fly{position:fixed;z-index:250;pointer-events:none;font-size:1.5rem;animation:emoFly 1.3s ease-out forwards}
@keyframes emoFly{0%{transform:translate(0,0) scale(.4);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.3) rotate(var(--rot));opacity:0}}

/* footer */
.footer{position:relative;text-align:center;padding:78px 16px 44px;margin-top:30px;background:linear-gradient(180deg,transparent,rgba(255,194,216,.6) 55%,rgba(255,170,205,.7));overflow:hidden}
.f-heart{width:42px;margin:0 auto 8px;animation:beat 1.4s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(255,46,99,.5))}
.f-made{font-size:clamp(2rem,7vw,3rem);color:var(--rose-d);line-height:1.2}
.f-copy{font-weight:700;color:var(--ink2);margin-top:6px;font-size:.95rem}
.f-rose{position:absolute;bottom:18px;width:clamp(34px,7vw,52px);height:clamp(34px,7vw,52px);animation:footFloat 5s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(200,40,90,.3))}
.fr1{left:8%}.fr2{left:26%;animation-delay:-1.4s;bottom:50px}.fr3{right:24%;animation-delay:-2.6s;bottom:46px}.fr4{right:7%;animation-delay:-3.6s}
@keyframes footFloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-16px) rotate(10deg)}}

/* back to top (heart) */
.to-top{position:fixed;right:16px;bottom:18px;z-index:80;width:62px;height:58px;display:grid;place-items:center;opacity:0;transform:translateY(30px) scale(.6);pointer-events:none;transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 8px 10px rgba(255,46,99,.45));animation:beat 1.8s infinite}
.to-top span{position:relative;color:#fff;font-weight:700;font-size:1.3rem;margin-top:-4px;text-shadow:0 1px 3px rgba(120,0,40,.5)}
.to-top:hover{transform:scale(1.1)}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;z-index:400;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:11px 22px;border-radius:999px;font-weight:700;font-size:.92rem;transition:.3s;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* fx canvas (Three.js rain/bursts) sits above everything */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:300;pointer-events:none}

/* ---------- accessibility: reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .rv{opacity:1;transform:none}
  .rose{opacity:1;transform:none}
  .vow,.letter-body p,.sign{opacity:1;transform:none}
  .cl{stroke-dashoffset:0}.heart-fill{opacity:.95}.travel{opacity:1}
}

/* fallback gift svg parts */
.fb-gift .fb-lid,.fb-gift .fb-mini{transform-box:fill-box}