@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500;1,600&display=swap');

:root{
  --cream:#f6efe0; --gold:#d4ad62; --deep:#21110f; --wine:#5c2525;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#160b0a;color:var(--cream)}
body{font-family:"Cormorant Garamond",Georgia,serif}
button{font:inherit}
#book{height:100dvh;width:100%;position:relative;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.035);transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.7,.2,1),visibility .9s;overflow:hidden}
.slide.active{opacity:1;visibility:visible;transform:scale(1)}
.scene{position:absolute;inset:-2%;background-size:cover;background-position:center;filter:saturate(.78) sepia(.15) contrast(.94);animation:slowzoom 14s ease-in-out infinite alternate}
.opening-bg{background-image:url("assets/opening.jpg")}
.gate-bg{background-image:url("assets/gate.jpg")}
.greeting-bg{background-image:url("assets/greeting.jpg")}
.couple-bg{background-image:url("assets/couple.jpg");background-position:center 42%}
@keyframes slowzoom{to{transform:scale(1.06)}}
.grain{pointer-events:none;position:fixed;z-index:20;inset:0;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,242,225,.48),rgba(250,242,225,.66) 55%,rgba(52,20,15,.25));backdrop-filter:blur(1px)}
.veil.dark{background:linear-gradient(180deg,rgba(20,8,7,.22),rgba(20,8,7,.63))}
.mist{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.2),transparent 42%),linear-gradient(180deg,rgba(255,250,235,.45),transparent 52%,rgba(30,10,8,.12));animation:mist 8s ease-in-out infinite alternate}
@keyframes mist{to{opacity:.55;transform:scale(1.04)}}
.birds{position:absolute;top:20%;left:0;right:0;text-align:center;letter-spacing:28px;opacity:.35;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-9px)}}
.hero,.card,.couple-wrap,.event-card,.reception,.closing{position:absolute;z-index:3;text-align:center}
.hero{left:8%;right:8%;top:44%;transform:translateY(-50%);text-shadow:0 2px 18px rgba(80,40,20,.18)}
.eyebrow,.section-kicker{font-family:Cinzel,serif;letter-spacing:.28em;font-size:10px;color:#6b4931}
.hero h1{font-family:Cinzel,serif;font-size:clamp(30px,9vw,66px);font-weight:500;letter-spacing:.08em;margin:12px 0;color:#6a3027}
.hero h1 i{font-family:"Cormorant Garamond";font-weight:400;color:#b88b4e}
.gold-line{width:80px;height:1px;background:var(--gold);margin:18px auto}
.hero p{font-size:18px;line-height:1.35;color:#654638}
.ornament{color:#bd9550;letter-spacing:9px;font-size:21px}
.top{position:absolute;top:8%;left:0;right:0;text-align:center;z-index:2;opacity:.6}
.enter,.next,.restart,.map{position:absolute;z-index:5;border:1px solid rgba(188,147,78,.7);background:rgba(255,248,231,.8);color:#5b3427;padding:11px 20px;border-radius:2px;letter-spacing:.08em;cursor:pointer;box-shadow:0 8px 30px rgba(60,25,10,.12);transition:.25s}
.enter{bottom:9%;left:50%;transform:translateX(-50%);font-size:14px}
.enter:hover,.next:hover,.restart:hover,.map:hover{transform:translateX(-50%) translateY(-2px);background:#fff9ed}
.enter span{margin-left:12px}.next{bottom:7%;right:7%;font-size:14px}.next b{margin-left:9px}
.card{left:9%;right:9%;top:50%;transform:translateY(-50%);padding:30px 18px;background:rgba(255,250,239,.74);border:1px solid rgba(164,122,62,.25);box-shadow:0 25px 70px rgba(70,30,10,.12)}
.card h2{font-size:25px;font-weight:500;color:#5e3028;margin:13px 0}.card h2 em{font-style:italic}.card p{font-size:18px;line-height:1.45;max-width:470px;margin:15px auto;color:#6b4a3b}.arabic{font-size:20px;color:#7b553c;margin-top:8px}
.wayang{position:absolute;z-index:2;width:31vw;height:65vh;bottom:-8%;opacity:.65;background-repeat:no-repeat;background-position:center;background-size:contain;filter:sepia(1) saturate(.65)}
.wayang.left{left:-9%;background-image:url("assets/title.jpg");clip-path:inset(0 48% 0 0)}
.wayang.right{right:-9%;transform:scaleX(-1);background-image:url("assets/title.jpg");clip-path:inset(0 48% 0 0)}
.darkwash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,9,8,.12),rgba(20,9,8,.72))}
.couple-wrap{left:5%;right:5%;top:11%;bottom:11%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;color:#f7ead4}
.couple-wrap .section-kicker{color:#e0c487}
.couple-wrap h2{font-family:Cinzel;font-weight:500;font-size:34px;margin:10px 0 25px}.couple-wrap h2 span{color:#d5af66}
.names{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;margin-top:auto;margin-bottom:3vh}
.names article{width:min(38vw,180px)}.portrait{width:min(28vw,120px);height:min(28vw,120px);margin:auto;border-radius:50%;border:1px solid #d3b06c;display:grid;place-items:center;font-family:Cinzel;font-size:38px;background:rgba(0,0,0,.3);box-shadow:0 0 0 7px rgba(255,255,255,.05)}
.p1{background:linear-gradient(135deg,#36241f,#846044)}.p2{background:linear-gradient(135deg,#201616,#755035)}
.names h3{font-size:27px;margin:8px 0 0}.names p{font-size:15px;line-height:1.2;opacity:.85}.names strong{font-weight:500}.amp{font-size:36px;color:#d7b46d;margin-top:-35px}
.paper{position:absolute;inset:0;background:rgba(248,238,217,.2)}
.event-card{left:8%;right:8%;top:50%;transform:translateY(-50%);padding:30px 18px;background:rgba(251,242,222,.86);color:#5a3428;border:1px solid rgba(156,112,52,.28)}
.event-card .section-kicker{color:#7a563d}.event-card h2{font-size:28px;font-weight:500;margin:8px}.event-card h2 span{color:#8b5d3c}.date{font-family:Cinzel;letter-spacing:.15em;color:#8c653d;font-size:18px}.date small{font-size:10px;color:#b78d4c;margin:0 8px}.rule{height:1px;background:#c9a96d;width:90px;margin:17px auto}.label{font-family:Cinzel;letter-spacing:.18em;font-size:9px;margin:11px 0 3px;color:#92704d}.big{font-size:19px;margin:0}.muted{font-size:15px;opacity:.75;margin-top:5px}
.reception{top:17%;left:7%;right:7%;color:#f7ead4}.reception .section-kicker{color:#e2c889}.reception h2{font-family:Cinzel;font-weight:500;font-size:31px;line-height:1.1;margin:10px 0 28px}.reception h2 i{font-family:"Cormorant Garamond";font-size:29px}
.info-grid{border-top:1px solid rgba(222,190,124,.55);border-bottom:1px solid rgba(222,190,124,.55);padding:15px 0}.info-grid div{padding:8px}.info-grid span{display:block;font-family:Cinzel;font-size:9px;letter-spacing:.18em;color:#d7bb85}.info-grid b{display:block;font-size:19px;font-weight:500}.info-grid small{display:block;font-size:14px;opacity:.8;margin-top:2px}.map{position:static;margin-top:20px;background:rgba(255,244,220,.88)}
.closing{left:9%;right:9%;top:50%;transform:translateY(-50%);padding:30px 15px;color:#f7ead4}.closing .ornament{color:#e0bf7b}.closing h2{font-family:Cinzel;font-size:39px;font-weight:500;margin:12px}.closing p{font-size:20px;line-height:1.35}.signature{font-family:Cinzel;font-size:22px;letter-spacing:.15em;margin-top:30px}.signature span{color:#d8b36a}.closing small{font-size:14px;line-height:1.4;opacity:.82}
.dots{position:fixed;z-index:30;left:50%;bottom:2.5%;transform:translateX(-50%);display:flex;gap:6px}.dot{width:5px;height:5px;border-radius:50%;background:rgba(255,239,210,.35);transition:.3s}.dot.active{width:18px;border-radius:5px;background:#d9b56e}
.music{position:fixed;z-index:40;right:16px;top:16px;width:36px;height:36px;border:1px solid rgba(220,190,125,.5);border-radius:50%;display:grid;place-items:center;background:rgba(35,13,11,.35);color:#e2c383;cursor:pointer}
.progress{position:fixed;z-index:40;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.1)}.progress span{display:block;height:100%;width:0;background:#d9b56e;transition:width .7s}
@media (min-width:800px){
  #book{max-width:520px;margin:auto;box-shadow:0 0 90px rgba(0,0,0,.55)}
  body{background:radial-gradient(circle at center,#3a211a,#100807 70%)}
}
@media (max-height:650px){.hero{top:42%}.hero p{font-size:15px}.card{padding:18px}.couple-wrap{top:7%}.names{margin-bottom:0}.portrait{width:90px;height:90px}}