/* =====================================================================
   Mahmoud Bayan — wedding stationery styles
   ===================================================================== */
:root{
  --ivory:#FCF7EF;
  --cream:#F5EBDD;
  --beige:#E9DAC3;
  --champagne:#C9A96B;
  --gold:#A68545;
  --gold-deep:#8C6B34;
  --brown:#5B402A;
  --brown-soft:#7D6047;
  --red:#B42318;
  --line:rgba(166,133,69,.45);

  --f-display:"Aref Ruqaa","Amiri",serif;
  --f-body:"Amiri","Noto Naskh Arabic","Times New Roman",serif;
  --f-script:"Pinyon Script","Amiri",cursive;

  --col:34rem;
  --pad:clamp(1.25rem,5.5vw,2rem);
  --gold-text:linear-gradient(170deg,#B8924F 0%,#E2C88F 38%,#A27C3E 62%,#C9A96B 100%);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--ivory)}
html.is-locked,html.is-locked body{overflow:hidden;height:100%}
body{
  margin:0;min-height:100%;
  font-family:var(--f-body);font-size:1.125rem;line-height:2;color:var(--brown);
  background:var(--ivory) url("assets/pics/paper.webp");background-size:180px;background-blend-mode:multiply;
  overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img{max-width:100%;height:auto;display:block}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.hp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
bdi{unicode-bidi:isolate}

/* ---------- Ornamental corners (from the cover artwork) ---------- */
.corner{
  position:absolute;width:var(--corner,84px);aspect-ratio:1;pointer-events:none;
  background:url("assets/pics/art-corner.webp") center/contain no-repeat;mix-blend-mode:multiply;
}
.c-tl{top:6px;left:6px}
.c-tr{top:6px;right:6px;transform:scaleX(-1)}
.c-bl{bottom:6px;left:6px;transform:scaleY(-1)}
.c-br{bottom:6px;right:6px;transform:scale(-1,-1)}

/* ---------- Loader ---------- */
.loader{
  position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:.4rem;
  background:var(--ivory) url("assets/pics/paper.webp");background-size:180px;background-blend-mode:multiply;
  transition:opacity .8s var(--ease),visibility .8s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader-names{margin:0;font-family:var(--f-script);font-size:clamp(2.4rem,11vw,3.6rem);line-height:1.2;color:var(--gold);direction:ltr}
.loader-names span{font-size:.8em}
.loader-flourish{width:min(220px,60vw);height:22px;color:var(--champagne)}
.loader-flourish use{stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.8s var(--ease) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Opening: one continuous animation ---------- */
.opening{
  position:relative;max-width:none;padding:0;margin:0;overflow:hidden;
  height:100vh;height:100svh;background:#EADCC8;isolation:isolate;
}
.scene{position:absolute;inset:0;overflow:hidden}
.scene-bd{ /* soft blurred copy fills the screen around the uncropped picture */
  position:absolute;inset:-8%;background:center/cover no-repeat;
  filter:blur(26px) saturate(1.05);opacity:.85;transform:scale(1.08);
}
.scene-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none;will-change:transform,opacity}
.scene-final,.scene-final2{opacity:0}
.scene-garden .scene-pic{transform-origin:50% 41%}

.env{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(100vw, calc(100svh * 1011 / 1556));aspect-ratio:1011/1556;perspective:2200px;
  filter:drop-shadow(0 24px 40px rgba(96,66,30,.30));
}
@supports not (height:1svh){.env{width:min(100vw, calc(100vh * 1011 / 1556))}}
.env-inside{position:absolute;inset:0;overflow:hidden;background:#F3DCCB url("assets/parts/hero-monogram--base.webp") center/cover no-repeat}
.env-inside img{position:absolute;max-width:none}
.env-under,.flap{position:absolute;inset:0;background:url("assets/pics/envelope-flaps.webp") 0 0/100% 100% no-repeat}
.flap{will-change:transform}
.flap .back{position:absolute;inset:0;opacity:0;background:linear-gradient(160deg,#F8EEDF,#EADAC3)}
.flap-top{clip-path:polygon(0 0,100% 0,49.21% 53.12%);transform-origin:50% 0}
.flap-bottom{clip-path:polygon(0 100%,100% 100%,49.21% 53.12%);transform-origin:50% 100%}
.flap-left{clip-path:polygon(0 0,49.21% 53.12%,0 100%);transform-origin:0 50%}
.flap-right{clip-path:polygon(100% 0,100% 100%,49.21% 53.12%);transform-origin:100% 50%}
.env.is-open .env-under{opacity:0}
.env.is-open .flap-left,.env.is-open .flap-right{animation:var(--flap) 1.5s 0s forwards}
.env.is-open .flap-top,.env.is-open .flap-bottom{animation:var(--flap) 1.5s .45s forwards}
.flap-left{--flap:flapL}.flap-right{--flap:flapR}.flap-top{--flap:flapT}.flap-bottom{--flap:flapB}
.env.is-open .flap-left .back,.env.is-open .flap-right .back{animation:inside 1.5s 0s forwards}
.env.is-open .flap-top .back,.env.is-open .flap-bottom .back{animation:inside 1.5s .45s forwards}
@keyframes flapL{0%{transform:rotateY(0);animation-timing-function:cubic-bezier(.45,0,.85,.55)}50%{transform:rotateY(-90deg);animation-timing-function:cubic-bezier(.15,.45,.35,1)}100%{transform:rotateY(-176deg);opacity:0}}
@keyframes flapR{0%{transform:rotateY(0);animation-timing-function:cubic-bezier(.45,0,.85,.55)}50%{transform:rotateY(90deg);animation-timing-function:cubic-bezier(.15,.45,.35,1)}100%{transform:rotateY(176deg);opacity:0}}
@keyframes flapT{0%{transform:rotateX(0);animation-timing-function:cubic-bezier(.45,0,.85,.55)}50%{transform:rotateX(90deg);animation-timing-function:cubic-bezier(.15,.45,.35,1)}100%{transform:rotateX(176deg);opacity:0}}
@keyframes flapB{0%{transform:rotateX(0);animation-timing-function:cubic-bezier(.45,0,.85,.55)}50%{transform:rotateX(-90deg);animation-timing-function:cubic-bezier(.15,.45,.35,1)}100%{transform:rotateX(-176deg);opacity:0}}
@keyframes inside{0%{opacity:0;animation-timing-function:steps(1,end)}50%{opacity:1}100%{opacity:1}}

.seal{position:absolute;z-index:5;left:40.455%;top:47.558%;width:17.409%;height:11.183%;pointer-events:none}
.seal::after{content:"";position:absolute;inset:-10%;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(240,214,160,.5),rgba(240,214,160,0) 68%);animation:glow 2.6s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.25}50%{opacity:.9}}
.seal-half{position:absolute;inset:0;background:url("assets/pics/seal.webp") center/100% 100% no-repeat;transition:transform 1.1s var(--ease),opacity 1.1s var(--ease)}
.seal-l{clip-path:polygon(0 0,53% 0,47% 21%,55% 40%,46% 59%,54% 79%,49% 100%,0 100%)}
.seal-r{clip-path:polygon(53% 0,100% 0,100% 100%,49% 100%,54% 79%,46% 59%,55% 40%,47% 21%)}
.tap-hint{position:absolute;z-index:6;left:0;right:0;top:62%;margin:0;text-align:center;font-family:"Amiri",serif;font-size:clamp(1.05rem,4.6vw,1.4rem);font-weight:700;color:var(--gold-deep);text-shadow:0 1px 0 rgba(255,250,240,.85);opacity:0;transition:opacity .5s;pointer-events:none}
.tap-hint.is-on{opacity:1;animation:tapPulse 2s ease-in-out infinite}
@keyframes tapPulse{0%,100%{opacity:.55}50%{opacity:1}}
.scene-env.is-waiting{cursor:pointer}
.seal.is-broken::after{animation:none;opacity:0;transition:opacity .4s}
.seal.is-broken .seal-l{transform:translate(-26%,5%) rotate(-13deg);opacity:0}
.seal.is-broken .seal-r{transform:translate(26%,5%) rotate(13deg);opacity:0}

.scroll-cue{
  position:absolute;z-index:6;left:50%;transform:translateX(-50%);
  bottom:calc(92px + env(safe-area-inset-bottom,0px));
  display:grid;justify-items:center;gap:.3rem;text-decoration:none;font-size:.95rem;color:#fff;
  text-shadow:0 1px 6px rgba(80,55,25,.55);opacity:0;transition:opacity 1s var(--ease);pointer-events:none;
}
.scroll-cue i{display:block;width:1px;height:34px;background:linear-gradient(#fff,transparent);transform-origin:top;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.opening.is-done .scroll-cue{opacity:1;pointer-events:auto}

/* ---------- Main ---------- */
main{position:relative}
section{padding:clamp(3.5rem,11vw,5.5rem) var(--pad);max-width:calc(var(--col) + 2*var(--pad));margin-inline:auto;text-align:center}
.sec-title{
  margin:0 0 1.6rem;font-family:var(--f-display);font-weight:700;font-size:clamp(1.85rem,8vw,2.45rem);line-height:1.5;
  color:var(--gold);background:var(--gold-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sec-title .emo{-webkit-text-fill-color:initial;background:none;color:initial;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-weight:400;font-size:.72em;vertical-align:.08em}
.sec-sub{margin:-.9rem 0 1.8rem;color:var(--brown-soft)}

.sheet{
  position:relative;padding:clamp(3.2rem,12vw,4.2rem) clamp(1.4rem,6vw,2.6rem);
  background:rgba(255,252,246,.72);
  border-radius:4px;
  box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 8px rgba(255,252,246,.0),inset 0 0 0 9px rgba(201,169,107,.25),0 18px 40px -26px rgba(96,66,30,.45);
  --corner:clamp(64px,19vw,96px);
}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Full-picture sections */
.art-section{padding:clamp(1.6rem,6vw,3rem) clamp(.6rem,3vw,1.2rem);max-width:560px}
.art-section img,.art-img{width:100%;border-radius:4px;box-shadow:0 22px 44px -30px rgba(96,66,30,.6)}
.savedate .art-img{margin:0 auto 1.6rem}
.details .art-img{margin:0 auto}

/* Invitation: design frame with the exact wording as live text */
.invite{padding:clamp(1.6rem,6vw,3rem) 0;max-width:560px}
.frame-card{
  position:relative;
  background:
    url("assets/pics/inv-top.webp") top center/100% auto no-repeat,
    url("assets/pics/inv-bottom.webp") bottom center/100% auto no-repeat,
    url("assets/pics/inv-mid.webp") center top/100% auto repeat-y;
  padding:27% 16.5% 25%;
  min-height:calc(min(100vw,560px) * 1.2);
  color:#5A3E28;
}
.frame-card img{mix-blend-mode:multiply;margin:0 auto}
.frame-card .basmala{width:78%;margin-bottom:.2rem}
.frame-card .divider{width:46%;margin:1.1rem auto 1.2rem}
.frame-card p{margin:0;white-space:pre-line;font-size:clamp(1rem,4.25vw,1.3rem);line-height:2}
.frame-card p+p{margin-top:1.3rem}
.frame-card .names-img{width:100%;margin:1.4rem auto .4rem}
.frame-card .date-line,.frame-card .venue-line{font-weight:700}
.frame-card .venue-line{letter-spacing:.01em}

/* Countdown: design frame with live numbers */
.countdown{padding:clamp(1.6rem,6vw,3rem) clamp(.6rem,3vw,1.2rem);max-width:560px}
.cd-frame{position:relative;container-type:inline-size}
.cd-frame img{width:100%}
.cd-nums{position:absolute;inset:0}
.cd-num{
  position:absolute;top:62.24%;
  font-family:"Amiri",serif;font-weight:700;line-height:1;font-size:6.07cqw;font-variant-numeric:tabular-nums;
  color:#906833;background:linear-gradient(180deg,#9E7642,#84602E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
@supports not (font-size:1cqw){.cd-num{font-size:calc(min(100vw,560px) * .057)}}
.cd-done{position:absolute;left:0;right:0;top:58%;transform:translateY(-50%);margin:0;font-family:var(--f-display);font-size:5cqw;color:var(--gold-deep)}
.cd-nums[hidden]{display:none}

.cal-options{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:1rem}
.cal-options[hidden]{display:none}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.55rem 1.8rem;
  border:1px solid var(--champagne);border-radius:14px;cursor:pointer;text-decoration:none;
  background:linear-gradient(180deg,rgba(255,253,248,.95),rgba(245,235,221,.9));
  color:var(--gold-deep);font-family:var(--f-body);font-size:1.12rem;font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 18px -12px rgba(96,66,30,.55);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 22px -12px rgba(96,66,30,.6);background:linear-gradient(180deg,#FFFDF8,#F1E4D0)}
.btn:active{transform:translateY(1px)}
.btn-small{min-height:46px;font-size:1rem;padding:.45rem 1.2rem}
.btn[disabled]{opacity:.6;cursor:default}

/* Details */
.details{padding-top:clamp(1.6rem,6vw,3rem)}
.detail-list{list-style:none;margin:0 auto;padding:0;display:grid;gap:.9rem;max-width:24rem}
.detail-list li{display:flex;align-items:center;justify-content:center;gap:.7rem;font-size:1.2rem}
.ico{width:26px;height:26px;color:var(--gold);flex:none}

/* Gallery */
.gallery-grid{display:grid;gap:1rem}
.gallery-grid.is-multi{grid-template-columns:repeat(2,1fr);align-items:start}
.photo{
  margin:0;padding:8px;background:#FFFDF9;border-radius:4px;cursor:zoom-in;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(201,169,107,.55),0 18px 34px -24px rgba(96,66,30,.6);
}
.photo img{width:100%;border-radius:2px;transform:scale(1.04);transition:transform 1.6s var(--ease)}
.photo.is-in img{transform:scale(1)}
.gallery-grid.is-multi .photo:nth-child(3n){grid-column:1/-1}

/* Venue */
.arch{margin:0 auto 1.6rem;max-width:22rem;padding:10px;border:1px solid var(--champagne);border-radius:999px 999px 10px 10px;background:#FFFCF6;box-shadow:0 20px 40px -28px rgba(96,66,30,.6)}
.arch img{border-radius:999px 999px 6px 6px;width:100%}
.venue-info{display:grid;justify-items:center;gap:.2rem;margin-bottom:1.6rem}
.venue-name{margin:.2rem 0 0;font-family:var(--f-body);font-weight:700;font-size:1.5rem;line-height:1.4;color:var(--brown)}
.venue-address{margin:0;color:var(--brown-soft);font-size:1.05rem;line-height:1.6}

/* Forms */
.rsvp .sec-title{font-size:clamp(1.6rem,7.2vw,2.2rem)}
.rsvp-deadline{margin:-.6rem 0 .6rem;font-weight:700}
.no-kids{margin:0 0 2rem;color:var(--red);font-weight:700;line-height:1.9}
.form{display:grid;gap:1.3rem;text-align:right;max-width:26rem;margin:0 auto}
.field{display:grid;gap:.45rem;border:0;margin:0;padding:0;min-width:0;position:relative}
.field[hidden]{display:none}
.field-label{font-weight:700;font-size:1.08rem;padding:0;color:var(--brown)}
.form input[type=text],.form textarea{
  width:100%;padding:.8rem 1rem;font-size:16px;line-height:1.7;border:1px solid rgba(201,169,107,.75);border-radius:12px;
  background:rgba(255,253,249,.92);color:var(--brown);transition:border-color .2s,box-shadow .2s;
}
.form textarea{resize:vertical;min-height:7.5rem}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,169,107,.25)}
.choices{display:flex;flex-wrap:wrap;gap:.6rem}
.choice{flex:1 1 auto;position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice span{display:flex;align-items:center;justify-content:center;min-height:50px;padding:.4rem 1rem;border:1px solid rgba(201,169,107,.75);border-radius:12px;background:rgba(255,253,249,.92);transition:all .2s;font-size:1.05rem}
.choice input:checked+span{background:linear-gradient(180deg,#F6EAD5,#EBD8B8);border-color:var(--gold);color:var(--gold-deep);font-weight:700;box-shadow:inset 0 0 0 1px var(--gold)}
.choice input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.choices-num{flex-wrap:nowrap;direction:ltr}
.choices-num .choice{flex:1 1 0}
.choices-num .choice span{padding:.4rem 0;font-size:1.2rem}
.form .btn{justify-self:center;min-width:12rem;margin-top:.3rem}
.form-msg{margin:0;min-height:0;color:var(--red);font-size:1rem;text-align:center}
.form-msg.is-ok{color:#5E7A45}
.counter{position:absolute;bottom:.4rem;left:.8rem;font-size:.78rem;color:var(--brown-soft);line-height:1}

.gb-list{display:grid;gap:1rem;margin-top:2.4rem;text-align:right}
.gb-item{padding:1.1rem 1.2rem;background:rgba(255,253,249,.85);border-radius:4px;box-shadow:inset 0 0 0 1px var(--line)}
.gb-item p{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.gb-item .gb-item-name{font-weight:700;color:var(--gold-deep);margin-bottom:.2rem}

/* Luma & footer */
.luma{padding-bottom:2.5rem}
.luma-q{margin:0;font-family:var(--f-display);font-size:1.7rem;color:var(--gold-deep)}
.luma-text{margin:.4rem 0 1.4rem}
.luma-links{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.luma-link{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.3rem 1.2rem;border-radius:999px;border:1px solid rgba(201,169,107,.6);text-decoration:none;background:rgba(255,253,249,.7);font-size:1.05rem}
.luma-link span{color:var(--brown-soft)}
.luma-link bdi{font-weight:700;color:var(--gold-deep)}
.footer{text-align:center;padding:1.5rem var(--pad) calc(7rem + env(safe-area-inset-bottom,0px));color:var(--brown-soft);font-size:1rem;line-height:1.8}
.footer p{margin:0}
.footer-brand{font-family:var(--f-script);font-size:1.7rem;color:var(--gold)}

/* Bottom navigation */
.dock{
  position:fixed;z-index:40;left:0;right:0;margin:0 auto;
  bottom:calc(10px + env(safe-area-inset-bottom,0px));
  width:min(calc(100% - 20px),460px);
  display:flex;justify-content:space-between;align-items:stretch;gap:2px;padding:6px;
  background:rgba(252,247,241,.96);border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(215,196,165,.9),inset 0 0 0 3px rgba(252,247,241,.96),inset 0 0 0 4px rgba(225,210,185,.7),0 14px 30px -14px rgba(96,66,30,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:"Tajawal","Amiri",sans-serif;animation:rise .6s var(--ease) both;
}
.dock[hidden]{display:none}
.dock-item{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:7px 2px 6px;border:0;background:none;border-radius:999px;cursor:pointer;text-decoration:none;
  color:#8B7763;font:inherit;font-size:clamp(.74rem,3.3vw,.9rem);font-weight:500;line-height:1.2;
  -webkit-tap-highlight-color:transparent;transition:background .25s,color .25s;
}
.dock-ico{width:24px;height:24px}
.dock-main{flex:1.25 1 0;color:#4A3424;font-weight:700;background:linear-gradient(160deg,#F2E3C4,#E3C996);box-shadow:0 0 0 1px rgba(255,255,255,.6) inset}
#dockMusic .mute{display:none}
#dockMusic.is-playing{color:#A6833F;font-weight:700}
#dockMusic:not(.is-playing) .wave{display:none}
#dockMusic:not(.is-playing) .mute{display:block}
#dockMusic.needs-tap{animation:tapme 2.4s ease-in-out infinite}
@keyframes tapme{0%,100%{background:transparent}50%{background:rgba(233,210,160,.45)}}

/* Overlay & lightbox */
.overlay{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:1.5rem;background:rgba(80,58,34,.32);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.overlay[hidden],.lightbox[hidden]{display:none}
.overlay-card{max-width:22rem;padding:2.2rem 1.6rem;text-align:center;background:var(--ivory);border-radius:6px;box-shadow:inset 0 0 0 1px var(--champagne),inset 0 0 0 7px var(--ivory),inset 0 0 0 8px rgba(201,169,107,.45),0 30px 60px -20px rgba(60,40,20,.5);animation:rise .5s var(--ease)}
.overlay-card p{margin:0 0 1.2rem}
.overlay-title{font-family:var(--f-display);font-size:2rem;color:var(--gold-deep)}
.lightbox{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) 1rem;background:rgba(40,28,16,.88);animation:fade .3s}
.lightbox img{max-height:88vh;width:auto;border-radius:4px}
.lightbox-close{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:12px;width:48px;height:48px;border:0;background:none;color:#fff;font-size:2.2rem;cursor:pointer}

/* Scroll reveal */
.reveal{opacity:1}
/* Entrance: gently down from slightly above, fading in, then settling in place.
   Uses the separate 'translate' property so existing transforms are untouched. */
.enter{
  opacity:0;translate:0 -18px;filter:blur(1.5px);
  transition:opacity 1.15s cubic-bezier(.25,.6,.3,1),translate 1.35s cubic-bezier(.16,.84,.3,1),filter 1.15s ease;
  transition-delay:var(--d,0s);
}
.enter.is-shown{opacity:1;translate:0 0;filter:none}
.frame-card .line{display:block}
.btn.enter{transition:opacity 1.15s cubic-bezier(.25,.6,.3,1),translate 1.35s cubic-bezier(.16,.84,.3,1),filter 1.15s ease,transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;transition-delay:var(--d,0s),var(--d,0s),var(--d,0s),0s,0s,0s}

@media (min-width:760px){
  .hero-card{margin:16px}
  body{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .enter{opacity:1;translate:none;filter:none}
}

/* ---------- Line-by-line entrance: each full line glides down from slightly above ---------- */
.ent{opacity:0;transform:translate3d(0,-18px,0);filter:blur(2.5px)}
.ent.in{
  opacity:1;transform:none;filter:none;
  transition:opacity 1.25s cubic-bezier(.25,.6,.3,1) var(--d,0s),
             transform 1.6s cubic-bezier(.2,.8,.22,1) var(--d,0s),
             filter 1.25s ease var(--d,0s);
}
.frame-card .line{display:block}

/* pictures whose text lines enter separately */
.lay{position:relative;width:100%;overflow:hidden}
.lay img{display:block;max-width:none;box-shadow:none;border-radius:0;mix-blend-mode:normal;margin:0}
.lay .lay-base,.lay .lay-orig{width:100%;height:100%}
.lay .lay-orig{position:absolute;inset:0;opacity:0}
.lay.is-final .lay-orig{opacity:1}
.lay.is-final .lay-line{visibility:hidden}
.lay .lay-line{position:absolute}
.lay .plane{position:absolute;max-width:none;will-change:left,top,transform}
.art-section .lay,.details .lay{border-radius:4px;box-shadow:0 22px 44px -30px rgba(96,66,30,.6)}
.scene .pic-box{position:absolute;inset:auto;left:50%;top:50%;translate:-50% -50%;
  width:min(100vw, calc(100svh * 850 / 1851));height:auto;aspect-ratio:850/1851}
@supports not (height:1svh){.scene .pic-box{width:min(100vw, calc(100vh * 850 / 1851))}}
.scene .pic-box .lay{height:100%}
.cd-num{transform:none;width:20cqw;margin-left:-10cqw;text-align:center;height:1em;margin-top:-.43em}
.cd-num.ent{transform:translate3d(0,-18px,0)}
.cd-num.ent.in{transform:none}
@media (prefers-reduced-motion:reduce){.ent{opacity:1;transform:none;filter:none}}

/* ---------- RSVP and guestbook drawn by your designs; live controls sit on the drawn boxes ---------- */
#rsvp,#guestbook{padding:clamp(1.6rem,6vw,3rem) clamp(.3rem,1.5vw,.8rem);max-width:560px}
.rc-card,.gb-card{position:relative;width:100%;container-type:inline-size;text-align:right}
.rc-card > .lay,.rc-bottom,.rc-band img{display:block;width:100%;height:auto;max-width:none}
.rc-band{height:0;overflow:hidden;transition:height .7s cubic-bezier(.4,0,.2,1)}
.rc-card.is-yes .rc-band{height:calc(145 * 100cqw / 851)}
.rc-ui,.gb-form{position:absolute;inset:0;margin:0;max-width:none}
.rc-ui form{position:absolute;inset:0;margin:0}
.rc-ui fieldset{border:0;margin:0;padding:0;min-width:0}
/* positions in the design's own pixels (851 wide) */
.rc-name,.rc-choice,.rc-count,.rc-submit,.rc-msg,.gb-name,.gb-text,.gb-counter,.gb-submit,.gb-msg{position:absolute;display:block}
.rc-name{left:calc(80*100cqw/851);top:calc(690*100cqw/851);width:calc(691*100cqw/851);height:calc(86*100cqw/851)}
.rc-choice{top:calc(845*100cqw/851);height:calc(76*100cqw/851);border-radius:calc(14*100cqw/851);cursor:pointer;transition:background .25s,box-shadow .25s}
.rc-no{left:calc(80*100cqw/851);width:calc(363*100cqw/851)}
.rc-yes{left:calc(464*100cqw/851);width:calc(307*100cqw/851)}
.rc-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.rc-choice:has(input:checked){background:rgba(232,196,180,.32);box-shadow:inset 0 0 0 calc(2.4*100cqw/851) rgba(196,146,116,.9)}
.rc-choice:has(input:focus-visible){outline:2px solid #C4927A;outline-offset:2px}
.rc-name input,.gb-name input,.gb-text textarea{
  width:100%;height:100%;margin:0;border:0;background:transparent;color:#5B402A;
  font-family:"Amiri",serif;font-size:max(16px, calc(34*100cqw/851));line-height:1.4;
  padding:0 calc(26*100cqw/851);border-radius:calc(14*100cqw/851);outline:none;
  transition:box-shadow .2s,background .2s;
}
.rc-name input:focus,.gb-name input:focus,.gb-text textarea:focus{box-shadow:inset 0 0 0 calc(2.4*100cqw/851) rgba(196,146,116,.75);background:rgba(255,255,255,.25)}
/* number of people: opens in the band below the attendance boxes, drawn in the same style */
.rc-count{left:calc(80*100cqw/851);top:calc(941*100cqw/851);width:calc(691*100cqw/851);height:calc(125*100cqw/851)}
.rc-count[hidden]{display:none}
.rc-card.is-yes .rc-count{animation:fade .6s .25s both}
.rc-count-label{position:absolute;right:0;top:0;padding:0;margin:0;font-family:"Amiri",serif;font-size:calc(34*100cqw/851);line-height:calc(40*100cqw/851);color:#5B402A}
.rc-count-row{position:absolute;left:0;right:0;bottom:0;height:calc(76*100cqw/851);display:flex;gap:calc(21*100cqw/851);direction:ltr}
.rc-count-row .choice{flex:1 1 0;position:relative;cursor:pointer}
.rc-count-row .choice input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.rc-count-row .choice span{
  display:flex;align-items:center;justify-content:center;height:100%;
  border-radius:calc(14*100cqw/851);background:rgba(253,250,247,.88);
  box-shadow:inset 0 0 0 calc(2*100cqw/851) rgba(216,186,162,.95);
  font-family:"Amiri",serif;font-size:calc(36*100cqw/851);color:#5B402A;transition:background .25s,box-shadow .25s;
  min-height:0;padding:0;border:0
}
.rc-count-row .choice input:checked + span{background:rgba(232,196,180,.45);box-shadow:inset 0 0 0 calc(2.6*100cqw/851) rgba(196,146,116,.95);font-weight:700}
.rc-count-row .choice input:focus-visible + span{outline:2px solid #C4927A;outline-offset:2px}
/* confirm button: the design's own button, moves down when the band opens */
.rc-submit{left:calc(259*100cqw/851);top:calc(944*100cqw/851);width:calc(332*100cqw/851);height:calc(87*100cqw/851);
  border:0;padding:0;margin:0;background:transparent;border-radius:calc(16*100cqw/851);cursor:pointer;transition:top .7s cubic-bezier(.4,0,.2,1),background .2s;-webkit-tap-highlight-color:transparent}
.rc-submit:active,.gb-submit:active{background:rgba(120,70,50,.08)}
.rc-submit:focus-visible,.gb-submit:focus-visible{outline:2px solid #C4927A;outline-offset:3px}
.rc-msg{left:calc(150*100cqw/851);width:calc(440*100cqw/851);top:calc(1042*100cqw/851);text-align:center;font-size:calc(28*100cqw/851);line-height:1.5;transition:top .7s cubic-bezier(.4,0,.2,1)}
.rc-card.is-yes .rc-submit{top:calc((944 + 145)*100cqw/851)}
.rc-card.is-yes .rc-msg{top:calc((1042 + 145)*100cqw/851)}

.gb-card > .lay{border-radius:4px;box-shadow:0 22px 44px -30px rgba(96,66,30,.6)}
.gb-name{left:calc(72*100cqw/851);top:calc(660*100cqw/851);width:calc(707*100cqw/851);height:calc(112*100cqw/851)}
.gb-name input{padding-left:calc(118*100cqw/851)}
.gb-text{left:calc(72*100cqw/851);top:calc(892*100cqw/851);width:calc(707*100cqw/851);height:calc(253*100cqw/851)}
.gb-text textarea{resize:none;padding-top:calc(20*100cqw/851);padding-bottom:calc(58*100cqw/851)}
.gb-counter{left:calc(94*100cqw/851);top:calc(1104*100cqw/851);font-family:"Amiri",serif;font-size:calc(26*100cqw/851);line-height:1.2;color:#8C7B6E;pointer-events:none}
.gb-submit{left:calc(238*100cqw/851);top:calc(1207*100cqw/851);width:calc(374*100cqw/851);height:calc(105*100cqw/851);border:0;padding:0;margin:0;background:transparent;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gb-submit[disabled]{cursor:default;opacity:.6}
.gb-msg{left:calc(130*100cqw/851);width:calc(591*100cqw/851);top:calc(1328*100cqw/851);text-align:center;font-size:calc(28*100cqw/851);line-height:1.5}

/* venue and dress code designs */
.venue .art-img,.dresscode .art-img{width:100%;margin:0 auto 1.6rem;border-radius:4px;box-shadow:0 22px 44px -30px rgba(96,66,30,.6)}
.dresscode{padding-top:clamp(1.6rem,6vw,3rem)}
.dresscode .art-img{margin-bottom:0}
.venue{padding-top:clamp(1.6rem,6vw,3rem);max-width:560px}

/* first scene date: live text in the site's heading style */
.pic-box .lay{container-type:inline-size}
.lay-text{display:flex;align-items:center;justify-content:center;pointer-events:none}
.lay-date span{
  font-family:var(--f-display);font-weight:700;font-size:6.6cqw;line-height:1;letter-spacing:.08em;white-space:nowrap;
  color:var(--gold);background:var(--gold-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1.5px rgba(255,246,236,.85)) drop-shadow(0 0 6px rgba(255,240,228,.6));
}
/* schedule rose */
.lay .lay-rose{position:absolute;z-index:2;pointer-events:none;will-change:translate;filter:drop-shadow(0 3px 4px rgba(120,80,60,.22))}
.lay .lay-rose img{width:100%;height:100%;display:block}
/* gallery design */
.gallery .art-img{width:100%;border-radius:4px;box-shadow:0 22px 44px -30px rgba(96,66,30,.6)}
.gallery{max-width:560px;padding-left:clamp(.6rem,3vw,1.2rem);padding-right:clamp(.6rem,3vw,1.2rem)}

#galleryGrid[hidden]{display:none}

/* opening fills the phone screen edge to edge (portrait screens); wide screens keep the whole picture */
@media (max-aspect-ratio: 3/4){
  .scene-pic{object-fit:cover}
  .scene .pic-box{width:max(100vw, calc(100svh * 850 / 1851))}
  .env{width:max(100vw, calc(100svh * 1011 / 1556))}
}
@media (max-aspect-ratio: 3/4){ @supports not (height:1svh){
  .scene .pic-box{width:max(100vw, calc(100vh * 850 / 1851))}
  .env{width:max(100vw, calc(100vh * 1011 / 1556))}
}}
/* initials, then the date, come down from above into place */
.lay .lay-line.drop{transform:translate3d(0,-30vh,0);filter:blur(3px)}
.lay .lay-line.drop.in{
  transform:none;filter:none;
  transition:opacity 1.6s cubic-bezier(.25,.6,.3,1) var(--d,0s),
             transform 2.6s cubic-bezier(.16,.84,.24,1) var(--d,0s),
             filter 1.8s ease var(--d,0s);
}