/* Layout: phone frame -> full-bleed envelope face with the classic four-flap X-fold
   pattern (all four corners meet at the centre), wax seal sitting on that centre point,
   script "Tap to Open" beneath; tap lifts the top flap open in 3D while the seal fades
   and sinks away, then the whole face cross-fades to a blank second screen (no scroll) */
:root{
  --paper:        #fdf9f0;
  --paper-shade:  #f7eeda;
  --paper-dark:   #efe0bd;
  --ink:          #5a3a28;
  --maroon:       #7c1b2b;
  --maroon-bright:#a2283a;
  --maroon-light: #c17c86;
  --maroon-deep:  #330a14;
  --gold:         #cf9f3a;
  --gold-bright:  #e8c164;
  --stage-bg:     #f3dccf;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--stage-bg);
  color:var(--ink);
  font-family:'EB Garamond',Georgia,'Times New Roman',serif;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- outer stage: centers the phone frame on any host surface ---------- */
.stage{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-block:max(20px, env(safe-area-inset-top,0px)) max(20px, env(safe-area-inset-bottom,0px));
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(70% 50% at 100% 100%, rgba(207,159,58,.22) 0%, rgba(207,159,58,0) 70%),
    radial-gradient(70% 50% at 0% 100%, rgba(193,124,134,.25) 0%, rgba(193,124,134,0) 70%),
    repeating-linear-gradient(45deg, rgba(207,159,58,.09) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(207,159,58,.09) 0 1px, transparent 1px 22px),
    linear-gradient(170deg, #fcf1e8 0%, #f4dfd2 50%, #ebcdbf 100%);
}

/* ---------- the mobile frame (phone mockup) ---------- */
.phone{
  position:relative;
  width:min(380px, 100%);
  height:min(780px, 100%);
  border-radius:52px;
  background:linear-gradient(155deg,#1d1d1d,#050505 60%);
  padding:14px;
  box-shadow:
    0 0 0 1.5px rgba(207,159,58,.3),
    0 30px 70px -20px rgba(0,0,0,.75),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone::before{ /* notch */
  content:"";
  position:absolute;
  top:14px; left:50%;
  transform:translateX(-50%);
  width:38%; height:26px;
  background:#050505;
  border-radius:0 0 18px 18px;
  z-index:6;
}
.screen{
  position:relative;
  width:100%; height:100%;
  border-radius:38px;
  overflow:hidden;
  background:var(--paper);
}

/* ---------- screen layers (cross-fade, both fixed to screen bounds) ---------- */
.layer{
  position:absolute; inset:0;
  transition:opacity .6s ease;
}
.layer[hidden]{display:none}
.layer.leaving{opacity:0; pointer-events:none}

/* ================= INVITE LAYER — a real envelope on a peacock-blue table ================= */
#invite{ overflow:hidden; }
.inv-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 55% at 50% 46%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 70%),
    repeating-linear-gradient(45deg, rgba(207,159,58,.10) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, rgba(207,159,58,.10) 0 1px, transparent 1px 16px),
    linear-gradient(175deg, #fbeee4 0%, #f2d9cc 55%, #e6c2b3 100%);
}
.inv-bg::after{ /* vignette */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 60%, rgba(124,27,43,.16) 100%);
}
.inv-dust{ position:absolute; inset:0; pointer-events:none; }
.inv-dust i{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#e0b24a; box-shadow:0 0 8px 2px rgba(224,178,74,.6);
  opacity:0; animation:dust-twinkle 4.8s ease-in-out infinite;
}
.inv-dust i:nth-child(1){ left:14%; top:22%; animation-delay:.2s; }
.inv-dust i:nth-child(2){ left:82%; top:18%; animation-delay:1.3s; }
.inv-dust i:nth-child(3){ left:26%; top:78%; animation-delay:2.1s; }
.inv-dust i:nth-child(4){ left:88%; top:70%; animation-delay:.8s; }
.inv-dust i:nth-child(5){ left:8%;  top:50%; animation-delay:3s; }
.inv-dust i:nth-child(6){ left:92%; top:44%; animation-delay:2.6s; }
.inv-dust i:nth-child(7){ left:60%; top:86%; animation-delay:1.7s; }
@keyframes dust-twinkle{ 0%,100%{ opacity:0; transform:scale(.6); } 50%{ opacity:.95; transform:scale(1.25); } }

.inv-head{
  position:absolute; top:8.5%; left:0; right:0;
  text-align:center; color:var(--maroon);
  transition:opacity .6s ease;
}
.inv-small{
  font-family:'Cormorant Garamond','EB Garamond',serif; font-style:italic;
  font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:#a67a22;
}
.inv-names{
  font-family:'Great Vibes','Petit Formal Script',cursive;
  font-size:46px; line-height:1.15; margin-top:6px; color:var(--maroon);
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.inv-names span{ font-size:30px; color:#cf9f3a; }

/* the envelope itself (3:2), all parts positioned in % so it scales cleanly */
.env{
  position:absolute; left:50%; top:53%;
  width:min(318px, 90%); aspect-ratio:3/2;
  transform:translate(-50%,-50%);
  perspective:900px;
  transition:transform .9s cubic-bezier(.5,0,.2,1), opacity .8s ease;
}
.env-shadow{
  position:absolute; left:3%; right:3%; bottom:-9%; height:16%;
  background:radial-gradient(closest-side, rgba(90,30,30,.45), rgba(90,30,30,0));
  filter:blur(5px);
}
.env-back{
  position:absolute; inset:0; border-radius:3px; z-index:0;
  background:
    repeating-linear-gradient(45deg, rgba(232,193,100,.22) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(232,193,100,.22) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #7c1b2b 0%, #4d1022 100%);
  box-shadow:0 22px 30px -10px rgba(90,30,30,.55), 0 2px 0 rgba(255,255,255,.04);
}

/* the card sliding out */
.env-card{
  position:absolute; left:6%; right:6%; top:5%; height:90%; z-index:2;
  transition:transform 1.15s cubic-bezier(.3,.8,.25,1);
}
.ec-in{
  position:absolute; inset:0; border-radius:3px;
  background:linear-gradient(170deg,#fffdf6 0%,#f8efd8 100%);
  box-shadow:0 -4px 14px rgba(0,0,0,.25), inset 0 0 0 1px rgba(207,159,58,.35);
  display:flex; flex-direction:column; align-items:center; padding-top:7%;
  text-align:center;
}
.ec-in::before{ content:""; position:absolute; inset:5px; border:1px solid rgba(207,159,58,.7); border-radius:2px; }
.ec-orn{ color:#cf9f3a; font-size:15px; line-height:1; }
.ec-names{
  font-family:'Great Vibes','Petit Formal Script',cursive; font-size:30px; line-height:1.02;
  color:#7c1b2b; margin-top:3px;
}
.ec-names em{
  display:block; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12px;
  letter-spacing:.3em; padding-left:.3em; margin:1px 0;
}
.ec-date{
  margin-top:7px; font-family:'Cormorant Garamond',serif; font-weight:700; font-size:11px;
  letter-spacing:.2em; color:#a67a22; text-transform:uppercase;
}

/* front of the envelope: two side flaps + bottom flap (the classic pocket) */
.env-front{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.ef{
  position:absolute; inset:0;
  filter:drop-shadow(0 -2px 2.5px rgba(70,48,22,.32)) drop-shadow(0 0 .6px rgba(90,64,30,.7));
}
.ef::before{
  content:""; position:absolute; inset:0; border-radius:3px;
  background-color:#f7f0e0;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.36%20%200%200%200%200%20.27%20%200%200%200%200%20.15%20%200%200%200%20.11%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(var(--ef-dir,90deg), rgba(120,88,40,.14) 0%, rgba(255,255,255,0) 55%, rgba(255,255,255,.35) 100%);
}
.ef-left::before{   --ef-dir:90deg;  clip-path:polygon(0 0, 50% 56%, 0 100%); }
.ef-right::before{  --ef-dir:270deg; clip-path:polygon(100% 0, 50% 56%, 100% 100%); }
.ef-bottom{ filter:drop-shadow(0 -3px 3px rgba(70,48,22,.38)) drop-shadow(0 0 .6px rgba(90,64,30,.7)); }
.ef-bottom::before{ --ef-dir:0deg; clip-path:polygon(0 100%, 50% 41%, 100% 100%);
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.36%20%200%200%200%200%20.27%20%200%200%200%200%20.15%20%200%200%200%20.11%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(0deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.28) 40%, rgba(120,88,40,.12) 100%); }

/* the top flap: outside = paper, inside = peacock-blue lining; swings open on its top edge */
.env-flap{
  position:absolute; left:0; top:0; width:100%; height:58%;
  transform-origin:50% 0; transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.55,.05,.25,1), z-index 0s linear .5s;
  z-index:6;
}
.flap-face{
  position:absolute; inset:0;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.flap-out{
  background-color:#c9b38a;
}
.flap-out::after{
  content:""; position:absolute; inset:0;
  clip-path:polygon(.9% 0, 99.1% 0, 50% 96.5%);
  background-color:#f8f1e1;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.36%20%200%200%200%200%20.27%20%200%200%200%200%20.15%20%200%200%200%20.11%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 40%, rgba(120,88,40,.18) 100%);
}
.flap-in{
  transform:rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(232,193,100,.25) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(232,193,100,.25) 0 1px, transparent 1px 9px),
    linear-gradient(0deg, #8c2234 0%, #5a1426 100%);
}
/* soft shadow the closed flap throws on the pocket beneath it */
.env::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:62%; z-index:5; pointer-events:none;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:linear-gradient(180deg, rgba(60,40,20,0) 55%, rgba(60,40,20,.28) 100%);
  transform:translateY(3px); transition:opacity .4s ease;
}

/* ---------- wax seal, sitting on the flap tip ---------- */
.seal-wrap{
  position:absolute; left:50%; top:58%;
  width:88px; height:88px; z-index:8;
  transform:translate(-50%,-50%);
}
.seal-glow{
  position:absolute; inset:-26px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,193,100,.38) 0%, rgba(232,193,100,0) 68%);
  opacity:.55; animation:glow-breathe 3.6s ease-in-out infinite;
}
.seal-btn{
  appearance:none; border:none; background:none; padding:0; margin:0; cursor:pointer;
  position:relative; width:100%; height:100%; display:block;
  animation:seal-breathe 4.2s ease-in-out infinite; transform-origin:50% 55%;
}
.seal-btn:focus-visible{ outline:2px solid #e8c164; outline-offset:6px; border-radius:50%; }
.seal-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.5));
  user-select:none; -webkit-user-drag:none;
}
.seal-btn.opening .seal-img{ animation:seal-sink .6s cubic-bezier(.5,0,.3,1) forwards; }
.seal-glow.opening{ animation:glow-burst .85s ease-out forwards; }

/* ---------- "Tap to Open" ---------- */
.cta{
  position:absolute; left:0; right:0; bottom:8%;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:opacity .4s ease; z-index:2;
}
.cta-script{ font-family:'Petit Formal Script','Brush Script MT',cursive; font-size:32px; line-height:1; color:var(--maroon); text-shadow:0 1px 0 rgba(255,255,255,.7); }
.cta-rule{ width:34px; height:1px; background:linear-gradient(90deg, transparent, #cf9f3a, transparent); }

/* ---------- opening sequence ---------- */
#invite.opening .cta{ opacity:0; }
#invite.opening .env-flap{ transform:rotateX(-178deg); z-index:1; }
#invite.opening .env::after{ opacity:0; }
#invite.rising .env-card{ transform:translateY(-62%); }
#invite.zoom .env{ transform:translate(-50%,-52%) scale(1.45); opacity:0; }
#invite.zoom .inv-head{ opacity:0; }

/* ================= REVEALED LAYER — the invitation scene ================= */
#revealed{
  background:var(--paper);
  overflow:hidden;
}

/* scroll container: scene page snaps, then the invitation-frame page below it */
.scroll-area{
  position:relative;
  width:100%; height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.scroll-area::-webkit-scrollbar{ display:none; }
.snap-section{
  position:relative;
  width:100%; height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
}

/* slow, continuous breathing zoom on the scene photo (upper portion only —
   it dissolves into the plain card below, like a watercolour invite) */
.reveal-bg{
  position:absolute;
  inset:-6% -6% auto -6%;
  height:66%;
  background-image:url('assets/scene-bg.webp');
  background-size:cover;
  background-position:50% 32%;
  animation:bg-breathe 16s ease-in-out infinite;
  will-change:transform;
}
@keyframes bg-breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.1); }
}

/* the scene dissolves into the paper card beneath it */
.reveal-fade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(26,14,10,.28) 0%, rgba(26,14,10,0) 30%, transparent 44%,
      var(--paper-shade) 60%, var(--paper) 72%, var(--paper) 100%);
  pointer-events:none;
}

