:root{--cream:#fff8e8;--gold:#f1d796;--deep:#030b1b}*{box-sizing:border-box}html{background:var(--deep)}body{margin:0;background:var(--deep);color:var(--cream);font-family:Georgia,"Times New Roman",serif}button{font:inherit}.invitation-page{position:relative;min-height:100svh;overflow-x:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem 3rem;isolation:isolate;background:radial-gradient(circle at 50% 20%,rgba(53,75,120,.42),transparent 35rem),radial-gradient(circle at 12% 86%,rgba(101,22,41,.2),transparent 24rem),linear-gradient(155deg,#071a38 0%,#030b1b 62%,#09091a 100%)}.invitation-page:before{content:"";position:absolute;inset:0;z-index:-2;opacity:.22;background-image:linear-gradient(30deg,transparent 48%,rgba(241,215,150,.18) 49%,transparent 51%),linear-gradient(-30deg,transparent 48%,rgba(241,215,150,.1) 49%,transparent 51%);background-size:72px 72px}.stars{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle at 14% 22%,rgba(241,215,150,.8) 0 1px,transparent 2px),radial-gradient(circle at 79% 17%,rgba(241,215,150,.7) 0 1px,transparent 2px),radial-gradient(circle at 87% 72%,rgba(241,215,150,.65) 0 1px,transparent 2px);background-size:190px 190px,240px 240px,170px 170px}.intro{display:flex;align-items:center;gap:.8rem;margin-bottom:1.7rem;color:var(--gold);font-size:clamp(1rem,3vw,1.25rem);letter-spacing:.08em;text-align:center;transition:.5s}.invitation-stage{position:relative;width:min(92vw,680px);height:min(72vw,475px);min-height:310px;perspective:1600px}.envelope{position:absolute;left:50%;bottom:0;width:100%;height:auto;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 28px 30px rgba(0,0,0,.48));user-select:none}.envelope-open{z-index:4;opacity:0;transform:translateX(-50%) translateY(1rem) scale(.96);transition:opacity .7s .45s,transform .9s .35s}.envelope-closed{z-index:6;transition:opacity .55s .15s,transform .8s}.card-wrap{position:absolute;z-index:3;left:50%;bottom:9%;width:min(58%,365px);aspect-ratio:941/1672;transform:translate(-50%,14%) scale(.72);opacity:0;transition:transform 1.7s cubic-bezier(.22,.85,.25,1) .65s,opacity .35s .55s}.invitation-card{display:block;width:100%;height:100%;object-fit:cover;box-shadow:0 24px 55px rgba(0,0,0,.55),0 0 0 1px rgba(241,215,150,.35)}.open-button{position:absolute;z-index:8;left:50%;top:55%;transform:translate(-50%,-50%);width:7.5rem;height:7.5rem;border:0;border-radius:50%;display:grid;place-content:center;gap:.25rem;color:#2b1605;background:radial-gradient(circle at 38% 30%,#f5da91,#b47b25 62%,#755018 100%);box-shadow:0 8px 25px rgba(0,0,0,.48),inset 0 0 0 3px rgba(255,245,205,.42);cursor:pointer;transition:.35s}.open-button span{font-weight:700}.open-button small{font-size:.76rem}.after-open{display:grid;justify-items:center;gap:1rem;margin-top:1.5rem;opacity:0;transform:translateY(1rem);pointer-events:none;transition:opacity .6s 2s,transform .6s 2s}.after-open p{margin:0;color:var(--gold);font-size:1.15rem;font-style:italic}.music-button{min-height:3rem;border:1px solid rgba(241,215,150,.52);border-radius:999px;display:flex;align-items:center;gap:.55rem;padding:.7rem 1.1rem;color:var(--cream);background:rgba(5,15,35,.85);cursor:pointer}.is-open{justify-content:flex-start;padding-top:3rem}.is-open .intro{opacity:0;transform:translateY(-1rem);pointer-events:none}.is-open .invitation-stage{height:1120px;min-height:1120px}.is-open .envelope-closed{opacity:0;transform:translateX(-50%) translateY(2rem) scale(.9);pointer-events:none}.is-open .envelope-open{opacity:1;transform:translateX(-50%) scale(1);width:82%}.is-open .card-wrap{z-index:5;width:min(82%,520px);top:1rem;bottom:auto;transform:translate(-50%) scale(1);opacity:1}.is-open .open-button{opacity:0;transform:translate(-50%,-50%) scale(.7);pointer-events:none}.is-open .after-open{opacity:1;transform:none;pointer-events:auto}.is-open .music-button{position:fixed;top:1rem;right:1rem;z-index:20;box-shadow:0 10px 30px rgba(0,0,0,.35)}button:focus-visible{outline:3px solid var(--cream);outline-offset:4px}@media(max-width:560px){.invitation-page{padding-inline:.65rem}.intro{margin-bottom:1rem}.invitation-stage{width:98vw;height:72vw;min-height:280px}.open-button{width:6.2rem;height:6.2rem}.is-open{padding-top:.75rem}.is-open .invitation-stage{height:790px;min-height:790px}.is-open .card-wrap{width:min(84%,370px);top:.5rem;transform:translate(-50%)}.is-open .envelope-open{width:94%}.is-open .music-button{top:.65rem;right:.65rem;padding:.65rem}.is-open .music-label{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;transition-delay:0ms!important}}