:root{--ink:#2a0a12;--wine:#5a0f1e;--crimson:#8b1a2f;--blood:#a3122e;--gold:#b8955a;--paper:#f5ece0;--paper2:#ebdcc8}
*{box-sizing:border-box;margin:0}
body{font-family:Jost,sans-serif;font-weight:400;color:var(--ink);min-height:100vh;background:radial-gradient(ellipse at top,#6b1426,#2a0a12 75%) fixed;overflow-x:hidden}
h1,h2,h3,.hand{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--wine);line-height:1.2}
h1{font-size:clamp(2rem,8vw,3.2rem)}h2{font-size:clamp(1.6rem,6vw,2.4rem)}h3{font-size:1.3rem}
.hand{font-style:italic;font-weight:500;font-size:1.5rem}.big{font-size:2.4rem}.small{font-size:.9rem;opacity:.75}
p{line-height:1.7}
#book{max-width:700px;margin:0 auto;padding:1.5rem 1rem 6rem;position:relative;z-index:2}
.page{display:none;text-align:center;padding:2rem 1.4rem;background:var(--paper);border:1px solid var(--gold);box-shadow:0 10px 30px #0008;position:relative;overflow:hidden}
.page::after{content:"";position:absolute;inset:7px;border:1px solid var(--gold);opacity:.45;pointer-events:none}
.page.on{display:block;animation:geser .3s ease-out backwards}
.page>*+*{margin-top:1rem}
@keyframes geser{from{opacity:0;translate:var(--dx,30px) 0}}
@keyframes muncul{from{opacity:0;translate:0 14px}}
@keyframes pop{from{opacity:0;scale:.6}}
.page.on>*{animation:muncul .5s ease-out backwards;animation-delay:calc(var(--i,0)*.08s + .1s)}
/* judul berkilau */
.page.on>h1,.page.on>h2{background:linear-gradient(100deg,var(--wine) 40%,#d4b06a 50%,var(--wine) 60%) 0/250%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:muncul .5s ease-out backwards,kilau 4s linear infinite;animation-delay:calc(var(--i,0)*.08s + .1s),0s}
.night.page.on>h2{background-image:linear-gradient(100deg,var(--paper) 40%,var(--gold) 50%,var(--paper) 60%)}
@keyframes kilau{to{background-position:-250% 0}}
.btn,#nav button{font:500 .95rem Jost;letter-spacing:.04em;background:var(--wine);color:var(--paper);border:1px solid var(--gold);padding:.75rem 1.8rem;cursor:pointer;transition:background .15s,box-shadow .2s}
.btn:hover,#nav button:hover{background:var(--blood);box-shadow:0 0 14px #a3122e88}
.btn:active,#nav button:active{transform:scale(.96)}
.btn:disabled{opacity:.5}
/* sampul: hati menggambar diri */
.gambar{width:64px;height:64px;display:block;margin:0 auto;animation:detak 1.5s 2.2s infinite}
.gambar path{fill:none;stroke:var(--blood);stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:1;animation:gambar 1.4s .2s ease forwards,isi .6s 1.4s forwards}
@keyframes gambar{to{stroke-dashoffset:0}}@keyframes isi{to{fill:var(--blood)}}
@keyframes detak{0%,100%{scale:1}15%{scale:1.18}30%{scale:1}45%{scale:1.12}}
/* amplop */
.envelope{position:relative;width:250px;height:165px;margin:3rem auto 1.5rem;background:var(--crimson);box-shadow:0 8px 18px #0006}
.page.on>.envelope{animation:melayang 3.5s ease-in-out infinite}
@keyframes melayang{50%{translate:0 -9px}}
.envelope .flap{position:absolute;top:0;left:0;border-left:125px solid transparent;border-right:125px solid transparent;border-top:95px solid var(--wine);transform-origin:top;transition:transform .5s .25s;z-index:3}
.letter-peek{position:absolute;left:12px;right:12px;bottom:8px;height:135px;background:var(--paper);padding:1rem;font:italic 500 1.2rem 'Cormorant Garamond',serif;color:var(--wine);transition:transform .6s .6s;z-index:1}
.seal{position:absolute;top:73px;left:105px;width:40px;height:40px;border-radius:50%;background:var(--blood);display:grid;place-items:center;z-index:4;box-shadow:0 2px 6px #0007;transition:.3s;animation:detak 1.4s infinite}
.seal svg{width:20px;fill:var(--paper)}
.envelope.open .seal{scale:1.5;opacity:0;animation:none}.envelope.open .flap{transform:rotateX(180deg);z-index:0}.envelope.open .letter-peek{transform:translateY(-105px)}
/* cerita */
.timeline{text-align:left;border-left:1px solid var(--gold);padding-left:1rem}
.timeline article{margin:1.1rem 0;padding:1rem;background:var(--paper2);border-left:3px solid var(--crimson)}
.page.on .timeline article{animation:masukKiri .5s ease-out backwards}
.page.on .timeline article:nth-child(even){animation-name:masukKanan}
.timeline article:nth-child(1){animation-delay:.2s!important}.timeline article:nth-child(2){animation-delay:.4s!important}.timeline article:nth-child(3){animation-delay:.6s!important}.timeline article:nth-child(4){animation-delay:.8s!important}
@keyframes masukKiri{from{opacity:0;translate:-40px 0}}@keyframes masukKanan{from{opacity:0;translate:40px 0}}
.cal{width:110px;margin-bottom:.6rem;text-align:center;border:1px solid var(--wine);overflow:hidden}
.cal b{display:block;background:var(--wine);color:var(--paper);font:600 1rem 'Cormorant Garamond',serif;padding:.2rem}.cal span{font:600 2.4rem 'Cormorant Garamond',serif;color:var(--wine)}.cal i{display:block;font-style:normal;font-size:.85rem}
.duo{width:220px;max-width:100%;height:36px;display:block;margin:1rem auto;overflow:visible}
.duo circle{fill:var(--gold)}.duo .gr{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:3 5;fill:none}.duo .hr{fill:var(--blood);transform-box:fill-box;transform-origin:center;animation:detak 1.4s infinite}
.duo .a{animation:dekatA 2.6s ease-in-out infinite alternate}.duo .b{animation:dekatB 2.6s ease-in-out infinite alternate}
@keyframes dekatA{to{translate:72px 0}}@keyframes dekatB{to{translate:-72px 0}}
/* album */
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}
.polaroid{background:#fff;padding:.5rem .5rem 1.4rem;border:1px solid var(--gold);box-shadow:0 3px 8px #0004;cursor:pointer;transition:transform .15s,box-shadow .15s;animation:pop .45s backwards}
.polaroid:nth-child(odd){transform:rotate(-1.2deg)}.polaroid:nth-child(even){transform:rotate(1.2deg)}
.polaroid:hover{transform:scale(1.05) rotate(0);box-shadow:0 8px 18px #0006}
.polaroid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--paper2)}
#lightbox{position:fixed;inset:0;background:#000d;display:grid;place-items:center;z-index:50;padding:1rem;animation:pop .2s}
#lightbox[hidden],#nav[hidden],#musik[hidden],[hidden]{display:none}
#lightbox img{max-width:100%;max-height:85vh;border:8px solid #fff}
/* surat & pesan */
.paper{background:var(--paper2);padding:1.6rem;margin:1rem auto;text-align:left;font:italic 500 1.35rem/1.6 'Cormorant Garamond',serif;color:var(--ink);border:1px solid var(--gold)}
.paper p+p{margin-top:.8rem}
.paper p{animation:muncul .5s ease-out backwards}
/* kartu */
.cards{display:grid;gap:.9rem}.card{perspective:800px;height:110px;cursor:pointer;animation:pop .45s backwards}
.card div{position:relative;width:100%;height:100%;transition:transform .4s;transform-style:preserve-3d}.card.flip div{transform:rotateY(180deg)}
.card span{position:absolute;inset:0;backface-visibility:hidden;display:grid;place-items:center;padding:1rem;border:1px solid var(--gold)}
.card .f{background:var(--wine);color:var(--paper);font:600 1.2rem 'Cormorant Garamond',serif}
.card .b{background:var(--paper2);transform:rotateY(180deg);font:italic 500 1.2rem 'Cormorant Garamond',serif}
/* kuis */
#kuis .opt{display:block;width:100%;margin:.5rem 0;padding:.8rem;background:var(--paper2);border:1px solid var(--gold);font:1rem Jost;color:var(--ink);cursor:pointer;animation:muncul .35s backwards;transition:background .15s}
#kuis .opt:hover{background:#e3cfb3}
#kuis .opt.ok{background:#5e8a60;color:#fff;animation:pulse .3s}#kuis .opt.no{background:var(--blood);color:#fff;animation:getar .3s}
@keyframes pulse{50%{scale:1.04}}@keyframes getar{25%{translate:-6px 0}75%{translate:6px 0}}
.bar{height:5px;background:var(--paper2)}.bar i{display:block;height:100%;background:var(--crimson);transition:width .25s}
/* kue */
.cake{position:relative;width:200px;margin:2rem auto 0;height:170px}
.tier{position:absolute;left:50%;transform:translateX(-50%);border-top:10px solid var(--paper)}
.t1{bottom:0;width:200px;height:70px;background:var(--wine)}.t2{bottom:70px;width:140px;height:50px;background:var(--crimson)}
.candles{position:absolute;bottom:120px;width:100%;display:flex;justify-content:center;gap:28px;z-index:2}
.candle{width:10px;height:40px;background:var(--paper);position:relative;cursor:pointer;border:0}
.candle::before{content:"";position:absolute;top:-18px;left:-1px;width:12px;height:18px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(#fff3b0,#e8a33d);box-shadow:0 0 14px #e8a33d;animation:api .25s infinite alternate}
.candle.out::before{display:none}
.candle.out::after{content:"";position:absolute;top:-8px;left:2px;width:6px;height:6px;border-radius:50%;background:#bbb;animation:asap 1.2s ease-out forwards}
@keyframes api{to{scale:1.15 .9}}@keyframes asap{to{translate:6px -40px;scale:3;opacity:0}}
.night{background:linear-gradient(#2a0a12,#5a0f1e);color:var(--paper)}.night .hand{color:var(--gold)}
.bintang{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);animation:kedip 2s infinite;pointer-events:none;z-index:0}
@keyframes kedip{50%{opacity:.1;scale:.4}}
/* navigasi & musik */
#nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;background:#2a0a12f2;border-top:1px solid var(--gold);z-index:20;color:var(--paper)}
#nav span{font-size:.85rem;letter-spacing:.08em}
#musik{position:fixed;right:14px;bottom:72px;width:44px;height:44px;border-radius:50%;background:var(--wine);border:1px solid var(--gold);display:grid;place-items:center;cursor:pointer;z-index:30}
#musik svg{width:20px;fill:var(--paper);grid-area:1/1}
#musik .ik-jeda{display:none}#musik.main .ik-play{display:none}#musik.main .ik-jeda{display:block}
#musik.main::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold);animation:cincin 1.6s ease-out infinite}
@keyframes cincin{to{scale:1.8;opacity:0}}
/* latar melayang & efek */
#hati{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.h{position:absolute;bottom:-40px;opacity:0;animation:naik linear infinite}
.h svg{display:block;width:100%}.h.d{border-radius:50%;background:var(--gold)}
@keyframes naik{0%{transform:translate(0,0);opacity:0}10%{opacity:.5}50%{transform:translate(18px,-55vh)}90%{opacity:.25}100%{transform:translate(-12px,-115vh);opacity:0}}
.pecah{position:fixed;pointer-events:none;z-index:60;animation:pecah .9s ease-out forwards}
.pecah svg{display:block;width:100%}
@keyframes pecah{to{translate:var(--dx) var(--dy);scale:.3;opacity:0}}
.conf{position:fixed;top:-12px;width:7px;height:11px;z-index:40;animation:jatuh 2.6s linear forwards}
@keyframes jatuh{to{transform:translateY(110vh) rotate(300deg)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}