/* ---------- floating petals (drift through the photo band only) ---------- */
.petals{
  position:absolute;
  top:0; left:0; right:0;
  height:60%;
  overflow:hidden;
  pointer-events:none;
  z-index:2;
}
.petal{
  position:absolute;
  bottom:-10%;
  width:var(--size, 16px);
  height:var(--size, 16px);
  opacity:0;
  color:var(--petal-color, var(--gold-bright));
  filter:drop-shadow(0 2px 3px rgba(51,10,20,.25));
  animation:petal-rise var(--rise-dur, 12s) linear infinite;
  animation-delay:var(--rise-delay, 0s);
}
.petal svg{
  width:100%; height:100%;
  display:block;
  animation:petal-sway var(--sway-dur, 3.2s) ease-in-out infinite;
  transform-origin:50% 50%;
}
@keyframes petal-rise{
  0%{   transform:translate(0, 10vh) rotate(0deg);   opacity:0; }
  8%{   opacity:.9; }
  85%{  opacity:.8; }
  100%{ transform:translate(var(--drift, 24px), -118vh) rotate(var(--spin, 300deg)); opacity:0; }
}
@keyframes petal-sway{
  0%,100%{ transform:translateX(0) rotate(0deg); }
  50%{ transform:translateX(10px) rotate(14deg); }
}

/* ---------- content: couple portrait + names ---------- */
.reveal-content{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:38px 18px 16px;
}

