*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;position:fixed;inset:0;overscroll-behavior:none;touch-action:none;background:#f8f2eb;color:#443631;font-family:Poppins,sans-serif}
.page{position:fixed;inset:0;width:100%;height:100%;display:grid;place-items:center;text-align:center;opacity:0;visibility:hidden;transform:translateX(8%);transition:opacity .65s ease,transform .75s cubic-bezier(.2,.75,.2,1);overflow:hidden;padding:55px 28px}
.page.active{opacity:1;visibility:visible;transform:translateX(0);z-index:2}.page.leaving{opacity:0;transform:translateX(-8%)}
.page.rose{background:radial-gradient(circle at 50% 35%,#fffaf5 0,#f1e0d5 48%,#e5c3b8 100%)}.cover{background:linear-gradient(135deg,#6b2938,#a86167 52%,#e4c5ae);color:#fff}
.frame{position:absolute;inset:18px;border:1px solid #ffffff66;pointer-events:none}.content{position:relative;z-index:2;max-width:1050px;width:100%;animation:contentIn .9s both}.page.active .content{animation:contentIn .9s .12s both}.narrow{max-width:650px}
.bismillah{font-size:23px;margin-bottom:22px}.tiny{letter-spacing:5px;font-size:10px}.page h1{font:400 clamp(72px,13vw,145px) "Great Vibes",cursive;line-height:.95;margin:12px 0}.page h1 i,.signature i{font:400 .55em "Cormorant Garamond";font-style:italic}
.page h2{font:500 clamp(43px,7vw,66px) "Cormorant Garamond",serif;margin:0 0 18px}.sub{font:300 13px Poppins;letter-spacing:3px}.script{font:400 42px "Great Vibes",cursive;color:#a55d67;margin:0 0 4px}.cover .script{color:#fff}
.divider{font-size:35px;color:#a55d67;margin:20px}.content p:not(.script):not(.sub):not(.tiny){line-height:2;font-size:14px}.quote{font:italic 24px "Cormorant Garamond"!important;margin:30px 0 4px}.arabic{font-size:22px!important}
.primary,.next{border:0;cursor:pointer;border-radius:40px;padding:14px 30px;font:500 11px Poppins;letter-spacing:2px;text-decoration:none;display:inline-block}.primary{background:#fff;color:#713343;margin-top:24px}.next{background:#713343;color:#fff;margin-top:28px}
.couple{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;max-width:760px;margin:35px auto}.portrait{width:220px;height:270px;margin:auto;border-radius:120px 120px 20px 20px;background:linear-gradient(145deg,#bc8a7f,#754451);display:grid;place-items:center;color:#fff;letter-spacing:4px}.portrait.bride{background:linear-gradient(145deg,#d9b3a0,#99616c)}
.couple h3,.events h3,.venue h3{font:500 34px "Cormorant Garamond";margin:10px 0 0}.couple small,.events small{font-size:9px;letter-spacing:3px}.amp{font:400 42px "Great Vibes";color:#a55d67}
.calendar{margin:25px auto;width:175px;border:1px solid #d7c4b8;background:#fff;padding:16px}.calendar b,.calendar span{display:block;letter-spacing:3px;font-size:10px}.calendar strong{display:block;font:500 78px "Cormorant Garamond";line-height:1;color:#7b3848}
.countdown{display:flex;justify-content:center;gap:10px}.countdown div{min-width:105px;padding:14px;background:#fff;border:1px solid #e0d1c6}.countdown b{font:500 40px "Cormorant Garamond";display:block;color:#7b3848}.countdown small{font-size:8px;letter-spacing:2px}
.events{display:grid;grid-template-columns:repeat(3,1fr);max-width:950px;margin:30px auto;gap:15px}.events>div{background:#fff;padding:27px 15px;border:1px solid #e4d4c9}.events .main-event{transform:translateY(-10px);box-shadow:0 15px 35px #6d344018}.events span{font-size:25px}.events b{display:block;font:500 16px "Cormorant Garamond"}.events small{display:block;color:#9a8980;margin-top:7px}
.venue{background:linear-gradient(135deg,#5d2634,#8b4d59);color:#fff}.venue .script{color:#f1cfc1}.venue-icon{font-size:52px}.venue h3{font-size:38px}.venue .next{background:#fff;color:#6d2c3d}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:850px;margin:30px auto}.gallery div{min-height:180px;display:grid;place-items:center;background:linear-gradient(145deg,#bd8a80,#8a505b);color:#fff;font:500 17px "Cormorant Garamond";letter-spacing:2px}.gallery div:nth-child(2){background:linear-gradient(145deg,#dfc4ad,#9c6b73)}.gallery div:nth-child(3){background:linear-gradient(145deg,#9b6972,#d6ad9e)}.gallery div:nth-child(4){background:linear-gradient(145deg,#e3cdbb,#9c6870)}.gallery span{font-size:26px}.hint{font-size:10px!important;color:#95847b}
.signature{font:400 54px "Great Vibes";color:#8b4051;margin:25px}.rsvp form{display:grid;gap:12px;max-width:440px;margin:25px auto}.rsvp input,.rsvp select{padding:15px;border:1px solid #d7c7bc;background:#fff;font:inherit;outline:0}.rsvp .primary{background:#713343;color:#fff;border:0;margin:0}.rsvp #thanks{color:#7b3848;font-size:13px;min-height:20px}.big-heart{font-size:55px;color:#9e4d5d;animation:pulse 1.8s infinite}
.topbar{position:fixed;top:20px;left:25px;right:25px;z-index:20;display:flex;justify-content:space-between;align-items:center;color:#713343;font-size:10px;letter-spacing:2px}.topbar button{width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#713343;box-shadow:0 5px 18px #0001;cursor:pointer;font-size:17px}
.nav{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:20px}.nav button{border:0;background:#fff;color:#713343;border-radius:50%;width:42px;height:42px;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 5px 18px #0002}.nav button:disabled{opacity:.3;cursor:default}.nav #dots{display:flex;gap:6px}.dot{width:6px;height:6px;border-radius:50%;background:#bda7a0}.dot.active{background:#713343;transform:scale(1.5)}
#loader{position:fixed;inset:0;background:#faf5ef;z-index:100;display:grid;place-content:center;text-align:center;color:#713343;font-size:11px;letter-spacing:2px}.loader-mark{font:55px "Great Vibes";animation:pulse 1s infinite;margin-bottom:10px}
@keyframes pulse{50%{transform:scale(1.13)}}@keyframes contentIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}.floral{position:absolute;font-size:80px;color:#fff4;z-index:1}.f1{left:5%;top:12%;transform:rotate(-25deg)}.f2{right:5%;bottom:12%;transform:rotate(20deg)}
@media(max-width:700px){.page{padding:55px 20px 70px}.bismillah{font-size:18px}.couple{grid-template-columns:1fr;gap:7px}.amp{margin:0}.portrait{width:165px;height:205px}.events{grid-template-columns:1fr;gap:8px}.events .main-event{transform:none}.events>div{padding:15px}.gallery{grid-template-columns:repeat(2,1fr);gap:7px}.gallery div{min-height:130px}.countdown div{min-width:72px;padding:10px 4px}.countdown b{font-size:31px}.page h2{font-size:44px}.script{font-size:35px}.topbar{top:12px;left:15px;right:15px}.frame{inset:9px}.nav{bottom:13px}.nav #dots{gap:4px}}

/* ===== PREMIUM PAGE TRANSITIONS ===== */
#pageTransition{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;opacity:0}
#pageTransition:before,#pageTransition:after{content:"";position:absolute;top:0;bottom:0;width:52%;background:linear-gradient(135deg,#5d2634,#9b5963,#e6c7b4);transition:transform .48s cubic-bezier(.77,0,.18,1)}
#pageTransition:before{left:0;transform:translateX(-105%);border-radius:0 45% 45% 0}
#pageTransition:after{right:0;transform:translateX(105%);border-radius:45% 0 0 45%}
#pageTransition.go:before{transform:translateX(0)}#pageTransition.go:after{transform:translateX(0)}
#pageTransition.exit:before{transform:translateX(-105%);transition-delay:.12s}#pageTransition.exit:after{transform:translateX(105%);transition-delay:.12s}
#pageTransition .transition-mark{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%) scale(.5);opacity:0;color:#fff;font:62px "Great Vibes",cursive;text-shadow:0 8px 30px #2d0d1644;transition:all .35s ease .08s}
#pageTransition.go .transition-mark{opacity:1;transform:translate(-50%,-50%) scale(1)}
#pageTransition.exit .transition-mark{opacity:0;transform:translate(-50%,-50%) scale(1.5);transition-delay:0s}
.page.enter-next{animation:pageEnterNext .82s cubic-bezier(.16,.82,.24,1) both!important}
.page.enter-prev{animation:pageEnterPrev .82s cubic-bezier(.16,.82,.24,1) both!important}
.page.enter-next .content{animation:contentNext 1s .16s cubic-bezier(.16,.82,.24,1) both!important}
.page.enter-prev .content{animation:contentPrev 1s .16s cubic-bezier(.16,.82,.24,1) both!important}
.page.enter-next .script,.page.enter-next h2,.page.enter-next .divider,.page.enter-next .quote,.page.enter-next .arabic,.page.enter-next .couple,.page.enter-next .calendar,.page.enter-next .countdown,.page.enter-next .events,.page.enter-next .venue-icon,.page.enter-next .gallery,.page.enter-next form,.page.enter-next .signature,.page.enter-next .big-heart,.page.enter-next .next,.page.enter-next .primary{animation:staggerUp .72s both;animation-delay:calc(.28s + var(--i,0)*.08s)}
.page.enter-prev .script,.page.enter-prev h2,.page.enter-prev .divider,.page.enter-prev .quote,.page.enter-prev .arabic,.page.enter-prev .couple,.page.enter-prev .calendar,.page.enter-prev .countdown,.page.enter-prev .events,.page.enter-prev .venue-icon,.page.enter-prev .gallery,.page.enter-prev form,.page.enter-prev .signature,.page.enter-prev .big-heart,.page.enter-prev .next,.page.enter-prev .primary{animation:staggerDown .72s both;animation-delay:calc(.28s + var(--i,0)*.08s)}
.page.enter-next .portrait,.page.enter-next .events>div,.page.enter-next .gallery>div,.page.enter-next .countdown>div{animation:cardPop .72s both;animation-delay:calc(.35s + var(--i,0)*.1s)}
.page.enter-next .floral,.page.enter-next .frame{animation:decorIn 1.2s .15s both}
.page.active .content{will-change:transform,opacity}
.page .next,.page .primary{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.page .next:hover,.page .primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 28px #5c263422}
.page .next:after,.page .primary:after{content:"";position:absolute;inset:-60%;background:linear-gradient(100deg,transparent 35%,#ffffff66 50%,transparent 65%);transform:translateX(-65%) rotate(15deg);transition:transform .7s ease}
.page .next:hover:after,.page .primary:hover:after{transform:translateX(65%) rotate(15deg)}
.particle{position:fixed;z-index:85;pointer-events:none;color:#fff;opacity:0;font-size:10px;animation:particleFly 1.35s ease-out forwards}
@keyframes pageEnterNext{0%{opacity:0;transform:translate3d(9%,0,0) scale(.985);filter:blur(7px)}55%{opacity:1;transform:translate3d(-1%,0,0) scale(1.008);filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes pageEnterPrev{0%{opacity:0;transform:translate3d(-9%,0,0) scale(.985);filter:blur(7px)}55%{opacity:1;transform:translate3d(1%,0,0) scale(1.008);filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes contentNext{0%{opacity:0;transform:translate3d(0,45px,0) scale(.92) rotateX(8deg)}55%{opacity:1;transform:translate3d(0,-7px,0) scale(1.015) rotateX(0)}100%{opacity:1;transform:none}}
@keyframes contentPrev{0%{opacity:0;transform:translate3d(0,-45px,0) scale(.92) rotateX(-8deg)}55%{opacity:1;transform:translate3d(0,7px,0) scale(1.015) rotateX(0)}100%{opacity:1;transform:none}}
@keyframes staggerUp{0%{opacity:0;transform:translateY(26px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes staggerDown{0%{opacity:0;transform:translateY(-26px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes cardPop{0%{opacity:0;transform:translateY(30px) scale(.84) rotate(-2deg)}70%{opacity:1;transform:translateY(-5px) scale(1.025) rotate(.5deg)}100%{opacity:1;transform:none}}
@keyframes decorIn{0%{opacity:0;transform:scale(.6) rotate(-18deg)}100%{opacity:1;transform:none}}
@keyframes particleFly{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}18%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.4) rotate(180deg)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.page.enter-next,.page.enter-prev{animation:none!important}}