:root{--ink:#5e5240;--gold:#a88f58;--deep:#7d6a40;--cx:51%;--cy:53%}
*{box-sizing:border-box;margin:0}html,body{height:100%;overflow:hidden;background:#efe8d8}
body{font-family:'Cormorant Garamond',serif;color:var(--ink);font-size:16px}
#stage{position:fixed;left:50%;top:50%;width:max(100vw,56.25vh);height:max(100vh,177.78vw);transform:translate(-50%,-50%);perspective:1800px}
#paper{position:absolute;inset:0;background:url(aset/kertas.webp) center/100% 100%;transition:transform 1.1s cubic-bezier(.4,0,.2,1),opacity 1s,filter 1s}
.closed #paper,.closing #paper{transform:translateY(6%) scale(.92);opacity:0;filter:blur(3px)}
#win{position:absolute;left:21.5%;right:21.5%;top:21%;bottom:19%;-webkit-mask:linear-gradient(transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(transparent,#000 7%,#000 93%,transparent)}
#scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;text-align:center;padding:0 4px;scrollbar-width:none}#scroll::-webkit-scrollbar{display:none}
section{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:34px 0;opacity:.15;transform:translateY(16px);transition:1s}section.in{opacity:1;transform:none}
section+section{border-top:1px solid rgba(168,143,88,.25)}
h1,h2{font-family:'Great Vibes',cursive;font-weight:400;color:var(--deep)}h1{font-size:44px;line-height:1.05;margin:10px 0}h2{font-size:30px;line-height:1.15}
h3{font-size:15px;letter-spacing:3px;text-transform:uppercase;font-weight:600;margin-bottom:14px;color:var(--gold)}
.small{letter-spacing:3px;text-transform:uppercase;font-size:11px}.guest{margin-top:22px}.guest b{font-size:20px}.scrollhint{margin-top:26px;font-size:12px;font-style:italic;opacity:.7;animation:bob 2s infinite}@keyframes bob{50%{transform:translateY(4px)}}
.quote{font-style:italic;line-height:1.6;font-size:16px}.amp{font-family:'Great Vibes';font-size:34px;margin:8px}.couple p{font-size:14px}
.cd{display:flex;justify-content:center;gap:5px;margin-bottom:10px}.cd div{width:52px;padding:7px 0;border-radius:10px;background:rgba(255,252,244,.6);box-shadow:inset 1px 1px 3px #fff,inset -1px -1px 4px rgba(150,130,85,.25)}.cd b{display:block;font-size:22px}.cd span{font-size:10px}
.ev{margin:10px 0;padding:14px 10px;border-radius:90px 90px 10px 10px;background:rgba(255,252,244,.5);box-shadow:inset 0 0 0 1px rgba(168,143,88,.4)}.ev h4{font-family:'Great Vibes';font-size:28px;font-weight:400;color:var(--deep)}.ev p{font-size:14px}
.btn{display:inline-block;margin-top:12px;padding:9px 18px;border-radius:30px;border:1px solid var(--gold);background:var(--deep);color:#fffdf6;font:inherit;font-size:15px;text-decoration:none;cursor:pointer}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:6px}.gal div{aspect-ratio:3/4;border-radius:8px;background:rgba(230,220,195,.6) center/cover;display:flex;align-items:center;justify-content:center;font-size:12px;color:#a09070}
form{display:flex;flex-direction:column;gap:8px}input,select,textarea{font:inherit;font-size:15px;padding:8px 12px;border-radius:8px;border:1px solid rgba(168,143,88,.5);background:rgba(255,253,247,.8);color:var(--ink)}
.w{text-align:left;background:rgba(255,252,244,.55);border-radius:10px;padding:9px 11px;margin:6px 0;font-size:14px}.w b{display:block}.w small{opacity:.7}
/* amplop */
.flap{position:absolute;inset:0;background:url(aset/amplop.webp) center/100% 100%;transition:transform 1.2s cubic-bezier(.55,.05,.3,1),opacity .6s;backface-visibility:hidden;filter:drop-shadow(0 1px 2px rgba(110,90,50,.25))}
.f-top{clip-path:polygon(0 0,100% 0,var(--cx) var(--cy));transform-origin:50% 0;z-index:4}
.f-bottom{clip-path:polygon(0 100%,100% 100%,var(--cx) var(--cy));transform-origin:50% 100%;z-index:1}
.f-left{clip-path:polygon(0 0,var(--cx) var(--cy),0 100%);transform-origin:0 50%;z-index:2}
.f-right{clip-path:polygon(100% 0,var(--cx) var(--cy),100% 100%);transform-origin:100% 50%;z-index:3}
.open .flap{opacity:0}
.open .f-top{transform:rotateX(-150deg);transition-delay:.35s,.9s}.open .f-left{transform:rotateY(150deg);transition-delay:.6s,1.1s}.open .f-right{transform:rotateY(-150deg);transition-delay:.6s,1.1s}.open .f-bottom{transform:rotateX(150deg);transition-delay:.8s,1.3s}
.open #paper{transition-delay:.9s}
.closing .f-bottom{transition-delay:.7s}.closing .f-left,.closing .f-right{transition-delay:.95s}.closing .f-top{transition-delay:1.2s}
#seal{position:fixed;left:calc(50% + 1%);top:53%;width:118px;height:118px;margin:-59px 0 0 -59px;border:none;background:none;padding:0;cursor:pointer;z-index:20;filter:drop-shadow(0 6px 8px rgba(90,70,30,.35));animation:pulse 2.6s ease-in-out infinite;transition:opacity .5s}
.half{position:absolute;inset:0;background:url(aset/segel.webp) center/contain no-repeat;transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .8s}
.h1{clip-path:polygon(0 0,54% 0,47% 28%,56% 50%,45% 73%,51% 100%,0 100%)}.h2{clip-path:polygon(54% 0,100% 0,100% 100%,51% 100%,45% 73%,56% 50%,47% 28%)}
@keyframes pulse{50%{transform:scale(1.035)}}@keyframes press{0%{transform:scale(1.5) translateY(-30px);opacity:0}60%{transform:scale(.94);opacity:1}100%{transform:scale(1)}}
body.isopen #seal{animation:none;pointer-events:none}body.isopen .h1{transform:translate(-36px,-50px) rotate(-24deg);opacity:0}body.isopen .h2{transform:translate(36px,-44px) rotate(20deg);opacity:0}
#seal.press{animation:press .7s ease-out}
.hint,.guest-top,#thanks{position:fixed;left:0;right:0;text-align:center;z-index:20;transition:opacity .6s}
.hint{top:calc(53% + 72px);font-style:italic;font-size:15px;letter-spacing:1px;text-shadow:0 1px 0 #fff}
.guest-top{bottom:8%}.guest-top small{display:block;letter-spacing:3px;font-size:12px;text-transform:uppercase}.guest-top b{font-size:22px;background:rgba(252,249,240,.85);padding:2px 14px;border-radius:4px}
body.isopen .hint,body.isopen .guest-top,body.sending .hint{opacity:0;pointer-events:none}
#kirim{position:fixed;left:50%;top:calc(53% + 78px);transform:translateX(-50%);z-index:21;font-size:18px;padding:11px 34px;animation:fadein .8s}
#thanks{top:calc(53% + 74px);animation:fadein .8s}#thanks p{font-family:'Great Vibes';font-size:30px;color:var(--deep);text-shadow:0 1px 0 #fff}
@keyframes fadein{from{opacity:0;transform:translate(-50%,8px)}}#thanks{animation-name:fade2}@keyframes fade2{from{opacity:0}}
#music{position:fixed;right:14px;bottom:14px;z-index:30;width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);background:#faf5ea;font-size:18px;color:var(--deep)}#music.on{animation:spin 4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
[hidden]{display:none!important}
.closing #paper{transform:translateY(3%) scale(.95);opacity:0;filter:none;transition:transform 1s cubic-bezier(.4,0,.2,1),opacity .6s 1.9s}
#thanks p{font-size:26px;padding:0 20px}
#thanks p{display:inline-block;background:rgba(250,246,236,.85);border-radius:30px;padding:2px 18px;margin:0 16px}#thanks{display:flex;flex-direction:column;align-items:center}