.couple-frame{
  position:relative;
  flex:0 0 auto;
  width:100%;
  height:46%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.couple-photo{
  position:relative;
  z-index:2;
  max-width:45%;
  max-height:80%;
  object-fit:contain;
  filter:drop-shadow(0 16px 22px rgba(26,14,10,.4));
  opacity:0;
  transform:translateY(-18px) scale(.96);
  transition:opacity 1.1s ease .45s, transform 1.1s cubic-bezier(.22,1,.36,1) .45s;
}
#revealed.enter .couple-photo{ opacity:1; transform:translateY(0) scale(1); }

/* small floral clusters bracketing the couple, like a hand-painted arch */
.floral-corner{
  display:none;
}
.fc-l{ left:-6%; }
.fc-r{ right:-6%; }
#revealed.enter .floral-corner{ opacity:0; }

/* names: stacked, ink-maroon script on the plain card — reads like print, not foil */
.names{
  flex:0 0 auto;
  width:100%;
  text-align:center;
  padding:80px 14px 0;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s ease .7s, transform .9s cubic-bezier(.22,1,.36,1) .7s;
}
#revealed.enter .names{ opacity:1; transform:translateY(0); }

.names-stack .first-name{
  display:block;
  font-family:'Great Vibes','Petit Formal Script','Brush Script MT',cursive;
  font-size:42px;
  line-height:1.08;
  font-weight:400;
  color:var(--maroon);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.names-stack .wed-word{
  display:block;
  font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;
  font-style:italic;
  font-size:17px;
  letter-spacing:.3em;
  text-transform:lowercase;
  color:var(--maroon);
  opacity:.9;
  margin:6px 0;
}

/* ---------- scroll-down cue ---------- */
.scroll-cta{
  appearance:none; border:none; background:none; margin:0;
  width:100%;
  font:inherit;
  cursor:pointer;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding-bottom:6px;
  opacity:0;
  transition:opacity .9s ease 1.05s;
}
#revealed.enter .scroll-cta{ opacity:1; }
.scroll-cta span{
  font-family:'EB Garamond',Georgia,serif;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--maroon);
  border:1px solid rgba(124,27,43,.35);
  border-radius:999px;
  padding:9px 20px;
  background:rgba(255,255,255,.5);
}
.chev{
  width:16px; height:8px;
  color:var(--maroon);
  opacity:.75;
  animation:chev-bounce 1.8s ease-in-out infinite;
}
@keyframes chev-bounce{
  0%,100%{ transform:translateY(0); opacity:.4; }
  50%{ transform:translateY(4px); opacity:.85; }
}

/* ================= INVITATION-FRAME PAGE (second snap page) ================= */
#invitePage{
  background:var(--paper);
}
.invite-frame-wrap{
  position:absolute; inset:0;
  width:100%; height:100%;
  container-type:inline-size;
  container-name:invite;
}
.invite-frame-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
  display:block;
  user-select:none; -webkit-user-drag:none;
}

