:root{--ink:#333b37;--muted:#7b8076;--cream:#f7f4ed;--paper:#fbfaf6;--gold:#b99b61;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}.cover{height:100svh;min-height:650px;position:relative;overflow:hidden;color:#fff;display:grid;place-items:center;background:#596c6e}.cover-photo,.cover-shade{position:absolute;inset:0}.cover-photo{background:url('assets/couple-by-the-sea.jpg') center 51%/cover;transform:scale(1.025);animation:cover-in 1.6s ease both}.cover-shade{background:linear-gradient(180deg,rgba(20,32,36,.13),rgba(19,31,33,.57) 65%,rgba(15,25,27,.68))}.cover-frame{position:relative;text-align:center;width:min(88%,520px);min-height:72%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:35px 18px;border:1px solid rgba(246,221,167,.53);outline:1px solid rgba(246,221,167,.21);outline-offset:7px;animation:fade-up .9s .15s both}.eyebrow{font-size:9px;letter-spacing:.27em;color:var(--gold);font-weight:500}.eyebrow.light{color:#f2e6c6}.ornament{color:#e0c786;font-size:17px;margin:28px 0 10px}.cover h1{font:400 clamp(58px,12vw,88px)/.94 var(--serif);letter-spacing:-.045em;margin:0;text-shadow:0 3px 25px #10212640}.cover h1 em{font-size:.55em;color:#e4cc91;font-weight:400}.cover-date{letter-spacing:.3em;font-size:11px;margin:24px 0 36px;color:#f8f1df}.cover-date span{padding:0 8px;color:#e0c786}.open-invite{display:flex;gap:29px;align-items:center;border:1px solid #e4d4ab;background:#f8f4eb;color:#44443b;padding:15px 20px;font-size:10px;letter-spacing:.12em;cursor:pointer;transition:.3s}.open-invite:hover{background:#e8d5a6;transform:translateY(-2px)}.open-invite b{font-size:15px;color:#a88b51;font-weight:300}.cover-foot{position:absolute;bottom:18px;font:italic 12px var(--serif);color:#eee3cb}.gold-glint{position:absolute;width:40vw;height:160%;top:-30%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,230,175,.13),transparent);transform:rotate(12deg);pointer-events:none}.cover.glow .gold-glint{animation:glint 1.5s ease}.music-toggle{position:fixed;z-index:10;right:17px;top:17px;border:1px solid #b99b6170;background:#fbfaf0de;color:var(--ink);border-radius:30px;padding:9px 12px;display:flex;gap:8px;align-items:center;font-size:9px;letter-spacing:.1em;cursor:pointer;backdrop-filter:blur(8px)}.music-bars{height:13px;display:flex;gap:2px;align-items:center}.music-bars i{width:2px;height:5px;background:var(--gold)}.playing .music-bars i{animation:wave .6s infinite alternate}.playing .music-bars i:nth-child(2){animation-delay:.2s}.playing .music-bars i:nth-child(3){animation-delay:.35s}.playing .music-bars i:nth-child(4){animation-delay:.1s}.invitation{display:none;opacity:0}.invitation.open{display:block;animation:fade-up .8s forwards}.section-pad{padding:110px 8vw}.welcome{text-align:center;min-height:650px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--paper);position:relative}.tiny-rule{width:48px;height:1px;background:#d5c5a1;margin:26px}.tiny-rule i{display:block;width:5px;height:5px;background:var(--gold);transform:translate(22px,-2px) rotate(45deg)}h2{font:400 clamp(38px,8vw,61px)/1.13 var(--serif);letter-spacing:-.04em;margin:20px 0;color:#444c44}h2 em{font-weight:400;color:#a48d60}.message{font:300 15px/1.9 var(--serif);max-width:380px;color:#74786e;margin:23px auto}.signature{font:italic 25px var(--serif);color:#9e865b;margin:13px}.signature span{font-size:17px}.scroll-cue{position:absolute;bottom:29px;color:#86887c;text-decoration:none;font-size:9px;letter-spacing:.14em;display:flex;flex-direction:column;align-items:center;gap:10px}.scroll-cue i{height:27px;width:1px;background:linear-gradient(var(--gold),transparent);animation:scroll 1.5s infinite}.date-section{background:#f0ede4;display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;min-height:560px}.date-copy{max-width:400px}.date-copy p{font:italic 14px var(--serif);color:var(--muted)}.scratch-card{width:min(100%,390px);height:300px;position:relative;justify-self:center;background:#f9f7f0;box-shadow:0 22px 60px #4c44301a;overflow:hidden;text-align:center}.scratch-under{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse,#fffdf7,#eee9dc)}.scratch-under strong{font:400 95px/.98 var(--serif);color:#9f8859}.month{font-size:10px;letter-spacing:.27em;color:#77786d}.date-blessing{font:italic 12px var(--serif);color:#9c957f;margin-top:19px}.scratch-card canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;transition:opacity .8s}.reveal-date{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);border:0;background:#fffdf1d9;border-radius:20px;padding:8px 14px;color:#72664d;font-size:9px;letter-spacing:.1em;z-index:2}.scratch-card.scratched canvas,.scratch-card.scratched .reveal-date{opacity:0;pointer-events:none}.petals{position:absolute;inset:0;pointer-events:none}.petal{position:absolute;top:45%;left:50%;width:11px;height:17px;border-radius:100% 0 100% 0;background:#d8bd93;opacity:0;animation:petal 1.6s ease-out forwards}.countdown{text-align:center;background:#faf9f5}.countdown h2{font-size:clamp(33px,6vw,48px);margin:16px 0 42px}.timer{display:flex;justify-content:center;align-items:center;gap:clamp(14px,5vw,45px)}.timer div{display:flex;flex-direction:column;gap:8px}.timer b{font:400 clamp(35px,8vw,60px)/1 var(--serif);color:#9c8358}.timer span{font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:#8e9086}.timer>i{height:34px;width:1px;background:#d8d1c2}.portrait-section{padding:110px 8vw 90px;display:grid;grid-template-columns:1fr 1fr;gap:40px 7vw;align-items:center;background:#f0ede4}.portrait-intro{grid-column:1/-1;text-align:center;margin-bottom:15px}.portrait-intro h2{margin-top:14px}.photo{margin:0}.photo img{width:100%;display:block;object-fit:cover;box-shadow:0 14px 35px #292d2717}.photo-one img{aspect-ratio:4/5;object-position:48% 55%}.photo-two{margin-top:70px}.photo-two img{aspect-ratio:4/5;object-position:50% 56%}.photo figcaption{font:italic 13px/1.6 var(--serif);color:#77786f;text-align:center;margin-top:16px}.gallery{text-align:center;background:#faf9f5}.gallery h2{font-size:clamp(34px,6vw,48px);margin-bottom:40px}.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;max-width:850px;margin:auto}.gallery-grid img{width:100%;height:330px;object-fit:cover}.gallery-grid img:first-child{object-position:center 45%}.gallery-grid img:last-child{object-position:center 58%}.venue{text-align:center;position:relative;overflow:hidden;background:#e9e5d9;padding-top:105px;padding-bottom:105px}.venue:before,.venue:after{content:'✳';position:absolute;color:#d0c4a4;font-size:110px;opacity:.17}.venue:before{left:-35px;top:20px}.venue:after{right:-30px;bottom:12px}.venue-mark{color:#ae9664;font-size:21px;margin-bottom:22px}.venue h2{font-size:clamp(38px,7vw,57px)}.venue-rule{height:1px;background:#c7b994;width:46px;margin:28px auto}.venue-date{font:italic 20px var(--serif);color:#625e50;margin:0 0 13px}.venue-time,.venue-name{font-size:11px;letter-spacing:.16em;margin:10px;color:#737468}.venue-name{font:italic 19px var(--serif);letter-spacing:0;color:#9c8358;margin-top:20px}.venue-note{font:italic 14px var(--serif);color:#77786f;margin:26px 0}.map-button{display:inline-flex;align-items:center;gap:25px;color:#4d5148;border:1px solid #a99465;text-decoration:none;padding:14px 19px;font-size:10px;letter-spacing:.12em;transition:.25s}.map-button:hover{background:#a99465;color:white}.map-button span{font-size:15px}footer{text-align:center;background:#f9f7f1;padding:65px 20px 55px}footer .footer-flower{color:#b39c6c;font-size:19px}footer p{font:italic 14px var(--serif);color:#838276;margin:15px 0 2px}footer h2{font-size:36px;margin:5px}footer h2 em{font-size:.7em}footer>span{font-size:8px;letter-spacing:.22em;color:#9a998e}.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}@keyframes fade-up{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@keyframes cover-in{from{transform:scale(1.08);filter:brightness(.8)}to{transform:scale(1.025);filter:brightness(1)}}@keyframes glint{0%{left:-60%}100%{left:130%}}@keyframes wave{to{height:13px}}@keyframes scroll{50%{transform:scaleY(.6);transform-origin:top}}@keyframes petal{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}20%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(520deg) scale(1)}}@media(max-width:700px){.cover{min-height:600px}.cover-photo{background-position:48% center}.cover-frame{min-height:65%;width:83%;padding:20px 12px}.cover h1{font-size:68px}.section-pad{padding:85px 8vw}.welcome{min-height:600px}.date-section{grid-template-columns:1fr;gap:30px;text-align:center;padding-top:80px;padding-bottom:85px}.date-copy{margin:auto}.scratch-card{height:285px}.portrait-section{gap:28px 15px;padding-left:6vw;padding-right:6vw}.portrait-intro{margin-bottom:0}.photo-two{margin-top:45px}.gallery-grid{gap:9px}.gallery-grid img{height:220px}.venue{padding-left:7vw;padding-right:7vw}.music-toggle{right:12px;top:12px}.timer{gap:clamp(12px,4vw,24px)}.timer b{font-size:clamp(31px,9vw,48px)}.timer span{font-size:7px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Ambient motion and refined entrances */
.cover-petals{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cover-petal{position:absolute;top:110%;left:var(--x);width:9px;height:14px;border-radius:100% 0 100% 0;background:#efd9ab;opacity:0;filter:drop-shadow(0 2px 4px #233);animation:drift var(--duration) linear var(--delay) infinite}
.cover-frame{backdrop-filter:blur(1px)}
.cover h1{animation:name-in 1.2s .25s both}
.ornament{animation:turn-in 1.2s .5s both}
.cover-date{animation:fade-up .8s .75s both}
.open-invite{animation:fade-up .8s .95s both}
.cover-foot{animation:fade-up .8s 1.1s both}
.gold-glint{animation:glint 8s 2.5s ease-in-out infinite}
.photo img{transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .8s}
.photo img:hover{transform:scale(1.025);filter:saturate(1.08)}
.photo.reveal img{clip-path:inset(8% 0 8%);transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1),transform 1s}
.photo.reveal.visible img{clip-path:inset(0)}
@keyframes name-in{from{opacity:0;letter-spacing:.08em;filter:blur(6px);transform:translateY(12px)}to{opacity:1;letter-spacing:-.045em;filter:blur(0);transform:none}}
@keyframes turn-in{from{opacity:0;transform:rotate(-80deg) scale(.5)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes drift{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}10%{opacity:.65}85%{opacity:.5}100%{opacity:0;transform:translate3d(var(--sway),-120vh,0) rotate(550deg)}}
@media(prefers-reduced-motion:reduce){.cover-petal{display:none}.gold-glint{animation:none}.photo.reveal img{clip-path:none}}

/* Date reveal: the date stays covered until the visitor scratches or taps. */
.scratch-under{clip-path:inset(0 0 100% 0);transform:scale(.96);opacity:.55;transition:clip-path .75s cubic-bezier(.2,.75,.2,1),transform .75s cubic-bezier(.2,.75,.2,1),opacity .55s}
.scratch-card.scratched .scratch-under{clip-path:inset(0);transform:scale(1);opacity:1;animation:date-open .8s cubic-bezier(.2,.75,.2,1) both}
.scratch-card.scratched .scratch-under .eyebrow{animation:date-text-in .6s .18s both}
.scratch-card.scratched .scratch-under strong{animation:date-number-in .8s .25s cubic-bezier(.2,.8,.2,1) both}
.scratch-card.scratched .scratch-under .month{animation:date-text-in .65s .42s both}
.scratch-card.scratched .scratch-under .date-blessing{animation:date-text-in .65s .55s both}
@keyframes date-open{0%{clip-path:inset(0 0 100% 0);transform:scale(.94);filter:blur(5px)}65%{clip-path:inset(0);transform:scale(1.015);filter:blur(0)}100%{transform:scale(1)}}
@keyframes date-number-in{from{opacity:0;transform:translateY(18px) scale(.82);filter:blur(5px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes date-text-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.scratch-card.scratched .scratch-under,.scratch-card.scratched .scratch-under>*{animation:none!important}}

/* Invitation action buttons */
.reveal-date{font-weight:500;box-shadow:0 3px 14px #453a2420;animation:cta-pulse 2.4s ease-in-out infinite;overflow:hidden}
.reveal-date:after,.map-button:after{content:"";position:absolute;inset:0;transform:translateX(-130%);background:linear-gradient(110deg,transparent,rgba(255,255,255,.55),transparent);pointer-events:none}
.reveal-date:after{animation:button-shine 3.8s 1s ease-in-out infinite}
.map-button{position:relative;overflow:hidden;font-weight:600;box-shadow:0 0 0 rgba(169,148,101,0);transition:transform .28s ease,background .28s ease,color .28s ease,box-shadow .28s ease}
.map-button:after{animation:button-shine 4.6s 1.8s ease-in-out infinite}
.map-button:hover{transform:translateY(-3px);box-shadow:0 8px 24px #67583224}
@keyframes cta-pulse{0%,100%{transform:translateX(-50%) scale(1);box-shadow:0 3px 14px #453a2420}50%{transform:translateX(-50%) scale(1.045);box-shadow:0 5px 20px #a8905b45}}
@keyframes button-shine{0%,60%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}}
@media(prefers-reduced-motion:reduce){.reveal-date,.reveal-date:after,.map-button:after{animation:none}.map-button:hover{transform:none}}

.bismillah{display:block;width:min(320px,76vw);height:132px;object-fit:cover;object-position:center 55%;margin:0 auto 8px}
@media(max-width:700px){.bismillah{width:min(290px,78vw);height:120px}}

/* Compact, safe-area-aware layout across iPhone, Android, tablet, and desktop. */
.date-section{min-width:0}
.scratch-card{width:min(100%,390px);min-width:0}
.scratch-card canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media(max-width:700px){.date-section{padding-left:max(8vw,20px);padding-right:max(8vw,20px);padding-bottom:calc(85px + env(safe-area-inset-bottom))}.date-copy h2{font-size:clamp(36px,9vw,52px)}.date-copy p{font-size:clamp(13px,3.8vw,15px)}.scratch-card{width:100%;max-width:390px;height:clamp(245px,70vw,300px)}}
@media(min-width:701px) and (max-width:950px){.date-section{gap:28px;padding-left:6vw;padding-right:6vw}.scratch-card{max-width:360px}}

/* Remove decorative venue symbols that iOS renders as green emoji tiles. */
.venue:before,.venue:after{content:none!important;display:none!important}