:root{--bg:#faf9f6;--ink:#5a3d34;--muted:#9a7f72;--blush:#f4cfc8;--red:#b64b57;--gold:#c9a050;--peach:#f9dcc4}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{margin:0;min-height:100vh;color:var(--ink);font-family:Inter,system-ui,sans-serif;
  background:var(--bg) radial-gradient(circle at 1px 1px,rgb(201 160 80/.14) 1px,transparent 1.500px) 0 0/26px 26px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}

.scene{display:grid;gap:2rem;justify-items:center;padding:2.5rem 1rem 4rem;max-width:1180px;margin:auto}
.hero{text-align:center}
.eyebrow{margin:0;letter-spacing:.3em;text-transform:uppercase;font-size:.7rem;color:var(--muted)}
h1,h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;margin:0}
h1{font-size:clamp(2.6rem,9vw,4.8rem);font-style:italic;color:var(--red)}
h1 sup{font-size:.4em;vertical-align:.9em;margin-left:.1em}

.cake-zone{display:grid;justify-items:center;gap:1rem;width:100%}
.cake{width:min(86vw,380px);filter:drop-shadow(0 20px 18px rgb(107 74 58/.12))}
.cake svg{display:block;width:100%;height:auto;overflow:visible}
.cake .wind,.cake .flame{transform-box:fill-box;transform-origin:50% 100%}
#status{margin:0;min-height:1.5em;text-align:center;color:var(--muted)}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.btn{font:inherit;font-size:.9rem;padding:.65rem 1.2rem;border-radius:999px;border:1px solid var(--gold);background:transparent;color:var(--ink);cursor:pointer;transition:background .25s,transform .25s,box-shadow .25s}
.btn:hover{background:rgb(249 220 196/.55)}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(#d9666f,#b64b57);border-color:#b64b57;color:#fff7f2;box-shadow:0 6px 16px rgb(182 75 87/.28)}
.btn.primary:hover{background:linear-gradient(#df727b,#bf535f)}
.btn:disabled{opacity:.6;cursor:wait}
.btn:focus-visible,.env:focus-visible,.close:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.tune{font-size:.8rem;color:var(--muted)}.tune input{width:180px;display:block;margin:.5rem auto 0;accent-color:var(--red)}
.wish-banner{display:flex;align-items:center;gap:.5rem;margin:0;font:italic 500 2rem 'Cormorant Garamond',serif;color:var(--red)}
.wish-banner svg{width:1.4rem;height:1.4rem}

.env-zone{display:grid;gap:1.5rem;justify-items:center}
.wish-zone{width:100%;max-width:400px}
.music{position:fixed;top:.8rem;right:.8rem;z-index:40;display:flex;align-items:center;gap:.6rem;padding:.3rem .8rem .3rem .3rem;border-radius:999px;background:rgb(255 251 241/.85);border:1px solid rgb(201 160 80/.5);backdrop-filter:blur(6px)}
.mbtn{width:34px;height:34px;border:0;border-radius:50%;background:linear-gradient(#d9666f,#b64b57);color:#fff7f2;padding:8px;cursor:pointer}
.mbtn svg{width:100%;height:100%;display:block}
.music input{width:90px;accent-color:var(--red)}
.hint{margin:-.8rem 0 0;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---- amplop ---- */
.env-wrap{perspective:900px;padding-top:70px}
.env{position:relative;width:240px;height:170px;cursor:pointer;-webkit-tap-highlight-color:transparent;animation:float 6s ease-in-out infinite}
.env>*{position:absolute;inset:0;width:100%}
.env-back{height:100%}.env-front{height:100%;z-index:3;pointer-events:none}
.env-letter{inset:14px 16px auto;height:130px;width:auto;z-index:2;transition:transform .8s cubic-bezier(.34,1.3,.5,1);filter:drop-shadow(0 2px 4px rgb(0 0 0/.12))}
.env-letter svg{width:100%;height:100%;display:block}
.env-flap{height:100px;z-index:4;transform-origin:50% 0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,0,.2,1),z-index 0s .35s}
.env-flap .face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;filter:drop-shadow(0 3px 3px rgb(107 58 58/.18))}
.env-flap .f-in{transform:rotateX(180deg)}
.env-seal{width:44px;height:44px;left:98px;top:62px;inset:auto;z-index:5;transition:transform .5s,opacity .4s;filter:drop-shadow(0 3px 3px rgb(80 20 30/.35))}
.env[data-state="open"] .env-flap,.env[data-state="read"] .env-flap{transform:rotateX(180deg)}
.env[data-state="open"] .env-flap,.env[data-state="read"] .env-flap{z-index:1}
.env[data-state="open"] .env-seal,.env[data-state="read"] .env-seal{opacity:0;transform:translateY(-14px) scale(.6) rotate(20deg)}
.env[data-state="open"] .env-letter{transform:translateY(-52px)}
.env[data-state="read"] .env-letter{transform:translateY(-52px);opacity:0;transition:opacity .3s}
@keyframes float{50%{transform:translateY(-6px)}}

/* ---- surat ---- */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:1rem;background:rgb(90 61 52/.35);backdrop-filter:blur(3px);opacity:0;transition:opacity .35s}
.modal.show{opacity:1}
.letter-card{position:relative;width:min(92vw,460px);max-height:88vh;overflow:auto;padding:2.5rem 2rem 2rem;border-radius:6px;background:linear-gradient(135deg,#fffbf1,#f6ecd9);box-shadow:0 30px 60px rgb(60 30 30/.3);transform:translateY(60px) scale(.9) rotate(-1.500deg);transition:transform .6s cubic-bezier(.34,1.3,.5,1)}
.modal.show .letter-card{transform:none}
#lDeco{position:absolute;inset:10px;border:1px solid rgb(201 160 80/.5);border-radius:3px;pointer-events:none}
.letter-card h2{font-size:2rem;font-style:italic;color:var(--red);text-align:center;margin-bottom:1rem}
#lBody p{font:500 1.15rem/1.7 'Cormorant Garamond',serif;margin:0 0 1rem}
.sign{font:500 1.6rem Caveat,cursive;text-align:right;margin:1.5rem 0 0;color:var(--red)}
.close{position:absolute;top:.8rem;right:.8rem;width:36px;height:36px;border:0;border-radius:50%;background:rgb(244 207 200/.6);color:var(--ink);cursor:pointer;padding:8px}

/* ---- kertas wish ---- */
.paper{position:relative;width:100%;min-height:380px;transform:rotate(-1deg);transition:transform .5s}
.paper:focus-within{transform:rotate(0)}
#paperBg,.paper-bg{position:absolute;inset:0;width:100%;height:100%}
.paper-body{position:relative;display:grid;gap:.8rem;padding:2.2rem 2rem 2rem}
.paper h2{font-size:1.9rem;font-style:italic;color:var(--red)}
.paper input,.paper textarea{width:100%;font:500 1.35rem/1.6 Caveat,cursive;color:var(--ink);background:transparent;border:0;border-bottom:1px dashed #d5bf9c;padding:.2rem 0;resize:none;outline:none}
.paper textarea{background:repeating-linear-gradient(transparent 0 2.080rem,rgb(201 160 80/.25) 2.080rem 2.160rem);line-height:2.160rem;border:0}
.paper input:focus,.paper textarea:focus{border-color:var(--red)}
.paper ::placeholder{color:#b9a58f}
.wstatus{margin:0;min-height:1.3em;font-size:.85rem;color:var(--muted)}.wstatus.err{color:var(--red)}.wstatus.ok{color:#6d8a5b}
.send{justify-self:start;display:inline-flex;gap:.5rem;align-items:center}.ico{width:18px;height:18px;display:inline-block}.ico svg{width:100%;height:100%}

#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}
#fx i{position:absolute;display:block;width:18px;height:18px}#fx i svg{width:100%;height:100%}

@media (min-width:960px){
  .scene{grid-template-columns:1fr minmax(320px,400px) 1fr;grid-template-areas:". hero ." "wish cake env";align-items:start;column-gap:3rem}
  .hero{grid-area:hero}.cake-zone{grid-area:cake}
  .wish-zone{grid-area:wish;justify-self:end;margin-top:2rem}
  .env-zone{grid-area:env;justify-self:start;margin-top:-1rem}
}
@media (prefers-reduced-motion:reduce){.env{animation:none}*{transition-duration:.01ms!important}}