.invite-overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6% 17%;
}
.invite-bismillah,
.invite-sub,
.invite-names,
.invite-request{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
#invitePage.enter .invite-bismillah{ opacity:.9; transform:translateY(0); transition-delay:.5s; }
#invitePage.enter .invite-sub{ opacity:.8; transform:translateY(0); transition-delay:.65s; }
#invitePage.enter .invite-names{ opacity:1; transform:translateY(0); transition-delay:.8s; }
#invitePage.enter .invite-request{ opacity:.8; transform:translateY(0); transition-delay:1s; }

.invite-bismillah{
  font-family:'Amiri','Scheherazade New','Traditional Arabic',serif;
  font-size:5.6cqw;
  white-space:nowrap;
  line-height:1.5;
  letter-spacing:0;
  color:var(--maroon);
}
.invite-sub{
  font-family:'EB Garamond',Georgia,serif;
  font-size:3.4cqw;
  letter-spacing:.08em;
  color:var(--ink);
  margin-top:2.2cqw;
  line-height:1.5;
}
.invite-names{ margin-top:3.6cqw; }
.invite-names .first-name{
  font-size:13.5cqw;
  line-height:1.05;
}
.invite-names .wed-word{
  font-size:4.6cqw;
  margin:1.6cqw 0;
}
.invite-request{ margin-top:3.6cqw; }

@media (prefers-reduced-motion: reduce){
  .invite-frame-img, .invite-bismillah, .invite-sub, .invite-names, .invite-request{
    transition:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ================= FAMILIES PAGE (third snap page) ================= */
/* everything sized by flex ratios + %/cqh so the whole page (header, both
   portraits, both name lists) always fits inside one screen, no inner scroll */
#familiesPage{
  background:
    radial-gradient(75% 36% at 50% 0%, rgba(232,193,100,.30) 0%, rgba(232,193,100,0) 72%),
    radial-gradient(70% 34% at 50% 100%, rgba(193,124,134,.24) 0%, rgba(193,124,134,0) 72%),
    repeating-linear-gradient(45deg, rgba(207,159,58,.075) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg, rgba(207,159,58,.075) 0 1px, transparent 1px 15px),
    linear-gradient(180deg, #fffaf0 0%, #fcf0e4 55%, #f6e1d2 100%);
  container-type:size;
  container-name:families;
}
/* ornamental frame around the whole page: a fine double hairline plus
   open corner brackets, in the same gold the rest of the invite uses */
.families-outer-frame{
  position:absolute;
  inset:5.5% 4.5%;
  z-index:0;
  border:1px solid rgba(207,159,58,.45);
  opacity:0;
  transform:scale(.97);
  transition:opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1);
}
#familiesPage.enter .families-outer-frame{ opacity:1; transform:scale(1); transition-delay:.15s; }
.families-outer-frame::before{
  content:"";
  position:absolute; inset:6px;
  border:1px solid rgba(207,159,58,.45);
}
.ff-corner{
  position:absolute;
  width:22px; height:22px;
  border:1.6px solid var(--gold);
}
.ff-corner.tl{ top:-1px;    left:-1px;  border-right:none;  border-bottom:none; }
.ff-corner.tr{ top:-1px;    right:-1px; border-left:none;   border-bottom:none; }
.ff-corner.bl{ bottom:-1px; left:-1px;  border-right:none;  border-top:none; }
.ff-corner.br{ bottom:-1px; right:-1px; border-left:none;   border-top:none; }

.families-content{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3.2cqh;
  padding:7% 6% 5%;
}

.families-header{
  flex:0 0 auto;
  text-align:center;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
#familiesPage.enter .families-header{ opacity:1; transform:translateY(0); transition-delay:.3s; }

.families-ornament{
  font-size:3.4cqh;
  color:var(--gold);
  margin-bottom:2px;
}
.families-title{
  margin:0;
  font-family:'Great Vibes','Petit Formal Script',cursive;
  font-weight:400;
  font-size:7.4cqh;
  line-height:1;
  color:var(--maroon);
}
.families-rule{
  width:17cqw; height:1px;
  max-width:70px;
  margin:1.6cqh auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

.families-row{
  flex:0 0 auto;
  width:100%;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:2%;
}

.family-col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
#familiesPage.enter .family-col[data-side="groom"]{ opacity:1; transform:translateY(0); transition-delay:.5s; }
#familiesPage.enter .family-col[data-side="bride"]{ opacity:1; transform:translateY(0); transition-delay:.85s; }

.family-side-label{
  flex:0 0 auto;
  width:100%;
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-style:italic;
  font-size:1.9cqh;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
  margin-bottom:1.6cqh;
}

.family-portrait-frame{
  position:relative;
  flex:0 0 auto;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
/* gold arch window behind each portrait */
.fp-arch{
  position:absolute; left:50%; top:3%; bottom:0; width:92%;
  transform:translateX(-50%);
  border-radius:999px 999px 8px 8px;
  background:radial-gradient(90% 70% at 50% 25%, #ffffff 0%, #fbeed6 70%, #f4dcb8 100%);
  border:1.5px solid var(--gold);
  box-shadow:0 0 0 3px rgba(255,250,240,.9), 0 0 0 4px rgba(207,159,58,.55), 0 1.6cqh 2.4cqh -1.2cqh rgba(124,27,43,.4);
}
.family-portrait{ position:relative; z-index:1; }
.family-portrait{
  max-height:27cqh;
  max-width:92%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 1.4cqh 1.6cqh rgba(26,14,10,.3));
}

.family-parents{
  flex:0 0 auto;
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-weight:600;
  font-size:2.3cqh;
  line-height:1.2;
  color:var(--maroon);
  margin:1.6cqh 0 1.2cqh;
}

.family-members{
  flex:0 0 auto;
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1cqh;
}
.family-members li{
  border:1px solid rgba(207,159,58,.4);
  background:rgba(255,255,255,.7);
  border-radius:8px;
  padding:.8cqh 1cqw;
}
.fm-name{
  display:block;
  font-family:'EB Garamond',Georgia,serif;
  font-weight:600;
  font-size:1.95cqh;
  letter-spacing:.01em;
  color:var(--maroon);
}
.fm-relation{
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:1.65cqh;
  color:var(--ink);
  opacity:.72;
  margin-top:1px;
}

.family-divider{
  flex:0 0 auto;
  align-self:center;
  font-family:'Great Vibes','Petit Formal Script',cursive;
  font-size:2.8cqh;
  color:var(--gold);
  opacity:0;
  transition:opacity 1s ease .95s;
}
#familiesPage.enter .family-divider{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .families-header, .family-col, .family-divider, .families-outer-frame{
    transition:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ================= COUNTDOWN / SCRATCH-CARD PAGE (fourth snap page) ================= */
#countdownPage{
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-shade) 100%);
  container-type:size;
  container-name:ctd;
}
.countdown-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.4cqh;
  padding:6% 8%;
  text-align:center;
}
.countdown-ornament,
.countdown-title,
.countdown-sub,
.scratch-grid,
.scratch-hint,
.countdown-date{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
#countdownPage.enter .countdown-ornament{ opacity:1; transform:translateY(0); transition-delay:.1s; }
#countdownPage.enter .countdown-title{   opacity:1; transform:translateY(0); transition-delay:.25s; }
#countdownPage.enter .countdown-sub{     opacity:.9; transform:translateY(0); transition-delay:.4s; }
#countdownPage.enter .scratch-grid{      opacity:1; transform:translateY(0); transition-delay:.55s; }
#countdownPage.enter .scratch-hint{      opacity:.85; transform:translateY(0); transition-delay:.8s; }
#countdownPage.enter .countdown-date{    opacity:1; transform:translateY(0); transition-delay:.95s; }

.countdown-ornament{ font-size:3.4cqh; color:var(--gold); }
.countdown-title{
  margin:0;
  font-family:'Great Vibes','Petit Formal Script',cursive;
  font-weight:400;
  font-size:9cqh;
  line-height:1;
  color:var(--maroon);
}
.countdown-sub{
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-style:italic;
  font-size:3cqh;
  letter-spacing:.08em;
  color:var(--ink);
  opacity:.75;
  margin-bottom:.6cqh;
}

.scratch-grid{
  touch-action:none;
  user-select:none; -webkit-user-select:none;
  width:100%;
  max-width:300px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4.5%;
  margin-top:1cqh;
}
.scratch-card{
  position:relative;
  aspect-ratio:3/1.55;
  border-radius:10px;
  background:#d7a193;
  box-shadow:0 8px 16px -6px rgba(124,27,43,.35);
  overflow:visible;
}
/* little red fringe peeking from beneath the gold card, like tassel trim */
.scratch-card::after{
  content:"";
  position:absolute;
  left:4%; right:4%; bottom:-6px;
  height:9px;
  background:
    linear-gradient(135deg, var(--maroon-light) 25%, transparent 25.5%) 0 0/9px 9px,
    linear-gradient(-135deg, var(--maroon-light) 25%, transparent 25.5%) 0 0/9px 9px;
  opacity:.9;
  z-index:0;
}
.scratch-reveal{
  position:absolute; inset:0;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(165deg, var(--paper) 0%, var(--paper-shade) 100%);
  box-shadow:inset 0 0 0 1px rgba(207,159,58,.4);
}
.sc-num{
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-weight:700;
  font-size:5.2cqh;
  line-height:1;
  color:var(--maroon);
}
.sc-label{
  font-family:'EB Garamond',Georgia,serif;
  font-size:1.5cqh;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:3px;
}
.scratch-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:10px;
  touch-action:none;
  cursor:crosshair;
  transition:opacity .55s ease, transform .55s ease;
}
.scratch-canvas.fade-out{ opacity:0; transform:scale(1.04); }
.scratch-card.revealed .scratch-reveal{ animation:card-pop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes card-pop{
  0%{ transform:scale(.92); }
  60%{ transform:scale(1.05); }
  100%{ transform:scale(1); }
}

.scratch-hint{
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-style:italic;
  font-size:2cqh;
  color:var(--ink);
  opacity:.7;
  margin-top:.8cqh;
}
.countdown-date{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:'EB Garamond',Georgia,serif;
  font-size:2.2cqh;
  letter-spacing:.02em;
  color:var(--maroon);
  margin-top:.6cqh;
}
.countdown-date svg{ width:16px; height:16px; flex:0 0 auto; }

/* ---------- celebration burst: red rose petals + leaves ---------- */
.celebrate-field{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:5;
}
.confetto{
  position:absolute;
  left:50%; top:50%;
  opacity:0;
  animation:confetti-burst var(--fall-dur, 7s) cubic-bezier(.12,.55,.3,1) var(--fall-delay, 0s) forwards;
}
.confetto svg{ width:100%; height:100%; display:block; }
/* every petal/leaf spawns at the centre and drifts slowly upward, never down */
@keyframes confetti-burst{
  0%{   transform:translate(-50%,-50%) translate(0,0) scale(.3) rotate(0deg); opacity:0; }
  10%{  opacity:1; }
  70%{  opacity:.95; }
  100%{ transform:translate(-50%,-50%) translate(var(--tx,0px), var(--ty,-240px)) scale(1) rotate(var(--spin,280deg)); opacity:0; }
}

/* ---------- small scroll chevron between families & countdown pages ---------- */
.page-next-cta{
  appearance:none; border:none; background:rgba(255,255,255,.55);
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(124,27,43,.25);
  color:var(--maroon);
  cursor:pointer;
  opacity:0;
  transition:opacity .8s ease;
}
#familiesPage.enter .page-next-cta,
#countdownPage.enter .page-next-cta,
#messagePage.enter .page-next-cta{ opacity:1; transition-delay:1.1s; }
.page-next-cta .chev{ width:13px; height:7px; animation:chev-bounce 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .countdown-ornament, .countdown-title, .countdown-sub, .scratch-grid, .scratch-hint, .countdown-date, .page-next-cta{
    transition:none !important; opacity:1 !important; transform:none !important;
  }
  .confetto{ display:none !important; }
  .scratch-card.revealed .scratch-reveal{ animation:none !important; }
}


/* ================= EVENTS PAGE (fifth snap page) — deep wine, gold timeline ================= */
#eventsPage{
  background:linear-gradient(170deg, #4d1022 0%, #36091a 55%, #260612 100%);
  container-type:size;
  container-name:events;
}
.events-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 38% at 50% 0%, rgba(232,193,100,.22) 0%, rgba(232,193,100,0) 70%),
    radial-gradient(60% 30% at 50% 100%, rgba(193,124,134,.18) 0%, rgba(193,124,134,0) 70%);
  pointer-events:none;
}
.events-border{
  position:absolute;
  inset:3.6% 5.5%;
  border:1px solid rgba(232,193,100,.4);
  pointer-events:none;
  opacity:0;
  transform:scale(.97);
  transition:opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1);
}
#eventsPage.enter .events-border{ opacity:1; transform:scale(1); transition-delay:.15s; }
.events-border .ff-corner{ border-color:var(--gold-bright); }

.events-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:7cqh 11cqw 9cqh;
  text-align:center;
}
.events-ornament,
.events-title,
.events-sub,
.event-row,
.event-sep{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.events-ornament{ font-size:3.2cqh; color:var(--gold-bright); }
.events-title{
  margin:0;
  font-family:'Great Vibes','Petit Formal Script',cursive;
  font-weight:400;
  font-size:8.6cqh;
  line-height:1;
  color:#fbefdc;
}
.events-sub{
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-style:italic;
  font-size:2.5cqh;
  letter-spacing:.1em;
  color:var(--gold-bright);
  margin:.6cqh 0 3.4cqh;
}
#eventsPage.enter .events-ornament{ opacity:1; transform:none; transition-delay:.1s; }
#eventsPage.enter .events-title{    opacity:1; transform:none; transition-delay:.25s; }
#eventsPage.enter .events-sub{      opacity:.95; transform:none; transition-delay:.4s; }

.events-list{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.event-row{
  display:flex;
  align-items:center;
  gap:5cqw;
  text-align:left;
}
.event-when{
  flex:0 0 22cqw;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-right:5cqw;
  border-right:1px solid rgba(232,193,100,.5);
}
.ev-day{
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-weight:700;
  font-size:6.4cqh;
  line-height:.95;
  color:var(--gold-bright);
}
.ev-month{
  font-family:'EB Garamond',Georgia,serif;
  font-size:1.65cqh;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#f2d9ad;
  margin-top:.7cqh;
  padding-left:.24em;
}
.ev-year{
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-size:1.8cqh;
  letter-spacing:.14em;
  color:rgba(251,239,220,.65);
  margin-top:.3cqh;
}
.event-info{ flex:1 1 0; min-width:0; }
.event-name{
  margin:0;
  font-family:'Great Vibes','Petit Formal Script',cursive;
  font-weight:400;
  font-size:5.2cqh;
  line-height:1.05;
  color:#fbefdc;
}
.event-time{
  font-family:'EB Garamond',Georgia,serif;
  font-size:1.65cqh;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-bright);
  margin-top:.7cqh;
}
.event-venue{
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-style:italic;
  font-size:2.15cqh;
  line-height:1.25;
  color:rgba(251,239,220,.82);
  margin-top:.5cqh;
}
.event-sep{
  display:flex; align-items:center; justify-content:center;
  margin:2.4cqh 0;
}
.event-sep i{
  display:block; width:46%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,193,100,.7), transparent);
  position:relative;
}
.event-sep i::after{
  content:""; position:absolute; left:50%; top:50%;
  width:5px; height:5px; background:var(--gold-bright);
  transform:translate(-50%,-50%) rotate(45deg);
}
#eventsPage.enter .event-row:nth-child(1){ opacity:1; transform:none; transition-delay:.55s; }
#eventsPage.enter .event-sep:nth-child(2){ opacity:1; transform:none; transition-delay:.7s; }
#eventsPage.enter .event-row:nth-child(3){ opacity:1; transform:none; transition-delay:.85s; }
#eventsPage.enter .event-sep:nth-child(4){ opacity:1; transform:none; transition-delay:1s; }
#eventsPage.enter .event-row:nth-child(5){ opacity:1; transform:none; transition-delay:1.15s; }

/* chevron on the dark events page */
.page-next-cta.on-dark{
  background:rgba(255,255,255,.08);
  border-color:rgba(232,193,100,.55);
  color:var(--gold-bright);
  z-index:3;
}
#eventsPage.enter .page-next-cta{ opacity:1; transition-delay:1.4s; }

/* ================= MESSAGE PAGE (sixth snap page) — full-screen floral frame, centred text ================= */
#messagePage{
  background:#efe6d5;
  container-type:size;
  container-name:message;
}
.message-frame-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
  display:block;
  user-select:none; -webkit-user-drag:none;
  pointer-events:none;
}
.message-content{
  position:absolute; inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:25cqh 20cqw 12cqh;
  text-align:center;
}
.message-names,
.message-title,
.message-orn,
.message-text,
.message-chips{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1);
}
#messagePage.enter .message-names{ opacity:1; transform:none; transition-delay:.2s; }
#messagePage.enter .message-title{ opacity:1; transform:none; transition-delay:.4s; }
#messagePage.enter .message-orn{   opacity:1; transform:none; transition-delay:.6s; }
#messagePage.enter .message-text{  opacity:1; transform:none; transition-delay:.8s; }
#messagePage.enter .message-chips{ opacity:1; transform:none; transition-delay:1s; }

.message-names{
  display:flex; align-items:center; justify-content:center; gap:2.4cqw;
  font-family:'Great Vibes','Petit Formal Script',cursive;
  font-size:3.9cqh;
  line-height:1;
  color:var(--maroon);
  margin-bottom:2.4cqh;
}
.msg-heart{ font-style:normal; font-size:1.7cqh; color:var(--maroon-bright); }
.message-title{
  margin:0;
  font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;
  font-weight:700;
  font-size:3.9cqh;
  line-height:1.25;
  color:#2c2321;
}
.message-orn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:2cqh 0 2.2cqh;
  color:var(--gold);
}
.message-orn i{
  display:block; width:13cqw; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.message-orn i:last-child{ background:linear-gradient(270deg, transparent, var(--gold)); }
.message-orn b{ font-weight:400; font-size:1.8cqh; line-height:1; }
.message-text{
  margin:0;
  font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;
  font-weight:600;
  font-size:2.35cqh;
  line-height:1.45;
  color:#4a3a34;
}

/* event chips — tap to jump to that event */
.message-chips{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:1.2cqh 2cqw;
  margin-top:3cqh;
}
.msg-chip{
  appearance:none;
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-weight:600;
  font-size:2cqh;
  letter-spacing:.04em;
  color:var(--maroon);
  background:rgba(124,27,43,.07);
  border:1px solid rgba(207,159,58,.65);
  border-radius:999px;
  padding:.9cqh 3.4cqw;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.msg-chip:hover, .msg-chip:focus-visible{ background:var(--maroon); color:#fbefdc; outline:none; }
.msg-chip:active{ transform:scale(.95); }

/* the event the chip jumped to glows briefly */
.event-row.hl .event-name{ color:var(--gold-bright); transition:color .4s ease; }
.event-row.hl .event-when{ border-right-color:var(--gold-bright); }
.event-row.hl{ animation:ev-glow 2s ease-out 1; }
@keyframes ev-glow{
  0%,100%{ filter:none; }
  30%{ filter:drop-shadow(0 0 10px rgba(232,193,100,.55)); }
}

@media (prefers-reduced-motion: reduce){
  .events-ornament, .events-title, .events-sub, .event-row, .event-sep, .events-border,
  .message-names, .message-title, .message-orn, .message-text, .message-chips{
    transition:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ================= SHARED GOLD FRAME (double hairline + corners + side diamonds) ================= */
.gold-frame{
  position:absolute;
  inset:var(--fr-inset, 4.2% 5.5%);
  z-index:0;
  border:1px solid var(--fr-line, rgba(207,159,58,.55));
  pointer-events:none;
  opacity:0;
  transform:scale(.97);
  transition:opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1);
}
.snap-section.enter .gold-frame{ opacity:1; transform:scale(1); transition-delay:.15s; }
.gold-frame::before{
  content:"";
  position:absolute; inset:6px;
  border:1px solid var(--fr-line, rgba(207,159,58,.55));
}
.gold-frame .ff-corner{ border-color:var(--fr-corner, var(--gold)); }
.gold-frame .ff-mid{
  position:absolute;
  top:50%;
  width:7px; height:7px;
  background:var(--fr-corner, var(--gold));
  transform:translateY(-50%) rotate(45deg);
}
.gold-frame .ff-mid.l{ left:-4px; }
.gold-frame .ff-mid.r{ right:-4px; }
@media (prefers-reduced-motion: reduce){
  .gold-frame{ transition:none !important; opacity:1 !important; transform:none !important; }
}

/* ================= EVENT DETAIL PAGES (Mehndi / Nikkah / Walima) =================
   one shared layout; every page picks its own colours through the variables below */
.ev-page{
  container-type:size;
  background:var(--pg-bg);
  --fr-line:var(--acc-line);
  --fr-corner:var(--acc);
}
.theme-mehndi{
  --pg-bg:linear-gradient(175deg, #0f4331 0%, #0a3024 52%, #061f17 100%);
  --glow-a:rgba(244,185,66,.30); --glow-b:rgba(244,185,66,.14);
  --acc:#f4b942; --acc-line:rgba(244,185,66,.42);
  --title:#ffd877; --title-glow:rgba(244,185,66,.28);
  --ink:#fff4d6; --ink-soft:rgba(255,236,190,.8); --row-ink:#ffe7ae;
  --panel:rgba(255,255,255,.06); --panel-line:rgba(244,185,66,.32); --row-line:rgba(244,185,66,.2);
  --pill-bg:linear-gradient(135deg,#ffe49a 0%,#f1b93d 55%,#fbd985 100%); --pill-ink:#1b2a10;
  --btn-line:rgba(244,185,66,.7); --btn-bg:rgba(244,185,66,.08); --btn-ink:#ffe7ae;
  --btn-hover-bg:#f4b942; --btn-hover-ink:#0a3024;
  --next-ink:#ffe7ae; --next-line:rgba(244,185,66,.5); --next-bg:rgba(255,255,255,.08);
  --snd-bg:rgba(255,255,255,.1);
  --win-bg:radial-gradient(90% 60% at 50% 30%, rgba(244,185,66,.38) 0%, rgba(244,185,66,0) 70%), linear-gradient(180deg, #1d6a4d 0%, #0e3b2b 100%);
}
.theme-nikkah{
  --pg-bg:linear-gradient(175deg, #5c1024 0%, #3e0a18 55%, #270510 100%);
  --glow-a:rgba(232,193,100,.26); --glow-b:rgba(193,124,134,.2);
  --acc:#e8c164; --acc-line:rgba(232,193,100,.45);
  --title:#fbefdc; --title-glow:rgba(232,193,100,.25);
  --ink:#fff1dc; --ink-soft:rgba(251,232,205,.82); --row-ink:#f3d9a8;
  --panel:rgba(255,255,255,.06); --panel-line:rgba(232,193,100,.34); --row-line:rgba(232,193,100,.22);
  --pill-bg:linear-gradient(135deg,#f9e2a6 0%,#d5ad4a 55%,#efce82 100%); --pill-ink:#3a0a14;
  --btn-line:rgba(232,193,100,.7); --btn-bg:rgba(232,193,100,.08); --btn-ink:#f3d9a8;
  --btn-hover-bg:#e8c164; --btn-hover-ink:#3a0a14;
  --next-ink:#f3d9a8; --next-line:rgba(232,193,100,.5); --next-bg:rgba(255,255,255,.08);
  --snd-bg:rgba(255,255,255,.1);
}
.theme-walima{
  --pg-bg:linear-gradient(175deg, #fbf6ee 0%, #efe4d2 55%, #e2d2bb 100%);
  --glow-a:rgba(255,255,255,.9); --glow-b:rgba(176,138,74,.16);
  --acc:#b08a4a; --acc-line:rgba(176,138,74,.55);
  --title:#4a3b33; --title-glow:rgba(255,255,255,.6);
  --ink:#3b2f2a; --ink-soft:#6b5a50; --row-ink:#6b5a50;
  --panel:rgba(255,255,255,.6); --panel-line:rgba(176,138,74,.45); --row-line:rgba(176,138,74,.28);
  --pill-bg:linear-gradient(135deg,#5a4a40 0%,#2e2420 100%); --pill-ink:#f6ecd9;
  --btn-line:rgba(74,59,51,.6); --btn-bg:rgba(255,255,255,.4); --btn-ink:#4a3b33;
  --btn-hover-bg:#4a3b33; --btn-hover-ink:#f6ecd9;
  --next-ink:#4a3b33; --next-line:rgba(74,59,51,.4); --next-bg:rgba(255,255,255,.6);
  --snd-bg:rgba(255,255,255,.7);
}

.mh-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(75% 40% at 50% 22%, var(--glow-a) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(60% 28% at 50% 100%, var(--glow-b) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.mh-petals{ height:100%; z-index:1; }
.mh-frame{ --fr-inset:3.4% 5% 7.4% 5%; }

.mh-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:7.6cqh 9cqw 10.6cqh;
  text-align:center;
}
.mh-arch,
.mh-ornament,
.mh-title,
.mh-guests,
.mh-info,
.mh-actions{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.ev-page.enter .mh-arch{     opacity:1; transform:none; transition-delay:.2s; }
.ev-page.enter .mh-ornament{ opacity:1; transform:none; transition-delay:.5s; }
.ev-page.enter .mh-title{    opacity:1; transform:none; transition-delay:.6s; }
.ev-page.enter .mh-guests{   opacity:1; transform:none; transition-delay:.75s; }
.ev-page.enter .mh-info{     opacity:1; transform:none; transition-delay:.9s; }
.ev-page.enter .mh-actions{  opacity:1; transform:none; transition-delay:1.05s; }

/* ---- couple window (default = arch, used by Mehndi) ---- */
.mh-arch{
  position:relative;
  flex:0 0 auto;
  height:28.5cqh;
  aspect-ratio:.74;
  border-radius:999px 999px 14px 14px;
  background:var(--win-bg);
  border:1.5px solid var(--acc);
  box-shadow:0 0 0 5px rgba(244,185,66,.12), 0 0 0 6px rgba(244,185,66,.5), 0 18px 28px -14px rgba(0,0,0,.6);
  overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
}
.mh-couple{
  height:93%;
  width:auto;
  max-width:96%;
  object-fit:contain;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.45));
}

/* ---- Nikkah: the couple stands free in front of a gold halo ring ---- */
.theme-nikkah .mh-arch{
  aspect-ratio:.66;
  border:none; border-radius:0; background:none; box-shadow:none;
  overflow:visible;
}
.theme-nikkah .mh-arch::before{ /* halo disc */
  content:"";
  position:absolute;
  left:50%; top:9%;
  width:150%; aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,193,100,.30) 0%, rgba(232,193,100,.08) 58%, rgba(232,193,100,0) 70%);
  border:1.5px solid rgba(232,193,100,.75);
  box-shadow:0 0 0 7px rgba(232,193,100,.1), inset 0 0 28px rgba(232,193,100,.18);
}
.theme-nikkah .mh-arch::after{ /* second, finer ring */
  content:"";
  position:absolute;
  left:50%; top:9%;
  width:178%; aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  border:1px dashed rgba(232,193,100,.4);
}
.theme-nikkah .mh-couple{ position:relative; z-index:2; height:100%; max-width:none; }

/* ---- Walima: soft spotlight + floor ellipse on the light page ---- */
.theme-walima .mh-arch{
  aspect-ratio:.66;
  border:none; border-radius:0; background:none; box-shadow:none;
  overflow:visible;
}
.theme-walima .mh-arch::before{ /* spotlight */
  content:"";
  position:absolute;
  left:50%; top:-4%;
  width:190%; height:108%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 55%, rgba(255,255,255,0) 100%);
}
.theme-walima .mh-arch::after{ /* floor ring */
  content:"";
  position:absolute;
  left:50%; bottom:-2%;
  width:165%; height:9%;
  transform:translateX(-50%);
  border-radius:50%;
  border:1px solid rgba(176,138,74,.6);
  background:radial-gradient(closest-side, rgba(74,59,51,.18), rgba(74,59,51,0));
}
.theme-walima .mh-couple{ position:relative; z-index:2; height:100%; max-width:none; filter:drop-shadow(0 12px 12px rgba(74,59,51,.35)); }

.mh-ornament{ font-size:2.6cqh; color:var(--acc); margin-top:1.8cqh; line-height:1; }
.theme-nikkah .mh-ornament, .theme-walima .mh-ornament{ margin-top:2.4cqh; }
.mh-title{
  margin:.2cqh 0 0;
  font-family:'Great Vibes','Petit Formal Script',cursive;
  font-weight:400;
  font-size:7cqh;
  line-height:1.05;
  color:var(--title);
  text-shadow:0 2px 12px var(--title-glow);
}
.mh-guests{
  margin-top:.8cqh;
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-weight:700;
  font-size:1.95cqh;
  letter-spacing:.04em;
  color:var(--pill-ink);
  padding:.7cqh 4.6cqw;
  border-radius:999px;
  background:var(--pill-bg);
  box-shadow:0 6px 14px -8px rgba(0,0,0,.6);
}

.mh-info{
  width:100%;
  margin-top:1.8cqh;
  padding:.8cqh 4cqw;
  border-radius:12px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  display:flex; flex-direction:column;
  text-align:left;
}
.mh-row{
  display:flex; align-items:center; gap:3.4cqw;
  padding:.9cqh 0;
  color:var(--row-ink);
}
.mh-row + .mh-row{ border-top:1px solid var(--row-line); }
.mh-row svg{ width:2.7cqh; height:2.7cqh; flex:0 0 auto; color:var(--acc); }
.mh-row b{
  display:block;
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-weight:700;
  font-size:2.35cqh;
  line-height:1.15;
  color:var(--ink);
}
.mh-row span{
  display:block;
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-size:1.9cqh;
  line-height:1.2;
  color:var(--ink-soft);
}
.mh-row .mh-dress b{ display:inline; font-size:1.9cqh; }

.mh-actions{
  width:100%;
  margin-top:1.6cqh;
  display:flex; flex-direction:column; align-items:center; gap:.9cqh;
}
.mh-btn{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:2.2cqw;
  min-width:56cqw;
  padding:1.1cqh 5cqw;
  border-radius:999px;
  border:1px solid var(--btn-line);
  background:var(--btn-bg);
  color:var(--btn-ink);
  font-family:'EB Garamond',Georgia,serif;
  font-size:1.65cqh;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.mh-btn svg{ width:2cqh; height:2cqh; flex:0 0 auto; }
.mh-btn:hover, .mh-btn:focus-visible{ background:var(--btn-hover-bg); color:var(--btn-hover-ink); outline:none; }
.mh-btn:active{ transform:scale(.96); }

.mh-next{
  appearance:none; border:none; background:none; margin:0; padding:0;
  position:absolute; left:50%; bottom:1.6cqh; transform:translateX(-50%);
  z-index:4;
  cursor:pointer;
  color:var(--next-ink);
  opacity:0;
  transition:opacity .8s ease;
}
.ev-page.enter .mh-next{ opacity:1; transition-delay:1.3s; }
.mh-next span{
  display:block;
  font-family:'EB Garamond',Georgia,serif;
  font-size:1.5cqh;
  letter-spacing:.22em;
  text-transform:uppercase;
  border:1px solid var(--next-line);
  border-radius:999px;
  padding:.8cqh 4.5cqw;
  background:var(--next-bg);
}

@media (prefers-reduced-motion: reduce){
  .mh-arch, .mh-ornament, .mh-title, .mh-guests, .mh-info, .mh-actions, .mh-next{
    transition:none !important; opacity:1 !important; transform:none !important;
  }
  .mh-next{ transform:translateX(-50%) !important; }
}


/* ================= FAQ PAGE — blush ivory, tap-to-open questions ================= */
.theme-faq{
  --pg-bg:linear-gradient(175deg, #fdf8f2 0%, #f8e9e4 55%, #f0d8d3 100%);
  --glow-a:rgba(255,255,255,.95); --glow-b:rgba(193,124,134,.2);
  --acc:#c79a42; --acc-line:rgba(207,159,58,.55);
  --next-ink:var(--maroon); --next-line:rgba(124,27,43,.35); --next-bg:rgba(255,255,255,.65);
  --snd-bg:rgba(255,255,255,.75);
}
.faq-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:7.4cqh 9cqw 10.4cqh;
  text-align:center;
}
.faq-ornament,
.faq-title,
.faq-sub,
.faq-item,
.faq-foot{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.ev-page.enter .faq-ornament{ opacity:1; transform:none; transition-delay:.1s; }
.ev-page.enter .faq-title{    opacity:1; transform:none; transition-delay:.25s; }
.ev-page.enter .faq-sub{      opacity:.9; transform:none; transition-delay:.4s; }
.ev-page.enter .faq-item{     opacity:1; transform:none; }
.ev-page.enter .faq-item:nth-child(1){ transition-delay:.55s; }
.ev-page.enter .faq-item:nth-child(2){ transition-delay:.7s; }
.ev-page.enter .faq-item:nth-child(3){ transition-delay:.85s; }
.ev-page.enter .faq-item:nth-child(4){ transition-delay:1s; }
.ev-page.enter .faq-item:nth-child(5){ transition-delay:1.15s; }
.ev-page.enter .faq-foot{     opacity:.85; transform:none; transition-delay:1.35s; }

.faq-ornament{ font-size:3cqh; color:var(--acc); line-height:1; }
.faq-title{
  margin:.4cqh 0 0;
  font-family:'Great Vibes','Petit Formal Script',cursive;
  font-weight:400;
  font-size:7.8cqh;
  line-height:1.05;
  color:var(--maroon);
}
.faq-sub{
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-style:italic;
  font-size:2.3cqh;
  letter-spacing:.1em;
  color:var(--ink);
  margin:.5cqh 0 2.6cqh;
}

.faq-list{
  width:100%;
  display:flex; flex-direction:column; gap:1.2cqh;
  text-align:left;
}
.faq-item{
  border-radius:12px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(207,159,58,.4);
  box-shadow:0 8px 16px -14px rgba(124,27,43,.5);
  overflow:hidden;
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1), background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.faq-item.open{
  background:rgba(255,255,255,.9);
  border-color:rgba(124,27,43,.4);
  box-shadow:0 12px 20px -14px rgba(124,27,43,.6);
}
.faq-q{
  appearance:none; border:none; background:none; margin:0;
  width:100%;
  display:flex; align-items:center; gap:3cqw;
  padding:1.5cqh 3.4cqw;
  text-align:left;
  cursor:pointer;
  color:var(--maroon);
}
.faq-num{
  flex:0 0 auto;
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-weight:700;
  font-size:1.9cqh;
  letter-spacing:.08em;
  color:var(--acc);
}
.faq-qt{
  flex:1 1 auto;
  font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;
  font-weight:700;
  font-size:2cqh;
  line-height:1.25;
  color:#3b2a2e;
}
.faq-item.open .faq-qt{ color:var(--maroon); }
.faq-icon{
  position:relative;
  flex:0 0 auto;
  width:2.4cqh; height:2.4cqh;
  border-radius:50%;
  border:1px solid rgba(124,27,43,.4);
  transition:background .3s ease, transform .35s ease, border-color .3s ease;
}
.faq-icon::before, .faq-icon::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:1cqh; height:1.5px;
  background:var(--maroon);
  transform:translate(-50%,-50%);
  transition:transform .35s ease, background .3s ease;
}
.faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item.open .faq-icon{ background:var(--maroon); border-color:var(--maroon); }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after{ background:#fbefdc; }
.faq-item.open .faq-icon::after{ transform:translate(-50%,-50%) rotate(0deg); }

.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1);
}
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{
  margin:0;
  padding:0 3.4cqw 1.7cqh calc(3.4cqw + 1.9cqh * 1.4 + 3cqw);
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-weight:500;
  font-size:1.95cqh;
  line-height:1.38;
  color:#5a4a46;
}
.faq-foot{
  margin-top:2.2cqh;
  font-family:'Cormorant Garamond','EB Garamond',serif;
  font-style:italic;
  font-size:1.85cqh;
  letter-spacing:.04em;
  color:var(--maroon);
}
.faq-foot::before{ content:"\2766\00a0"; color:var(--acc); font-style:normal; }

@media (prefers-reduced-motion: reduce){
  .faq-ornament, .faq-title, .faq-sub, .faq-item, .faq-foot{
    transition:none !important; opacity:1 !important; transform:none !important;
  }
  .faq-a{ transition:none !important; }
}


/* ---------- keyframes ---------- */
@keyframes seal-breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.02); }
}
@keyframes glow-breathe{
  0%,100%{ opacity:.4; transform:scale(1); }
  50%{ opacity:.75; transform:scale(1.07); }
}
@keyframes glow-burst{
  0%{   transform:scale(1);   opacity:.6; }
  45%{  transform:scale(2.2); opacity:.85; }
  100%{ transform:scale(3.2); opacity:0; }
}
@keyframes seal-sink{
  0%{   opacity:1; transform:scale(1) rotate(0deg); }
  100%{ opacity:0; transform:scale(.78) rotate(10deg); }
}
@keyframes flash-out{
  0%{ opacity:0; }
  35%{ opacity:1; }
  100%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .seal-btn{ animation:none !important; }
  .seal-glow{ animation:none !important; }
  .reveal-bg{ animation:none !important; }
  .petal{ animation:none !important; display:none; }
  .chev{ animation:none !important; }
  .names, .couple-photo, .floral-corner, .scroll-cta{ transition:none !important; opacity:1 !important; transform:none !important; }
}


/* ================= FINAL PAGE — peacock garden frame, full screen ================= */
#finalPage{ background:#f3e8cc; container-type:size; container-name:final; }
.final-frame-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%; display:block;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}
.final-petals{ height:100%; z-index:1; }
.final-content{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20cqh 19cqw 12cqh; text-align:center;
}
.final-kicker, .final-wait, .final-orn, .final-names, .final-date, .final-place{
  opacity:0; transform:translateY(14px);
  transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
}
#finalPage.enter .final-kicker{ opacity:1; transform:none; transition-delay:.2s; }
#finalPage.enter .final-wait{   opacity:1; transform:none; transition-delay:.45s; }
#finalPage.enter .final-orn{    opacity:1; transform:none; transition-delay:.7s; }
#finalPage.enter .final-names{  opacity:1; transform:none; transition-delay:.95s; }
#finalPage.enter .final-date{   opacity:1; transform:none; transition-delay:1.25s; }
#finalPage.enter .final-place{  opacity:1; transform:none; transition-delay:1.4s; }

.final-kicker{
  font-family:'Cormorant Garamond','EB Garamond',serif; font-style:italic;
  font-size:1.8cqh; letter-spacing:.16em; white-space:nowrap; text-transform:uppercase; color:#8a6522;
}
.final-wait{
  margin:1.4cqh 0 0;
  font-family:'Great Vibes','Petit Formal Script',cursive; font-weight:400;
  font-size:6.6cqh; line-height:1.12; color:#7c1b2b;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.final-orn{ display:flex; align-items:center; justify-content:center; gap:10px; margin:2.4cqh 0 2cqh; color:#b8892e; }
.final-orn i{ display:block; width:14cqw; height:1px; background:linear-gradient(90deg, transparent, #b8892e); }
.final-orn i:last-child{ background:linear-gradient(270deg, transparent, #b8892e); }
.final-orn b{ font-weight:400; font-size:1.9cqh; line-height:1; }
.final-names .first-name{ color:#7c1b2b; font-size:7.2cqh; line-height:1.05; text-shadow:0 1px 0 rgba(255,255,255,.55); }
.final-names .wed-word{ color:#7c1b2b; font-size:2.4cqh; margin:.6cqh 0; }
.final-date{
  margin-top:3cqh; font-family:'Cormorant Garamond','EB Garamond',serif; font-weight:700;
  font-size:2.5cqh; letter-spacing:.16em; text-transform:uppercase; color:#8a6522;
}
.final-place{
  margin-top:.5cqh; font-family:'Cormorant Garamond','EB Garamond',serif; font-style:italic;
  font-size:2.3cqh; letter-spacing:.2em; text-transform:uppercase; color:#7c1b2b;
}
@media (prefers-reduced-motion: reduce){
  .final-kicker,.final-wait,.final-orn,.final-names,.final-date,.final-place{ transition:none !important; opacity:1 !important; transform:none !important; }
}