/* ============================================================================
   FinalInvite — invite.css
   Image-based luxury wedding invitation. Envelope → 4 full-screen pages on the
   provided arch artworks, with text overlays, 3D gyro tilt, gloss, sparkles.
   Mobile-first.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Alex+Brush&family=Noto+Nastaliq+Urdu:wght@400;600&display=swap');

:root{
  --wine-900:#25060f; --wine-800:#3a0d1b; --wine-700:#551627;
  --gold-050:#fff3d0; --gold-100:#f6dd9e; --gold-300:#e9c46a; --gold-500:#d4af37; --gold-600:#b8892b;
  --cream:#f7efe0; --ink:#5f4b33; --ink-soft:#7c6b52;
  --ease:cubic-bezier(.22,1,.36,1);
  --script:'Alex Brush',cursive; --disp:'Cinzel',serif; --serif:'Cormorant Garamond',serif;
  --arabic:'Amiri',serif; --urdu:'Noto Nastaliq Urdu',serif;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;height:100%;}
html{scroll-behavior:smooth;}
body{
  background:#1a0209;color:var(--ink);font-family:var(--serif);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ------------------------------------------------------------- envelope */
#envelope{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:radial-gradient(90% 70% at 50% 40%,var(--wine-700),var(--wine-900) 72%,#12040a 100%);
  padding:8vw;perspective:1200px;transition:opacity 1s ease,visibility 1s;
}
#envelope.gone{opacity:0;visibility:hidden;pointer-events:none;}
.env-tag{position:absolute;top:max(7vh,env(safe-area-inset-top));left:0;right:0;text-align:center;
  font-family:var(--disp);letter-spacing:.42em;text-transform:uppercase;font-size:.6rem;color:var(--gold-300);
  opacity:0;animation:fade 1.4s var(--ease) .3s forwards;}
.env{position:relative;width:min(76vw,320px);aspect-ratio:3/2;transform-style:preserve-3d;
  filter:drop-shadow(0 30px 46px rgba(0,0,0,.55));animation:floatIn 1.4s var(--ease) both;}
.env-body{position:absolute;inset:0;border-radius:12px;background:linear-gradient(160deg,#f6efe0,#e7dcc6);
  border:1px solid rgba(184,137,43,.4);overflow:hidden;}
.env-flap{position:absolute;top:0;left:0;width:100%;height:58%;transform-origin:top;z-index:5;
  background:linear-gradient(180deg,#efe4cf,#f6efe0);clip-path:polygon(0 0,100% 0,50% 100%);
  border-bottom:1px solid rgba(184,137,43,.3);transition:transform 1.1s var(--ease);backface-visibility:hidden;}
.env.open .env-flap{transform:rotateX(-176deg);}
.env-seal{position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);z-index:8;
  width:clamp(78px,22vw,96px);aspect-ratio:1;border:0;background:transparent;padding:0;transition:transform .5s var(--ease),opacity .5s;}
.env.open .env-seal{opacity:0;transform:translate(-50%,-160%) scale(.7) rotate(-20deg);}
.seal-wax{position:relative;width:100%;height:100%;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 48%,#7a2230,#6b1c28 55%,#571521 100%);
  border-radius:47% 53% 51% 49% / 49% 47% 53% 51%;   /* irregular wax blob */
  box-shadow:inset 0 0 14px rgba(40,6,12,.55),inset 0 -3px 6px rgba(0,0,0,.35),
    inset 0 4px 8px rgba(255,220,210,.06),0 6px 16px rgba(0,0,0,.5);}
.seal-wax::before{content:"";position:absolute;inset:6%;border-radius:inherit;
  box-shadow:inset 0 0 0 2px rgba(30,4,10,.35),inset 0 2px 3px rgba(255,220,210,.05);}
.seal-wax::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  mix-blend-mode:overlay;opacity:.12;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");}
.seal-wax svg{width:64%;height:64%;position:relative;z-index:1;
  filter:drop-shadow(0 1px 0 rgba(255,220,200,.10)) drop-shadow(0 -1px 1px rgba(30,4,10,.6));}
.env-hint{position:absolute;bottom:max(8vh,env(safe-area-inset-bottom));left:0;right:0;text-align:center;
  font-family:var(--serif);font-style:italic;color:var(--gold-100);opacity:0;animation:fade 1.4s ease 1.4s forwards;}

/* ------------------------------------------------------------- controls */
.ctrl{position:fixed;z-index:70;top:max(1rem,env(safe-area-inset-top));width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(212,175,55,.5);background:rgba(37,6,15,.55);color:var(--gold-100);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .6s ease;}
.ctrl.show{opacity:1;}
#lang-toggle{left:1rem;width:auto;min-width:44px;padding:0 .8rem;font-family:'Noto Nastaliq Urdu',var(--disp);font-size:.95rem;}
#music-toggle{right:1rem;}

/* ---------------------------------------------------------------- deck */
#deck{position:relative;z-index:1;}
.page{
  position:relative;min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  scroll-snap-align:center;scroll-snap-stop:always;overflow:hidden;
  perspective:1000px;perspective-origin:50% 42%;
}
/* card locked to each artwork's aspect so text maps onto the arch on any phone */
.p1 .card{aspect-ratio:1728/2450;width:min(100vw,calc(100dvh*1728/2450));max-height:100dvh;}
.p2 .card,.p3 .card{aspect-ratio:768/1376;width:min(100vw,calc(100dvh*768/1376));max-height:100dvh;}
.p4 .card{aspect-ratio:896/1200;width:min(100vw,calc(100dvh*896/1200));max-height:100dvh;}
.page{background:#160208;}
/* blurred artwork fills the dead space so there are NEVER blank bands */
.bg-blur{position:absolute;inset:-8%;z-index:0;background-size:cover;background-position:center;
  filter:blur(36px) brightness(.55) saturate(1.05);transform:scale(1.15);pointer-events:none;}
.p1 .bg-blur{background-image:url(../assets/img/page1.jpg);}
.p2 .bg-blur{background-image:url(../assets/img/page2.jpg);}
.p3 .bg-blur{background-image:url(../assets/img/page3.jpg);}
.p4 .bg-blur{background-image:url(../assets/img/page4.jpg);}
/* soft dark scrim + inner shadow give the contained card a framed, premium seat */
.page::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  box-shadow:inset 0 0 120px 20px rgba(0,0,0,.5);}
#deck.snap{scroll-snap-type:y mandatory;overflow-y:scroll;height:100dvh;}

.card{position:relative;z-index:1;overflow:hidden;transform-style:preserve-3d;will-change:transform;
  box-shadow:0 30px 70px rgba(0,0,0,.55);border-radius:2px;}
.card .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* moving shadow side (opposes the gloss) = fixed-light illusion */
.vignette{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(140% 120% at var(--vx,50%) var(--vy,45%),transparent 55%,rgba(20,0,8,.4) 100%);}
/* personalized greeting (?to=Name) */
.greet{font-family:var(--disp);letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(.46rem,2.2vw,.62rem);margin-bottom:.6em;}
.cream .greet{color:#9a6b1e;} .velvet .greet,.frame .greet{color:var(--gold-300);}
@media (prefers-reduced-motion:no-preference){
  .card .art{animation:ken 20s ease-in-out infinite alternate;transform-origin:center 42%;}
}
@keyframes ken{from{transform:scale(1.02);}to{transform:scale(1.07);}}

/* moving specular gloss (driven by tilt/pointer) */
.gloss{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(60% 45% at var(--gx,50%) var(--gy,32%),rgba(255,246,214,.5),rgba(255,246,214,0) 60%);
  transition:background-position .1s;}
.sparkles{position:absolute;inset:0;pointer-events:none;}

/* text overlay mapped into each arch — .ov-inner auto-scales to never overflow */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;transform:translateZ(28px);will-change:transform;}
.ov-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;
  transform:scale(var(--fit,1));transform-origin:center;}
.ov-inner>*{opacity:0;transform:translateY(14px);}
.page.in .ov-inner>*{animation:rise .9s var(--ease) forwards;}
.page.in .ov-inner>*:nth-child(1){animation-delay:.25s}
.page.in .ov-inner>*:nth-child(2){animation-delay:.45s}
.page.in .ov-inner>*:nth-child(3){animation-delay:.65s}
.page.in .ov-inner>*:nth-child(4){animation-delay:.85s}
.page.in .ov-inner>*:nth-child(5){animation-delay:1.05s}
.page.in .ov-inner>*:nth-child(6){animation-delay:1.25s}
.page.in .ov-inner>*:nth-child(7){animation-delay:1.45s}

/* per-page safe zones (percentages of the card = the artwork); text never touches edges/florals */
.p1 .ov-inner{padding:14% 21% 22%;}
.p2 .ov-inner{padding:25% 17% 15%;}
.p3 .ov-inner{padding:16% 17% 21%;}
.p4 .ov-inner{padding:21% 18% 41%;}
.p4 .durood{font-size:clamp(.85rem,4vw,1.15rem);}
.p4 .dua-ar{font-size:clamp(.95rem,4.3vw,1.2rem);line-height:2;}
.p4 .dua-en{margin-top:.9em;}
.p4 .monogram{font-size:clamp(1.9rem,9vw,2.7rem);margin-top:.25em;}
.p4 .divider-lg{margin:.65em 0;}

/* ---- typography ---- */
.bismillah{font-family:var(--arabic);font-weight:700;direction:rtl;line-height:1.7;
  font-size:clamp(.95rem,4.4vw,1.5rem);text-shadow:0 1px 0 rgba(255,255,255,.5);}
.cream .bismillah{color:#a9812f;}
.orn{width:38%;height:12px;margin:.5em 0 .3em;position:relative;}
.orn::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-500),transparent);}
.orn::after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;transform:translate(-50%,-50%) rotate(45deg);background:var(--gold-500);}

.verse{font-family:var(--disp);letter-spacing:.12em;text-transform:uppercase;line-height:1.85;
  font-size:clamp(.46rem,2.3vw,.68rem);}
.cream .verse{color:var(--ink);}
.verse .ref{display:block;letter-spacing:.2em;margin-top:.45em;font-size:.85em;color:#a9812f;}

.invite{font-family:var(--disp);letter-spacing:.15em;text-transform:uppercase;line-height:2;
  font-size:clamp(.44rem,2.1vw,.6rem);margin-top:.5em;}
.cream .invite{color:var(--ink);}

.names{margin:.05em 0;}
.name{font-family:var(--script);line-height:1.02;font-size:clamp(2.6rem,14vw,4.4rem);
  background:linear-gradient(100deg,#8a5a1e,#c9992e 42%,#eecb6a 52%,#c9992e 60%,#9a6b1e 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 2px rgba(90,60,15,.4));}
.velvet .name,.frame .name{filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));}
@media (prefers-reduced-motion:no-preference){.name{animation:rise .9s var(--ease) forwards,foil 9s ease-in-out .8s infinite;}}
.amp{font-family:var(--serif);font-style:italic;color:var(--gold-500);font-size:clamp(1rem,5vw,1.6rem);}

/* velvet page text */
.velvet .overlay,.frame .overlay{color:var(--cream);}
.evt-title{font-family:var(--script);font-size:clamp(3rem,17vw,5rem);line-height:.9;
  background:linear-gradient(100deg,#c9992e,#eecb6a 50%,#c9992e);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}
.evt-ar{font-family:var(--arabic);color:var(--gold-300);font-size:clamp(1.1rem,5vw,1.6rem);margin-top:.1em;}
.evt-line{font-family:var(--disp);letter-spacing:.16em;text-transform:uppercase;color:#f0e6d2;
  font-size:clamp(.5rem,2.4vw,.72rem);margin-top:.5em;line-height:1.7;}
.evt-venue{font-family:var(--serif);font-style:italic;font-size:clamp(.95rem,4.6vw,1.25rem);color:#f4ead4;margin-top:.5em;}
.evt-sub{font-family:var(--disp);letter-spacing:.2em;text-transform:uppercase;font-size:clamp(.44rem,2vw,.58rem);color:var(--gold-300);margin-top:.2em;}
.divider-lg{width:44%;height:14px;margin:.9em 0;position:relative;}
.divider-lg::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-500),transparent);}
.divider-lg::after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;transform:translate(-50%,-50%) rotate(45deg);background:var(--gold-500);box-shadow:0 0 10px rgba(212,175,55,.6);}

/* countdown */
.count{display:flex;gap:clamp(.3rem,2vw,.6rem);justify-content:center;margin-top:.4em;}
.cd{min-width:3.3rem;padding:.6rem .3rem;border-radius:12px;border:1px solid rgba(212,175,55,.4);
  background:rgba(20,3,8,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.cd b{display:block;font-family:'Cinzel',serif;font-size:clamp(1.4rem,8vw,2.1rem);line-height:1;font-weight:600;
  background:linear-gradient(180deg,var(--gold-050),var(--gold-500));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.cd span{display:block;font-family:'Cinzel',serif;font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:#e7d6b2;margin-top:.4em;}
.count-big{font-family:var(--script);font-size:clamp(3rem,17vw,4.6rem);
  background:linear-gradient(100deg,#c9992e,#eecb6a 50%,#c9992e);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));margin-top:.2em;}

/* closing */
.close-line{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,5vw,1.3rem);color:#f4ead4;margin:.2em 0;max-width:22rem;}
.durood,.dua-ar{font-family:var(--arabic);color:var(--gold-100);direction:rtl;line-height:1.8;font-size:clamp(1rem,5vw,1.5rem);}
.dua-tr{font-family:var(--serif);font-style:italic;color:var(--gold-100);font-size:clamp(.8rem,3.6vw,1rem);margin-top:.3em;}
.dua-en{font-family:var(--disp);letter-spacing:.06em;color:#e7d6b2;font-size:clamp(.5rem,2.3vw,.66rem);text-transform:uppercase;line-height:1.7;margin-top:.3em;}
.monogram{font-family:var(--script);font-size:clamp(2.4rem,12vw,3.4rem);color:var(--gold-300);filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));margin-top:.2em;}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-top:.8em;
  padding:.55rem 1.2rem;border-radius:999px;border:1px solid var(--gold-500);background:transparent;color:var(--gold-100);
  font-family:var(--disp);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:transform .3s var(--ease);}
.btn:active{transform:scale(.95);}

/* scroll cue */
.cue{position:absolute;bottom:max(3vh,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.35em;color:var(--gold-300);
  font-family:var(--disp);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;opacity:.8;z-index:5;}
.cue .chev{width:14px;height:14px;border-right:1.5px solid var(--gold-300);border-bottom:1.5px solid var(--gold-300);transform:rotate(45deg);animation:bob 1.8s ease-in-out infinite;}
.page.cream .cue{color:#a9812f;}
.page.cream .cue .chev{border-color:#a9812f;}

/* gold tap ripple */
.ripple{position:fixed;z-index:60;width:14px;height:14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(240,201,107,.7),rgba(240,201,107,0) 70%);
  transform:translate(-50%,-50%) scale(0);animation:rip .7s ease-out forwards;}
@keyframes rip{to{transform:translate(-50%,-50%) scale(16);opacity:0;}}

/* ---- Urdu (Nastaliq, RTL) ---- */
body[data-lang="ur"] .verse,body[data-lang="ur"] .invite,body[data-lang="ur"] .evt-line,
body[data-lang="ur"] .evt-sub,body[data-lang="ur"] .close-line,body[data-lang="ur"] .dua-en,
body[data-lang="ur"] .cd span,body[data-lang="ur"] .evt-venue{
  font-family:var(--urdu);direction:rtl;letter-spacing:normal;text-transform:none;font-style:normal;line-height:2.1;}
body[data-lang="ur"] .verse{font-size:clamp(.7rem,3.4vw,1rem);}
body[data-lang="ur"] .invite{font-size:clamp(.66rem,3.2vw,.92rem);}
body[data-lang="ur"] .evt-line{font-size:clamp(.8rem,3.8vw,1.05rem);}

/* ---- animations ---- */
@keyframes fade{to{opacity:1;}}
@keyframes floatIn{from{opacity:0;transform:translateY(40px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.6;}50%{transform:scale(1.18);opacity:0;}}
@keyframes rise{to{opacity:1;transform:none;}}
@keyframes foil{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0);}50%{transform:rotate(45deg) translate(3px,3px);}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.2s !important;}
  .ov-inner>*{opacity:1 !important;transform:none !important;}
  html{scroll-behavior:auto;}
  .bg-blur{filter:blur(30px) brightness(.6);}
}

/* ============================================================================
   v2 REFINEMENTS (override) — luxury polish, fixes, easter-egg styles
   ============================================================================ */
/* stable card width (svh avoids toolbar-driven reflow) */
.p1 .card{width:min(100vw,calc(100svh*1728/2450));}
.p2 .card,.p3 .card{width:min(100vw,calc(100svh*768/1376));}
.p4 .card{width:min(100vw,calc(100svh*896/1200));}

/* seal split for the crack */
.seal-wax{position:absolute;inset:0;}
.seal-l{clip-path:polygon(0 0,50% 0,50% 100%,0 100%);}
.seal-r{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);}

/* calmer Ken Burns via `scale` property so JS transform composes */
.card .art{animation:none;}
@media (prefers-reduced-motion:no-preference){.card .art{animation:kenS 24s ease-in-out infinite alternate;}}
@keyframes kenS{from{scale:1;}to{scale:1.035;}}

.gloss{opacity:.26;}

/* warmer, quieter typography (kills the "slide" feel) */
.verse{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:.005em;
  font-size:clamp(1.05rem,4.8vw,1.4rem);line-height:1.5;max-width:90%;color:var(--ink);}
.cream .verse{color:#5f4b33;}
.ref{font-family:var(--disp);text-transform:uppercase;letter-spacing:.28em;font-size:.52rem;
  color:#a9812f;margin-top:1em;opacity:.85;}
.ref.date{margin-top:1.1em;font-size:.6rem;letter-spacing:.24em;}
.invite{font-family:var(--serif);text-transform:none;letter-spacing:.01em;font-weight:400;
  font-size:clamp(.98rem,4.4vw,1.22rem);line-height:1.5;max-width:92%;}
.cream .invite{color:#6b5a44;}

/* names: tamed size, no tracking, tight foil sheen */
.name{font-size:clamp(2.1rem,9vw,3.3rem);line-height:1.12;letter-spacing:0;
  background:linear-gradient(105deg,#6e4f18 0%,#b7902f 30%,#f4e2a0 47%,#fffbe9 50%,#f4e2a0 53%,#b7902f 70%,#6e4f18 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(90,60,15,.4));animation:foil 9s ease-in-out infinite;}
.velvet .name,.frame .name{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.names{max-width:82%;margin:.1em auto;display:flex;flex-direction:column;align-items:center;gap:.02em;}
.amp{font-size:clamp(1.3rem,6vw,1.9rem);
  background:linear-gradient(105deg,#b7902f,#f4e2a0 50%,#b7902f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}

/* event titles + times */
.evt-title{font-size:clamp(2.8rem,15vw,4rem);line-height:1.02;padding-top:.06em;
  background:linear-gradient(105deg,#8a6a1e,#c9a94a 40%,#fff2c8 50%,#c9a94a 60%,#8a6a1e);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.evt-line.dim{color:#e7d6b2;opacity:.82;font-size:clamp(.46rem,2.2vw,.62rem);}

/* Arabic never touches the frame */
.bismillah,.durood,.dua-ar{max-width:88%;margin-inline:auto;letter-spacing:0;line-height:2;}
.p4 .dua-ar{max-width:86%;}

/* engraved countdown (no app boxes) */
.count{display:flex;align-items:baseline;justify-content:center;gap:.5em;flex-wrap:wrap;margin-top:.3em;}
.count .cd{background:none;border:0;padding:0;min-width:0;font-family:var(--serif);color:#efe0bf;
  font-size:clamp(.66rem,2.9vw,.9rem);letter-spacing:.04em;text-transform:uppercase;}
.count .cd b{font-family:'Cinzel',serif;font-weight:600;font-size:clamp(1.5rem,8vw,2.3rem);margin-right:.12em;
  background:linear-gradient(180deg,#fff3d0,#d4af37 70%,#b8892b);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.count i{color:rgba(212,175,55,.5);font-style:normal;}
.count-big{font-family:var(--script);font-size:clamp(2.6rem,15vw,4rem);
  background:linear-gradient(105deg,#c9a94a,#fff2c8 50%,#c9a94a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));}

/* hairline dividers, no glow */
.orn::after,.divider-lg::after{box-shadow:none;}

/* insets tuned to each artwork's arch interior */
.p1 .ov-inner{padding:12% 22% 27%;}
.p2 .ov-inner{padding:22% 16% 14%;}
.p3 .ov-inner{padding:24% 16% 23%;}
.p4 .ov-inner{padding:18% 23% 42%;}
body[data-lang="ur"] .verse,body[data-lang="ur"] .invite{font-size:clamp(.8rem,3.6vw,1.02rem);line-height:1.9;}

/* paper grain over flat regions = tactile luxury */
.env-body{position:relative;}
.env-body::after,.page::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");}

/* seal shards, fx canvas, hotspot, lanterns, toast */
.shard{position:fixed;z-index:85;left:0;top:0;width:7px;height:3px;border-radius:1px;pointer-events:none;background:linear-gradient(90deg,#fff3d0,#d4af37);box-shadow:0 0 6px rgba(212,175,55,.7);}
#fx{position:fixed;inset:0;z-index:65;pointer-events:none;}
body{touch-action:manipulation;}
.hotspot{position:absolute;transform:translate(-50%,-50%);width:66px;height:66px;border:0;background:transparent;z-index:3;cursor:pointer;}
.lanterns{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none;
  background:radial-gradient(3px 3px at 28% 30%,#ffd98a,transparent),radial-gradient(2px 2px at 66% 24%,#fff3d0,transparent),radial-gradient(2px 2px at 44% 18%,#ffe0a0,transparent),radial-gradient(2.5px 2.5px at 78% 40%,#ffd98a,transparent),radial-gradient(2px 2px at 18% 46%,#fff3d0,transparent);}
.page.lit .lanterns{opacity:.85;}
.toast{position:fixed;left:50%;bottom:14vh;z-index:90;transform:translateX(-50%);padding:.55rem 1.1rem;border-radius:999px;background:rgba(37,6,15,.82);border:1px solid rgba(212,175,55,.5);color:var(--gold-100);font-family:var(--serif);font-style:italic;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}

@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---- image-based envelope (real artwork) ---- */
#envelope{display:block;padding:0;background:#241708;perspective:none;}
.env-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;
  transform-origin:center 44%;}
#envelope .env-tag{color:#5c3a1c;text-shadow:0 1px 2px rgba(255,245,225,.55);z-index:2;}
#envelope .env-hint{color:#7d1f2b;text-shadow:0 1px 2px rgba(255,245,225,.55);font-style:italic;font-size:1.05rem;z-index:2;
  animation:fade 1.4s ease 1s forwards;}
.env-seal{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:46%;aspect-ratio:1;
  border:0;background:transparent;border-radius:50%;padding:0;z-index:3;cursor:pointer;}
.env-seal::after{content:"";position:absolute;inset:-3%;border-radius:50%;border:1.5px solid rgba(240,201,107,.5);
  animation:pulse 2.6s ease-in-out infinite;}
.env-flash{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;
  z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,246,214,.95),rgba(255,214,140,0) 70%);}

/* ---- mobile robustness (fixes iOS scroll-snap sticking + toolbar jump) ---- */
.page{min-height:100svh;}
#deck.snap{scroll-snap-type:y proximity;height:100svh;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;}
.overlay{transform:none;}
.p1 .card,.p2 .card,.p3 .card,.p4 .card{max-height:100svh;}

/* ---- butterfly (flutters across, wings flap) ---- */
.butterfly{position:absolute;top:0;left:0;z-index:4;width:13%;max-width:60px;pointer-events:none;
  will-change:transform;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));}
.butterfly img{display:block;width:100%;}
@media (prefers-reduced-motion:no-preference){
  .butterfly{animation:flit 18s ease-in-out infinite;}
  .butterfly img{animation:flap .2s ease-in-out infinite alternate;}
}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.62)}}
@keyframes flit{
  0%{transform:translate(4vw,82vh) rotate(-8deg);opacity:0}
  10%{opacity:1}
  30%{transform:translate(62vw,44vh) rotate(10deg)}
  52%{transform:translate(26vw,22vh) rotate(-6deg)}
  74%{transform:translate(72vw,32vh) rotate(8deg)}
  90%{opacity:1}
  100%{transform:translate(88vw,-12vh) rotate(12deg);opacity:0}
}

/* ---- drifting petals (thematic ambient) ---- */
.petals{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.petal{position:absolute;top:-14%;width:7%;max-width:28px;will-change:auto;}
@media (prefers-reduced-motion:no-preference){.petal{animation:fall linear infinite;}}
@keyframes fall{0%{transform:translateY(-14vh) rotate(0deg)}100%{transform:translateY(116vh) rotate(340deg)}}

/* ============================================================================
   v3 REFINEMENTS (agent-fleet synthesis)
   ============================================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* 3D tilt WITHOUT transforming the scroll-snap child (fixes iOS stuck-scroll) */
.card{perspective:900px;transform-style:flat;transform:none;isolation:isolate;
  box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(212,175,55,.32);}
.tilt{position:absolute;inset:0;will-change:transform;transform-style:flat;}

/* intentional matte frame instead of dead gray letterbox */
.p1{background:#241610;}
.p2,.p3{background:#170309;}
.p4{background:#181008;}
.bg-blur{filter:blur(22px) brightness(.42) saturate(1.15);transform:none;inset:0;}

/* one gold vocabulary; one-shot shimmer on entry (no infinite gimmick loop) */
.name{background:linear-gradient(105deg,#8a6a1e,#c8a24a 30%,#f2dd97 50%,#c8a24a 70%,#8a6a1e 100%);
  background-size:220% 100%;background-position:50% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:none;font-size:clamp(2.4rem,11vw,3.8rem);line-height:1.06;}
.cream .name{filter:drop-shadow(0 2px 3px rgba(90,60,15,.5));}
.page.in .name{animation:shimmerWipe 1.4s var(--ease) both;}
.evt-title{background:linear-gradient(105deg,#8a6a1e,#c8a24a 30%,#f2dd97 50%,#c8a24a 70%,#8a6a1e 100%);
  background-size:220% 100%;background-position:50% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.page.in .evt-title{animation:rise .9s var(--ease) both, shimmerWipe 1.4s var(--ease) both;}
/* sweeps a bright specular band across, then settles on the luminous centre (never the dark ends) */
@keyframes shimmerWipe{0%{background-position:135% 50%;}100%{background-position:50% 50%;}}
.gloss{opacity:.4;}
@keyframes kenS{from{scale:1.01;}to{scale:1.06;}}

/* typography hierarchy (verse leads, invite settles, names are hero) */
.verse{font-size:clamp(1.15rem,5.2vw,1.55rem);line-height:1.34;max-width:16ch;margin-inline:auto;}
.invite{font-size:clamp(.9rem,4vw,1.06rem);line-height:1.55;max-width:26ch;margin-inline:auto;font-weight:500;}
.cream .invite,.cream .verse{text-shadow:0 1px 8px rgba(247,239,224,.75);}
.bismillah{font-size:clamp(1.25rem,5.6vw,1.7rem);}
.names{gap:.12em;max-width:88%;}
.amp{font-size:clamp(1.15rem,5vw,1.7rem);}
.ref{font-size:.56rem;letter-spacing:.3em;}
.cream .ref,.greet{color:#7a5a12;}
.evt-sub{font-size:clamp(.56rem,2vw,.62rem);}
.evt-line.dim{font-size:clamp(.56rem,2.2vw,.64rem);}
.dua-en{font-size:clamp(.6rem,2.3vw,.7rem);line-height:1.75;color:var(--gold-100);}

/* Nikah vertical centering (kills the top dead-zone) */
.p2 .ov-inner{padding:26% 16% 16%;}

/* engraved countdown: hairline separators, stacked labels, no stray blur */
.count{gap:.7em;}
.count .cd{display:inline-flex;flex-direction:column;align-items:center;line-height:1;backdrop-filter:none;-webkit-backdrop-filter:none;}
.count .cd b{margin:0 0 .4em 0;}
.count i{display:inline-block;width:1px;height:1.5em;background:rgba(212,175,55,.45);align-self:center;color:transparent;}

/* butterfly: confined to the gutters, small, slow, faint — never over the words */
.butterfly{width:9%;max-width:40px;opacity:.85;}
@keyframes flit{
  0%{transform:translate(4vw,86vh) rotate(-8deg);opacity:0}
  12%{opacity:.85}
  40%{transform:translate(6vw,30vh) rotate(6deg)}
  70%{transform:translate(86vw,22vh) rotate(-6deg)}
  90%{opacity:.85}
  100%{transform:translate(93vw,-12vh) rotate(10deg);opacity:0}
}
@media (prefers-reduced-motion:no-preference){.butterfly{animation:flit 24s ease-in-out infinite;}}

/* language toggle → reachable bottom-left */
#lang-toggle{top:auto;bottom:max(1.1rem,env(safe-area-inset-bottom));}

/* invisible-gold-text safety on engines without background-clip:text */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .name,.evt-title,.count-big,.count .cd b,.amp{color:var(--gold-300)!important;-webkit-text-fill-color:currentColor!important;background:none!important;}
}
/* legacy viewport-unit fallbacks (older iOS/webviews) */
#deck.snap{height:100vh;height:100dvh;height:100svh;}
.p1 .card{width:min(100vw,calc(100vh*1728/2450));width:min(100vw,calc(100svh*1728/2450));}
.p2 .card,.p3 .card{width:min(100vw,calc(100vh*768/1376));width:min(100vw,calc(100svh*768/1376));}
.p4 .card{width:min(100vw,calc(100vh*896/1200));width:min(100vw,calc(100svh*896/1200));}

/* pause ambient animation on off-screen pages (battery/perf) */
.page:not(.active) .art,
.page:not(.active) .petal,
.page:not(.active) .butterfly,
.page:not(.active) .butterfly img{animation-play-state:paused;}
/* stop the seal pulse once opened */
#envelope.gone .env-seal::after{animation:none;}

/* varied per-page entrances (different from Page 1's emerge) */
@keyframes riseSide{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes riseScale{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.p3.in .ov-inner>*{animation:riseSide .9s var(--ease) both;}
.p4.in .ov-inner>*{animation:riseScale .95s var(--ease) both;}

/* open-envelope layer (revealed on seal-break) */
.env-open{opacity:0;z-index:1;}
.env-closed{z-index:0;}

/* --- review fixes --- */
/* keep the gold shimmer on Page 3's title even with the side-wipe entrance (B1) */
.p3.in .evt-title{animation:rise .9s var(--ease) both, shimmerWipe 1.4s var(--ease) both;}
/* stale will-change cleanup: .card no longer transforms (tilt moved to .tilt); overlay uses `translate` (C1) */
.card{will-change:auto;}
.overlay{will-change:auto;}

/* ============================================================================
   v4 — full-bleed art, cinematic envelope, paged (no-scroll) navigation
   ============================================================================ */
/* every artwork covers the ENTIRE screen (no letterbox card, no blurred bands) */
.bg-blur{display:none;}
.card{width:100vw!important;height:100dvh!important;max-height:none!important;aspect-ratio:auto!important;
  box-shadow:none!important;border-radius:0;perspective:none;}
.tilt,.card .art{width:100%;height:100%;}
.card .art{object-fit:cover;object-position:center;}
.page::after{box-shadow:inset 0 0 150px 34px rgba(0,0,0,.4);}

/* PAGED navigation: stack pages, animate the active one in (no vertical scroll) */
#deck,#deck.snap{height:100dvh;overflow:hidden;scroll-snap-type:none;position:fixed;inset:0;}
.page{position:absolute;inset:0;min-height:100dvh;opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(1.05);transition:opacity .7s var(--ease),transform .8s var(--ease),visibility .8s;}
.page.active{opacity:1;visibility:visible;pointer-events:auto;transform:none;z-index:2;}
.page.leaving{opacity:0;transform:scale(.96) translateY(-2%);z-index:1;}
.cue{z-index:5;}

/* names: richer, readable gold on the cream page with engraved depth */
.cream .name{
  background:linear-gradient(100deg,#6b4a12,#a9812f 27%,#e8c866 50%,#a9812f 73%,#6b4a12 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,250,235,.55)) drop-shadow(0 2px 5px rgba(70,45,10,.55));}
.cream .amp{filter:drop-shadow(0 1px 2px rgba(70,45,10,.5));}
.p1 .ref.date{margin-top:2.6em;}

/* per-page text insets re-tuned for full-bleed (arch fills more of the screen) */
.p1 .ov-inner{padding:11% 15% 15%;}
.p2 .ov-inner{padding:27% 14% 12%;}
.p3 .ov-inner{padding:18% 14% 16%;}
.p4 .ov-inner{padding:18% 19% 40%;}

/* cinematic envelope: the closed front hinges open (3D) to reveal the open envelope beneath */
#envelope{perspective:1600px;perspective-origin:50% 42%;}
.env-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.env-closed{z-index:2;transform-origin:center top;backface-visibility:hidden;will-change:transform;}
.env-open{z-index:1;}
.env-shadow{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0) 46%);}
.cue .chev{animation:none;transform:rotate(-135deg);}

/* ============================================================================
   v5 — QA hardening (touch, a11y, actions)
   ============================================================================ */
/* kill pull-to-refresh, overscroll bounce, double-tap zoom, text-select, image save (app feel) */
html,body{overscroll-behavior:none;}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
#deck{touch-action:none;overscroll-behavior:none;}
.art,.env-art{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;pointer-events:none;}
/* tactile press on the seal + buttons (hover only on hover-capable devices) */
.env-seal:active{transform:translate(-50%,-50%) scale(.94);}
.btn:active{transform:scale(.95);}
@media (hover:hover){ .btn:hover{background:rgba(212,175,55,.14);} }
/* action row (Directions / Add to calendar) */
.evt-actions{display:flex;gap:.6em;justify-content:center;flex-wrap:wrap;margin-top:1.1em;}
.evt-actions .btn{pointer-events:auto;}

/* ============================================================================
   v6 — CINEMATIC ENVELOPE (bespoke CSS/SVG) + premium polish
   Wax-sealed cream card on burgundy velvet: seal cracks -> flap opens in 3D ->
   card slides out of the pocket -> hands off to Page 1.
   ============================================================================ */

/* ---- velvet stage ---- */
#envelope{display:grid;place-items:center;padding:0;background:#160410;
  perspective:1400px;perspective-origin:50% 42%;transition:opacity .9s ease,visibility .9s;}
.env-vignette{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 88% at 38% 30%,rgba(126,32,48,.62),rgba(58,12,26,.7) 46%,#120309 100%),#120309;}
.env-vignette::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:soft-light;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");}
@media (prefers-reduced-motion:no-preference){.env-vignette{animation:spot 7s ease-in-out infinite;}}
@keyframes spot{0%,100%{filter:brightness(1)}50%{filter:brightness(1.1)}}

/* ---- the envelope object ---- */
.env-stage{position:relative;z-index:1;width:min(72vw,286px);aspect-ratio:5/7;transform-style:preserve-3d;
  filter:drop-shadow(0 42px 60px rgba(0,0,0,.62));animation:floatIn 1.3s var(--ease) both;}
.env-piece,.env-flap,.env-card{position:absolute;}
/* paper grain shared by cream pieces */
.env-back::after,.env-front::after,.env-card::after{content:"";position:absolute;inset:0;
  pointer-events:none;opacity:.05;mix-blend-mode:multiply;border-radius:inherit;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");}

.env-back{inset:0;z-index:1;border-radius:8px;background:linear-gradient(158deg,#f2e7d2,#e2d3b3);
  box-shadow:inset 0 0 0 1px rgba(150,110,50,.28);}

/* invitation card tucked inside — slides up and out */
.env-card{left:7%;right:7%;top:5%;height:90%;z-index:2;border-radius:6px 6px 3px 3px;
  background:linear-gradient(155deg,#fffaf0,#f4e9d3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 26px rgba(0,0,0,.3);
  display:flex;align-items:flex-start;justify-content:center;overflow:hidden;}
.ec-inner{display:flex;flex-direction:column;align-items:center;gap:.5em;padding:15% 10% 0;text-align:center;}
.ec-eyebrow{font-family:var(--disp);letter-spacing:.32em;text-transform:uppercase;font-size:.42rem;color:#a9812f;}
.ec-names{font-family:var(--script);font-size:1.6rem;line-height:1;
  background:linear-gradient(100deg,#6b4a12,#a9812f 28%,#e8c866 50%,#a9812f 72%,#6b4a12);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.ec-orn{width:34%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-500),transparent);}

/* front face (flap-side / back of a real envelope): full rectangle, hides the card */
.env-front{inset:0;z-index:3;border-radius:8px;background:linear-gradient(158deg,#ede1c9,#ddccab);
  box-shadow:inset 0 1px 0 rgba(255,250,238,.75),inset 0 -22px 34px rgba(120,90,45,.14);}
/* faint centre seam where the two side-flaps meet under the top flap */
.env-front::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px);z-index:1;
  background:linear-gradient(180deg,transparent,rgba(120,90,45,.16) 40%,rgba(120,90,45,.16) 60%,transparent);}

/* triangular top flap, hinged at top; cream outer + gold arabesque inner liner */
.env-flap{top:0;left:0;right:0;height:58%;z-index:4;transform-origin:top center;transform:rotateX(0deg);
  backface-visibility:hidden;clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(180deg,#f4ead4,#e7dabd);box-shadow:0 6px 12px rgba(90,60,25,.14);
  transition:transform 1.15s cubic-bezier(.34,.02,.16,1);}
.env-liner{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);transform:rotateX(180deg);
  backface-visibility:hidden;
  background:
    repeating-linear-gradient(45deg,rgba(212,175,55,.16) 0 2px,transparent 2px 11px),
    repeating-linear-gradient(-45deg,rgba(212,175,55,.16) 0 2px,transparent 2px 11px),
    linear-gradient(180deg,#4a1220,#37101c);}
.env-stage.open .env-flap{transform:rotateX(-158deg);}

/* wax seal with engraved S&S — two halves that crack apart */
.env-seal{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:5;
  width:27%;aspect-ratio:1;border:0;background:transparent;padding:0;cursor:pointer;touch-action:manipulation;}
.seal-half{position:absolute;inset:0;
  background:radial-gradient(120% 120% at 42% 36%,#9a2e39,#7d2029 54%,#5f1621 100%);
  box-shadow:inset 0 0 12px rgba(40,6,12,.6),inset 0 -3px 6px rgba(0,0,0,.42),
    inset 0 4px 8px rgba(255,190,180,.14),0 5px 13px rgba(0,0,0,.5);}
.seal-l{clip-path:polygon(0 0,53% 0,47% 100%,0 100%);border-radius:50% 12% 12% 50%/50% 12% 12% 50%;}
.seal-r{clip-path:polygon(53% 0,100% 0,100% 100%,47% 100%);border-radius:12% 50% 50% 12%/12% 50% 50% 12%;}
.seal-mono{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  font-family:var(--script);font-size:1.5rem;line-height:1;color:#e7c15f;
  text-shadow:0 1px 0 rgba(255,224,150,.35),0 -1px 1px rgba(30,4,10,.7);}
.seal-mono i{font-family:var(--serif);font-style:italic;font-size:.62em;opacity:.85;margin:0 .04em;}
.env-seal::after{content:"";position:absolute;inset:-16%;border-radius:50%;
  border:1.5px solid rgba(233,196,106,.45);animation:pulse 2.6s ease-in-out infinite;}
.env-seal:active{transform:translate(-50%,-50%) scale(.94);}

/* crack: halves fall away, ring + mono vanish */
.env-stage.cracking .env-seal::after{animation:none;opacity:0;}
.env-stage.cracking .seal-mono{opacity:0;transition:opacity .2s ease;}
.env-stage.cracking .seal-l{animation:crackL .5s cubic-bezier(.3,.6,.3,1) forwards;}
.env-stage.cracking .seal-r{animation:crackR .5s cubic-bezier(.3,.6,.3,1) forwards;}
@keyframes crackL{to{transform:translate(-70%,46%) rotate(-42deg);opacity:0;}}
@keyframes crackR{to{transform:translate(70%,50%) rotate(48deg);opacity:0;}}

/* hint + one-shot flash */
.env-hint{position:absolute;bottom:max(9vh,env(safe-area-inset-bottom));left:0;right:0;text-align:center;z-index:2;
  font-family:var(--disp);letter-spacing:.34em;text-transform:uppercase;font-size:.58rem;color:var(--gold-100);
  opacity:0;animation:fade 1.2s ease 1s forwards;}
#envelope.gone .env-hint{opacity:0;animation:none;}
.env-flash{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;z-index:6;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,246,214,.95),rgba(255,214,140,0) 70%);}

/* ---- Page 1: lift names off the skyline + softer letterpress emboss ---- */
.cream .names{position:relative;isolation:isolate;}
.cream .names::before{content:"";position:absolute;inset:-24% -14%;z-index:-1;border-radius:50%;
  background:radial-gradient(58% 68% at 50% 50%,rgba(249,243,229,.94),rgba(249,243,229,.6) 52%,rgba(249,243,229,0) 78%);
  filter:blur(3px);}
.cream .name{filter:drop-shadow(0 1px 0 rgba(255,252,242,.55)) drop-shadow(0 1px 3px rgba(70,45,10,.34));}

/* ---- Page 2: raise the block toward optical centre (kills the top void) ---- */
.p2 .ov-inner{padding:20% 15% 15%;}

/* ---- Page 4: monogram scaled up with a hairline rule ---- */
.p4 .monogram{font-size:clamp(2.2rem,10.5vw,3.1rem);position:relative;}
.p4 .monogram::after{content:"";display:block;width:2.4em;height:1px;margin:.42em auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-500),transparent);}

/* ---- buttons: from web-pill to engraved small-caps with a soft gold glow ---- */
.btn{font-family:var(--serif);font-variant:small-caps;text-transform:none;letter-spacing:.1em;
  font-size:.86rem;font-weight:500;border-color:rgba(212,175,55,.5);
  background:linear-gradient(rgba(212,175,55,.07),rgba(212,175,55,.02));
  box-shadow:inset 0 0 12px rgba(212,175,55,.12),0 4px 14px rgba(0,0,0,.3);}
@media (hover:hover){.btn:hover{background:linear-gradient(rgba(212,175,55,.16),rgba(212,175,55,.06));box-shadow:inset 0 0 16px rgba(212,175,55,.2),0 6px 18px rgba(0,0,0,.34);}}

/* ---- scroll cue: a single breathing gold chevron ---- */
@media (prefers-reduced-motion:no-preference){
  .cue .chev{animation:cueBreath 2.6s ease-in-out infinite;}
}
@keyframes cueBreath{0%,100%{opacity:.5;transform:rotate(-135deg) translate(0,0);}50%{opacity:1;transform:rotate(-135deg) translate(-2.5px,-2.5px);}}

/* ---- countdown separators: gold gradient hairlines ---- */
.count i{background:linear-gradient(180deg,transparent,rgba(212,175,55,.65),transparent);}

/* ============================================================================
   v7 — IMAGE-BASED CINEMATIC ENVELOPE (user artwork)
   closed kraft envelope on velvet -> S&S wax seal cracks -> opens to the gold
   arabesque liner -> Page 1 glimpses in and loads.  (supersedes the v6 CSS build)
   ============================================================================ */
#envelope{display:block;padding:0;background:#2a0a14;perspective:none;
  transition:opacity .9s ease,visibility .9s;}
.env-layer{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;
  background-repeat:no-repeat;transition:opacity .9s ease,transform 1.2s var(--ease);}
.env-open{background-image:url(../assets/img/env-open.jpg);opacity:0;transform:scale(1.05);z-index:1;}
.env-closed{background-image:url(../assets/img/env-closed.jpg);opacity:1;transform:scale(1);z-index:2;}

/* the S&S wax seal, laid over the closed envelope's seal spot */
.env-seal{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:3;
  width:26%;aspect-ratio:418/442;border:0;background:transparent;padding:0;cursor:pointer;touch-action:manipulation;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));}
.seal-half{position:absolute;inset:0;background-image:url(../assets/img/seal.png);
  background-size:100% 100%;background-repeat:no-repeat;}
.seal-l{clip-path:inset(0 50% 0 0);}
.seal-r{clip-path:inset(0 0 0 50%);}
.env-seal::after{content:"";position:absolute;inset:-14%;border-radius:50%;
  border:1.5px solid rgba(233,196,106,.4);animation:pulse 2.6s ease-in-out infinite;}
.env-seal:active{transform:translate(-50%,-50%) scale(.95);}

/* crack: halves fall away, ring vanishes */
#envelope.cracking .env-seal::after{animation:none;opacity:0;}
#envelope.cracking .seal-l{animation:crackImgL .55s cubic-bezier(.3,.6,.3,1) forwards;}
#envelope.cracking .seal-r{animation:crackImgR .55s cubic-bezier(.3,.6,.3,1) forwards;}
@keyframes crackImgL{to{transform:translate(-64%,52%) rotate(-40deg);opacity:0;}}
@keyframes crackImgR{to{transform:translate(64%,56%) rotate(46deg);opacity:0;}}

/* open: closed frame dissolves + pushes in; the arabesque liner is revealed */
#envelope.opening .env-closed{opacity:0;transform:scale(1.12);}
#envelope.opening .env-open{opacity:1;transform:scale(1.12);}
#envelope.opening .env-hint{opacity:0;}

/* hint + one-shot flash */
.env-hint{position:absolute;bottom:max(8vh,env(safe-area-inset-bottom));left:0;right:0;text-align:center;z-index:4;
  font-family:var(--disp);letter-spacing:.34em;text-transform:uppercase;font-size:.58rem;color:var(--gold-050);
  text-shadow:0 1px 4px rgba(0,0,0,.6);opacity:0;animation:fade 1.2s ease 1s forwards;transition:opacity .5s ease;}
#envelope.gone .env-hint{opacity:0;animation:none;}
.env-flash{position:absolute;left:50%;top:52%;width:16px;height:16px;border-radius:50%;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,246,214,.95),rgba(255,214,140,0) 70%);}

/* ============================================================================
   v8 — CINEMATIC ENVELOPE, elevated
   Two-beat intro (cream close-up -> velvet), ambient life (gold dust, sheen,
   breathing vignette, Ken-Burns, seal specular), dramatic crack (bloom + shake
   + shards), iris-open to the arabesque with a light sweep, zoom hand-off to P1.
   ============================================================================ */
#envelope{transition:opacity .9s ease,visibility .9s,transform 1s var(--ease);transform-origin:50% 52%;}

/* layer stack + ambient Ken-Burns */
.env-open{z-index:1;opacity:1;clip-path:circle(0% at 50% 52%);}
.env-open::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,240,200,.5) 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;}
.env-closed{z-index:2;opacity:1;transform:scale(1.02);}
@media (prefers-reduced-motion:no-preference){.env-closed{animation:kbSlow 15s ease-in-out infinite alternate;}}
@keyframes kbSlow{from{transform:scale(1.02)}to{transform:scale(1.07)}}
.env-intro{z-index:3;opacity:1;background-image:url(../assets/img/env-intro.jpg);transform:scale(1.06);}
#envelope.play .env-intro{animation:introHold 2s ease forwards, kbIn 2.2s ease-out both;}
@keyframes introHold{0%,56%{opacity:1}100%{opacity:0}}
@keyframes kbIn{from{transform:scale(1.18)}to{transform:scale(1.03)}}

/* ambient overlays */
.env-spot{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:linear-gradient(115deg,transparent 32%,rgba(255,236,182,.16) 49%,transparent 66%);background-size:250% 100%;}
.env-vig{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(120% 100% at 50% 42%,transparent 44%,rgba(18,2,9,.6) 100%);}
@media (prefers-reduced-motion:no-preference){
  .env-spot{animation:sheen 7.5s ease-in-out infinite;}
  .env-vig{animation:vigBreath 7s ease-in-out infinite;}
}
@keyframes sheen{0%{background-position:125% 0}100%{background-position:-45% 0}}
@keyframes vigBreath{0%,100%{opacity:.82}50%{opacity:1}}
.env-dust{position:absolute;inset:0;z-index:5;pointer-events:none;}

/* seal: sits above the ambient, with a drifting specular + pulse; fades in after the intro */
.env-seal{z-index:6;opacity:0;animation:none;}
#envelope.play .env-seal{animation:fade .6s ease 1.75s forwards;}
.seal-spec{position:absolute;inset:9%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(42% 42% at 38% 30%,rgba(255,242,214,.55),transparent 60%);}
@media (prefers-reduced-motion:no-preference){.seal-spec{animation:specShift 5.5s ease-in-out infinite;}}
@keyframes specShift{0%,100%{transform:translate(0,0)}50%{transform:translate(16%,11%)}}

/* intro title over the close-up */
.env-title{position:absolute;top:23%;left:0;right:0;z-index:8;pointer-events:none;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.35em;opacity:0;}
#envelope.play .env-title{animation:titleCycle 2s ease forwards;}
.et-ar{font-family:var(--arabic);font-weight:700;color:var(--gold-100);font-size:clamp(1.2rem,6vw,1.7rem);text-shadow:0 2px 10px rgba(0,0,0,.7);}
.et-en{font-family:var(--disp);letter-spacing:.3em;text-transform:uppercase;font-size:clamp(.5rem,2.4vw,.62rem);color:var(--gold-050);text-shadow:0 1px 8px rgba(0,0,0,.7);}
@keyframes titleCycle{0%{opacity:0;transform:translateY(10px)}20%{opacity:1;transform:none}62%{opacity:1}100%{opacity:0}}

/* central bloom for the crack + hand-off */
.env-glow{position:absolute;left:50%;top:52%;width:42%;aspect-ratio:1;transform:translate(-50%,-50%) scale(0);
  z-index:7;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,242,206,.92),rgba(255,212,132,.4) 38%,transparent 70%);}
.env-hint{z-index:8;opacity:0;animation:none;}
#envelope.play .env-hint{animation:fade 1s ease 1.95s forwards;}
.env-flash{z-index:9;}

/* ---- CRACK: screen shake + bloom + shards ---- */
#envelope.cracking{animation:envShake .44s ease;}
@keyframes envShake{0%,100%{transform:translate(0,0)}18%{transform:translate(-3px,2px)}38%{transform:translate(3px,-2px)}58%{transform:translate(-2px,1px)}78%{transform:translate(2px,-1px)}}
#envelope.cracking .env-glow{animation:bloom 1.15s ease-out forwards;}
@keyframes bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}28%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(3.6)}}
#envelope.cracking .env-intro{opacity:0!important;transition:opacity .3s ease;}
#envelope.cracking .env-title{opacity:0!important;}
#envelope.cracking .env-seal{opacity:1!important;animation:none;} /* force the seal visible the moment it cracks */

/* ---- OPEN: iris the arabesque open from the seal point, closed frame pulls back ---- */
#envelope.opening .env-open{clip-path:circle(155% at 50% 52%);transition:clip-path 1.2s cubic-bezier(.5,0,.15,1);z-index:5;}
#envelope.opening .env-open::before{animation:sweep 1.25s ease-out .2s forwards;}
@keyframes sweep{0%{opacity:0;background-position:120% 0}32%{opacity:1}100%{opacity:0;background-position:-60% 0}}
#envelope.opening .env-closed{transform:scale(1.16);opacity:0;transition:transform 1.25s var(--ease),opacity 1s ease .15s;}
#envelope.opening .env-spot,#envelope.opening .env-vig,#envelope.opening .env-hint,#envelope.opening .seal-spec{opacity:0;transition:opacity .5s ease;}

/* ---- HAND-OFF: zoom into the arabesque centre as the scene fades to Page 1 ---- */
#envelope.gone{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.4);}

@media (prefers-reduced-motion:reduce){
  .env-intro,.env-title,.env-dust,.env-spot{display:none;}
  .env-seal,.env-hint{opacity:1;animation:none;}
}

/* ---- language toggle: half size, Page-1 only (visibility handled in goTo) ---- */
#lang-toggle{height:24px;min-width:0;width:auto;padding:0 .55rem;font-size:.6rem;border-radius:13px;line-height:1;
  bottom:max(1rem,env(safe-area-inset-bottom));}

/* ============================================================================
   v9 — 3D FLAP ENVELOPE (photo-textured, physically opens)
   Real cream-paper pieces (tex-paper.jpg) + gold arabesque liner (liner.jpg) +
   S&S wax seal (seal.png). The flap rotateX-opens, the card (page1.jpg) slides
   out of the pocket, then hands off to Page 1. Supersedes the v7/v8 image-swap.
   ============================================================================ */
#envelope{display:grid;place-items:center;padding:0;background:#2a0a14;
  perspective:1500px;perspective-origin:50% 40%;
  transition:opacity .9s ease,visibility .9s,transform 1s var(--ease);transform-origin:50% 46%;}
.env-vig{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(135% 105% at 42% 32%,rgba(158,46,64,.72),rgba(86,22,40,.92) 52%,rgba(44,11,22,1) 100%),#3a0d1b;}
.env-vig::after{content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:soft-light;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='vv'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23vv)'/%3E%3C/svg%3E");}
@media (prefers-reduced-motion:no-preference){.env-vig{animation:vigBreath 7s ease-in-out infinite;}}
@keyframes vigBreath{0%,100%{filter:brightness(1)}50%{filter:brightness(1.09)}}
.env-dust{position:absolute;inset:0;z-index:2;pointer-events:none;}

/* the 3D object */
.e3-scene{position:relative;z-index:1;width:min(82vw,332px);aspect-ratio:5/7;transform-style:preserve-3d;
  filter:drop-shadow(0 40px 54px rgba(0,0,0,.6));}
@media (prefers-reduced-motion:no-preference){.e3-scene{animation:e3sway 8s ease-in-out infinite;}}
@keyframes e3sway{0%,100%{transform:rotateY(-3.4deg) rotateX(1.2deg)}50%{transform:rotateY(3.4deg) rotateX(-.6deg)}}

.e3-piece,.e3-flap,.e3-card{position:absolute;}
/* shared photographic cream paper with a soft top-light gradient for form */
.e3-back,.e3-front,.e3-flap-out{
  background-image:linear-gradient(157deg,rgba(255,251,243,.5),rgba(120,92,52,.14) 66%,rgba(84,60,32,.3)),url(../assets/img/tex-paper.jpg);
  background-size:cover,190px 190px;background-repeat:no-repeat,repeat;background-blend-mode:multiply,normal;}
.e3-back{inset:0;z-index:1;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(150,110,50,.25);}

/* the invitation card = Page 1 art; tucked inside, slides up out of the pocket */
.e3-card{left:6.5%;right:6.5%;top:4.5%;height:88%;z-index:2;border-radius:5px 5px 3px 3px;overflow:hidden;
  background:#f4ead6 url(../assets/img/page1.jpg) top center/cover no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 22px rgba(0,0,0,.32);}

/* front pocket face — hides the card until it rises */
.e3-front{inset:0;z-index:3;border-radius:9px;
  box-shadow:inset 0 1px 0 rgba(255,250,238,.65),inset 0 -20px 30px rgba(120,90,45,.16);}
.e3-front::before{content:"";position:absolute;left:0;right:0;top:0;height:36%;pointer-events:none;
  background:linear-gradient(180deg,rgba(60,40,18,.24),transparent);} /* pocket-mouth shadow */

/* triangular flap: a real double-sided 3D face — cream outside, gold arabesque liner inside */
.e3-flap{top:0;left:0;right:0;height:57%;z-index:4;transform-origin:top center;transform:rotateX(0deg);
  transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.33,.02,.15,1);}
.e3-flap-out,.e3-flap-in{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;}
.e3-flap-out{box-shadow:0 5px 10px rgba(80,54,22,.16);}
/* shading wash that deepens as the flap lifts (fixed-light illusion) */
.e3-flap-out::after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none;
  background:linear-gradient(180deg,rgba(40,26,10,0),rgba(40,26,10,.3));opacity:0;transition:opacity 1.3s ease;}
.e3-flap-in{transform:rotateX(180deg);background:#2a1016 url(../assets/img/liner.jpg) center/cover no-repeat;}
.e3-scene.open .e3-flap{transform:rotateX(-136deg);}
.e3-scene.open .e3-flap-out::after{opacity:1;}

/* growing cast shadow on the pocket as the flap opens */
.e3-shadow{position:absolute;left:8%;right:8%;top:6%;height:46%;z-index:2;pointer-events:none;opacity:0;
  border-radius:50%;background:radial-gradient(60% 60% at 50% 30%,rgba(0,0,0,.5),transparent 70%);
  filter:blur(6px);transition:opacity 1s ease;}
.e3-scene.open .e3-shadow{opacity:.6;}

/* S&S wax seal on the flap tip */
.env-seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  width:23%;aspect-ratio:418/442;border:0;background:transparent;padding:0;cursor:pointer;touch-action:manipulation;opacity:1;animation:none;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.5));}
.seal-half{position:absolute;inset:0;background-image:url(../assets/img/seal.png);background-size:100% 100%;background-repeat:no-repeat;}
.seal-l{clip-path:inset(0 50% 0 0);}
.seal-r{clip-path:inset(0 0 0 50%);}
.env-seal::after{content:"";position:absolute;inset:-16%;border-radius:50%;
  border:1.5px solid rgba(233,196,106,.42);animation:pulse 2.6s ease-in-out infinite;}
.env-seal:active{transform:translate(-50%,-50%) scale(.95);}
#envelope.cracking .env-seal::after{animation:none;opacity:0;}
#envelope.cracking .seal-l{animation:crackImgL .55s cubic-bezier(.3,.6,.3,1) forwards;}
#envelope.cracking .seal-r{animation:crackImgR .55s cubic-bezier(.3,.6,.3,1) forwards;}

/* central gold bloom on crack */
.env-glow{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%) scale(0);
  z-index:6;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,242,206,.92),rgba(255,212,132,.4) 38%,transparent 70%);}
#envelope.cracking .env-glow{animation:bloom 1.15s ease-out forwards;}

/* hint + one-shot flash */
.env-hint{position:absolute;bottom:max(8vh,env(safe-area-inset-bottom));left:0;right:0;text-align:center;z-index:8;
  font-family:var(--disp);letter-spacing:.34em;text-transform:uppercase;font-size:.58rem;color:var(--gold-050);
  text-shadow:0 1px 5px rgba(0,0,0,.7);opacity:0;animation:fade 1.1s ease .8s forwards;}
#envelope.opening .env-hint,#envelope.gone .env-hint{opacity:0;animation:none;transition:opacity .4s;}
.env-flash{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;z-index:9;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,246,214,.95),rgba(255,214,140,0) 70%);}

/* hand-off: sink + zoom the opened envelope away as Page 1 takes over */
#envelope.gone{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.28);}

@media (prefers-reduced-motion:reduce){
  .e3-scene{animation:none;}
  .env-dust{display:none;}
}

/* ============================================================================
   v10 — VIDEO OPENING (real generated footage) + butterfly watermark-mask
   The mp4 plays the envelope opening; a glowing butterfly sits over the
   bottom-right watermark; at the end Page 1 rises out and the florals fade in.
   Supersedes every coded-envelope block above (no matching DOM for those now).
   ============================================================================ */
#envelope{position:fixed;inset:0;z-index:80;background:#2a0a14;overflow:hidden;display:block;padding:0;
  perspective:none;transition:opacity .8s ease,visibility .8s;transform:none;}
#envelope.gone{opacity:0;visibility:hidden;pointer-events:none;transform:none;}

.env-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;background:#2a0a14;}

/* soft dark shadow-patch masking the bottom-right watermark (reads as the butterfly's cast shadow) */
.wm-mask{position:absolute;right:-20px;bottom:-20px;width:230px;height:185px;z-index:5;pointer-events:none;
  background:radial-gradient(115% 115% at 82% 86%,rgba(32,9,17,1),rgba(32,9,17,.95) 46%,rgba(32,9,17,0) 76%);}
/* mask STAYS through the finale (it fades out with the whole scene on .gone) so the watermark is never exposed */

/* butterfly hiding the bottom-right watermark — glowing, shadowed, gently alive */
.wm-fly{position:absolute;right:-4%;bottom:-3%;width:46%;max-width:240px;z-index:6;pointer-events:none;
  transform-origin:58% 42%;opacity:0;
  filter:drop-shadow(0 7px 11px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(255,168,104,.5)) drop-shadow(0 0 6px rgba(255,120,90,.4));}
.wm-fly.show{opacity:1;transition:opacity .9s ease;animation:flyIdle 4.8s ease-in-out infinite;}
@keyframes flyIdle{
  0%,100%{transform:translateY(0) rotate(-3deg) scaleX(1);}
  25%{transform:translateY(-7px) rotate(-1deg) scaleX(.9);}
  50%{transform:translateY(-3px) rotate(-4deg) scaleX(1);}
  75%{transform:translateY(-9px) rotate(-2deg) scaleX(.88);}
}
/* on the hand-off the butterfly STAYS over the watermark (keeps fluttering) and fades out WITH the
   whole scene on .gone — so the dark mask beneath it is never exposed as a bare shadow */

/* corner florals that fade in as Page 1 arrives (staggered "smart" fade) */
.env-florals{position:absolute;inset:0;z-index:4;pointer-events:none;}
.efl{position:absolute;opacity:0;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));}
.efl-1{bottom:-3%;left:-8%;width:88%;transform:translateY(18px) scale(1.04);}       /* wide bottom spray */
.efl-2{top:-5%;left:-7%;width:46%;transform:translateY(-14px) scale(1.04);}         /* single-bloom top-left accent */
#envelope.finishing .efl-1{opacity:1;transform:none;transition:opacity 1.1s ease .2s,transform 1.4s var(--ease) .2s;}
#envelope.finishing .efl-2{opacity:1;transform:none;transition:opacity 1.1s ease .45s,transform 1.4s var(--ease) .45s;}

/* the Page 1 card that grows out of the open envelope's mouth */
.env-card{position:absolute;inset:0;z-index:3;border-radius:8px;
  background:#f4ead6 url(../assets/img/page1.jpg) center/cover no-repeat;
  opacity:0;transform:scale(.3) translateY(8%);transform-origin:50% 52%;
  box-shadow:0 24px 60px rgba(0,0,0,.55);}

/* warm gold bloom at the moment Page 1 emerges */
.env-glow{position:absolute;left:50%;top:52%;width:64%;aspect-ratio:1;transform:translate(-50%,-50%) scale(0);
  z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,242,206,.9),rgba(255,212,132,.34) 40%,transparent 72%);}
#envelope.finishing .env-glow{animation:bloom 1.5s ease-out forwards;}

.env-hint{position:absolute;bottom:max(7vh,env(safe-area-inset-bottom));left:0;right:0;text-align:center;z-index:7;
  font-family:var(--disp);letter-spacing:.34em;text-transform:uppercase;font-size:.56rem;color:var(--gold-050);
  text-shadow:0 1px 5px rgba(0,0,0,.7);opacity:0;animation:fade 1s ease .5s forwards;}
#envelope.playing .env-hint,#envelope.finishing .env-hint{opacity:0!important;animation:none;transition:opacity .5s ease;}

@media (prefers-reduced-motion:reduce){ .wm-fly.show{animation:none;} }

/* softer scene dissolve */
#envelope{transition:opacity 1s ease,visibility 1s,transform 1s var(--ease);}

/* ============================================================================
   v11 — ONE CONTINUOUS FILM: cinematic page-to-page transitions (no "slides")
   ============================================================================ */
/* longer, softer cross-dissolve with a gentle depth push so pages flow into
   one another instead of snapping like slides */
.page{
  transition:opacity 1.05s cubic-bezier(.36,0,.2,1),transform 1.2s cubic-bezier(.36,0,.2,1),visibility 1.2s;
  transform:scale(1.06);will-change:opacity,transform;}
.page.active{opacity:1;visibility:visible;transform:none;z-index:2;}
.page.leaving{opacity:0;transform:scale(.945) translateY(-2%);z-index:1;}
/* incoming overlay text settles a touch slower/softer so it reads as film, not a slide reveal */
.page.in .ov-inner>*{animation-duration:1.15s !important;}
@media (prefers-reduced-motion:reduce){ .page{transition-duration:.25s !important;} }

/* ============================================================================
   v12 — finale fixes: snappy text entrance (no "blank page then names"),
   second floral covers the watermark corner as the butterfly leaves
   ============================================================================ */
/* text on every page appears quickly and cohesively instead of a long stagger */
.page.in .ov-inner>*{animation-duration:.72s !important;}
.page.in .ov-inner>*:nth-child(1){animation-delay:.04s !important;}
.page.in .ov-inner>*:nth-child(2){animation-delay:.10s !important;}
.page.in .ov-inner>*:nth-child(3){animation-delay:.16s !important;}
.page.in .ov-inner>*:nth-child(4){animation-delay:.22s !important;}
.page.in .ov-inner>*:nth-child(5){animation-delay:.28s !important;}
.page.in .ov-inner>*:nth-child(6){animation-delay:.34s !important;}
.page.in .ov-inner>*:nth-child(7){animation-delay:.40s !important;}
/* the single-bloom floral now sits BOTTOM-RIGHT (flipped) to hide the watermark corner
   the moment the butterfly lifts away; the dark mask stays underneath as backup */
/* wide bottom spray now reaches the far bottom-right, covering the watermark corner (mask stays under it) */
.efl-1{bottom:-3%;left:-6%;width:108%;transform:translateY(18px) scale(1.04);}
/* single bloom becomes a top-right accent so BOTH florals are seen */
.efl-2{top:-6%;left:auto;bottom:auto;right:-7%;width:45%;transform:translateY(-14px) scale(1.04) scaleX(-1);}
#envelope.finishing .efl-2{opacity:1;transform:scaleX(-1);transition:opacity 1.1s ease .3s,transform 1.4s var(--ease) .3s;}

/* ============================================================================
   v13 — iOS Safari chrome fix: size to the SMALL (URL-bar-visible) viewport so
   the browser's top bar never crops the top of the artwork.
   ============================================================================ */
#deck,#deck.snap{height:100svh;}
.card{height:100svh !important;}
.page{min-height:100svh;}
#envelope,.env-video{height:100svh;}

/* ============================================================================
   v14 — arch pages: keep the ARCH TOP (peak) on every screen. On viewports wider
   than the art (0.558), `cover` would crop top+bottom and cut the pointed arch;
   biasing the crop to the top preserves the peak (slack comes off the bottom).
   ============================================================================ */
.p2 .art,.p3 .art,.p4 .art{object-position:center top;}

/* ============================================================================
   v15 — content-batch: tap-to-start ripple, Walima readability, Sunnah note
   ============================================================================ */
/* full-screen gold ripple from the touch point (fired on the start tap) */
.screen-ripple{position:fixed;z-index:95;top:0;left:0;width:0;height:0;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);mix-blend-mode:screen;
  background:radial-gradient(circle,transparent 54%,rgba(255,228,160,.5) 63%,rgba(255,214,130,.22) 70%,transparent 80%);
  animation:screenRipple .95s cubic-bezier(.2,.6,.2,1) forwards;}
@keyframes screenRipple{0%{width:6px;height:6px;opacity:.95;}100%{width:var(--r,1400px);height:var(--r,1400px);opacity:0;}}

/* Walima title readability — a soft wine scrim behind the gold so it lifts off the white flower */
.p3 .evt-title{position:relative;isolation:isolate;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(46,10,20,.55));}
.p3 .evt-title::before{content:"";position:absolute;inset:-22% -14%;z-index:-1;border-radius:50%;
  background:radial-gradient(62% 72% at 50% 50%,rgba(42,8,17,.62),rgba(42,8,17,.32) 55%,transparent 78%);filter:blur(7px);}

/* Walima "Sunnah of the Prophet" note — small italic below the location */
.evt-sub.sunnah{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:.02em;
  font-size:clamp(.62rem,2.5vw,.74rem);color:var(--gold-100);opacity:.92;margin-top:.35em;}
body[data-lang="ur"] .evt-sub.sunnah{font-family:var(--urdu);font-style:normal;font-size:clamp(.7rem,3vw,.9rem);}

/* hide the touch-to-start hint/icon once the film starts */
#envelope.started .env-hint{opacity:0 !important;transition:opacity .4s ease;pointer-events:none;}

/* ============================================================================
   v16 — integrated icons + ripple (agent fleet): touch-to-start icon,
   Page-1 swipe-up icon (icon-only), refined full-screen touch ripple.
   ============================================================================ */

/* --- touch-to-start icon (replaces the "tap" text; sits over the dark video) --- */
.env-hint{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.env-hint .touch-ic{position:relative;width:44px;height:44px;display:block;}
.env-hint .touch-ic svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.env-hint .ring{fill:none;stroke:#e9c46a;stroke-width:1.1;transform-origin:22px 12px;opacity:0;animation:envRing 2.7s cubic-bezier(.22,.61,.36,1) infinite;}
.env-hint .ring.r2{animation-delay:.85s;}
@keyframes envRing{0%{transform:scale(.4);opacity:0;}18%{opacity:.85;}72%{opacity:0;transform:scale(1.7);}100%{opacity:0;transform:scale(1.7);}}
.env-hint .hand{transform-origin:22px 40px;animation:envPress 2.7s ease-in-out infinite;}
@keyframes envPress{0%,100%{transform:translateY(0);}16%{transform:translateY(1.6px);}36%{transform:translateY(0);}}
.env-hint .dot{fill:#fbe7bd;transform-origin:22px 12px;animation:envDot 2.7s ease-in-out infinite;}
@keyframes envDot{0%,100%{opacity:.55;transform:scale(1);}16%{opacity:1;transform:scale(1.5);}42%{opacity:.55;transform:scale(1);}}
.env-hint .caption{font-family:var(--disp);font-size:.5rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:#e9c46a;opacity:.8;text-indent:.34em;animation:envCap 2.7s ease-in-out infinite;}
@keyframes envCap{0%,100%{opacity:.58;}20%{opacity:.95;}}

/* --- Page-1 swipe-up icon (icon-only; rich gold on cream) --- */
.cue{display:flex;flex-direction:column;align-items:center;gap:7px;}
.cue .cue-ico{position:relative;width:34px;height:34px;display:block;}
.cue .cue-ico svg{position:absolute;left:0;width:34px;height:16px;overflow:visible;}
.cue .cue-ico .cchev path{fill:none;stroke:#a9812f;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(90,60,10,.22));}
.cue .cue-ico .c1{top:9px;animation:cueRise 1.9s ease-in-out infinite;}
.cue .cue-ico .c2{top:16px;animation:cueRise 1.9s ease-in-out .38s infinite;}
@keyframes cueRise{0%{transform:translateY(6px);opacity:0}28%{opacity:1}60%{opacity:.9}100%{transform:translateY(-8px);opacity:0}}

/* --- refined full-screen touch ripple (overrides the v15 baseline) --- */
.screen-ripple{position:fixed;z-index:95;top:0;left:0;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,transparent 61%,rgba(255,228,160,.05) 64%,rgba(246,221,158,.55) 66.5%,rgba(255,236,190,.95) 68.5%,rgba(246,221,158,.45) 71%,rgba(255,228,160,.06) 74%,transparent 79%);
  animation:screenRipple 1.05s cubic-bezier(.16,.62,.28,1) forwards;will-change:width,height,opacity;}
.screen-ripple::before{content:"";position:absolute;inset:0;border-radius:50%;transform:scale(.80);transform-origin:center;
  background:radial-gradient(circle,transparent 60%,rgba(255,228,160,.05) 64%,rgba(246,221,158,.42) 68%,rgba(255,228,160,.14) 72%,transparent 79%);
  animation:screenRippleInner 1.05s cubic-bezier(.18,.5,.3,1) .06s forwards;opacity:0;}
.screen-ripple::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,228,160,.14) 0%,rgba(246,221,158,.05) 40%,transparent 66%);
  animation:screenShimmer 1.05s ease-out forwards;opacity:0;}
@keyframes screenRipple{0%{width:6px;height:6px;opacity:0;}12%{opacity:1;}70%{opacity:.9;}100%{width:var(--r);height:var(--r);opacity:0;}}
@keyframes screenRippleInner{0%{opacity:0;}18%{opacity:.9;}100%{opacity:0;}}
@keyframes screenShimmer{0%{opacity:.6;}100%{opacity:0;}}
@keyframes softFlash{0%{opacity:.7;width:60vmax;height:60vmax;}100%{opacity:0;width:60vmax;height:60vmax;}}

@media (prefers-reduced-motion:reduce){
  .env-hint .ring,.env-hint .hand,.env-hint .dot,.env-hint .caption{animation:none;transform:none;}
  .env-hint .ring.r1{opacity:.5;transform:scale(1.15);}
  .env-hint .ring.r2{opacity:0;}
  .env-hint .dot{opacity:.9;}
  .cue .cue-ico .c1,.cue .cue-ico .c2{animation:none;opacity:1;}
  .cue .cue-ico .c2{display:none;}
  .cue .cue-ico .c1{top:9px;}
  .screen-ripple{animation:softFlash .5s ease-out forwards;background:radial-gradient(circle,rgba(255,228,160,.35),transparent 70%);}
  .screen-ripple::before,.screen-ripple::after{display:none;}
}

/* ============================================================================
   v17 — PAGE 5 (Thank You) base scaffold (agents refine mecca + handwriting)
   ============================================================================ */
.p5{background:#d8ccb0;}
.p5 .bg-blur{background-image:url(../assets/img/page5.jpg);}
.p5 .art{object-position:center top;}                 /* arch page — preserve the top */
/* Mecca watercolour centred in the burgundy arch (agent B tunes exact position/size) */
.p5 .mecca{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);width:52%;max-width:340px;z-index:3;pointer-events:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.28));}
/* handwritten "Thank You" area in the cream top (agent A's SVG + quill live here) */
.p5 .ty-wrap{position:absolute;left:0;right:0;top:11%;height:40%;z-index:4;display:flex;align-items:center;justify-content:center;pointer-events:none;}

/* ============================================================================
   v18 — PAGE 5 integration: handwriting (Agent A) + composition (Agent B)
   ============================================================================ */
/* handwriting stage — the .ty-wrap band (cream top) is positioned in v17 */
.p5 .ty-wrap{top:11%;height:38%;}
.ty-stage{position:relative;width:min(88vw,560px);}
.ty-svg{display:block;width:100%;height:auto;overflow:visible;}
.ty-text{-webkit-clip-path:inset(0 100% -25% 0);clip-path:inset(0 100% -25% 0);}
.ty-quill{position:absolute;left:0;top:0;height:132px;width:auto;transform:translate(-9999px,-9999px);
  transform-origin:8% 96%;opacity:0;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(60,40,10,.28));will-change:transform,opacity;}
@media (prefers-reduced-motion:reduce){ .ty-text{-webkit-clip-path:none;clip-path:none;} .ty-quill{display:none;} }

/* Mecca watercolour centred in the burgundy arch */
.p5 .mecca{left:52%;bottom:25%;transform:translateX(-50%);width:45%;max-width:296px;}

/* closing sign-off in the cream, between the writing and the arch */
.p5 #ov5{pointer-events:none;}
.p5 #ov5 .closing{position:absolute;left:50%;transform:translateX(-50%);top:44%;width:82%;text-align:center;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(.95rem,4.6vw,1.18rem);line-height:1.4;letter-spacing:.4px;
  background:linear-gradient(180deg,#b8912f,#a9812f 55%,#8a6a26);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.p5 #ov5 .closing .amp{font-style:normal;font-family:'Cinzel',serif;}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){ .p5 #ov5 .closing{color:#a9812f;-webkit-text-fill-color:currentColor;background:none;} }

/* ============================================================================
   v19 — natural WATER ripple on the start tap (replaces the gold ring):
   several concentric rings with a bright crest + dark trough (refraction),
   spreading outward and decelerating, translucent silver over the velvet.
   ============================================================================ */
.water-ripple{position:fixed;z-index:95;top:0;left:0;width:0;height:0;pointer-events:none;transform:translate(-50%,-50%);}
.wr-ring{position:absolute;left:0;top:0;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);opacity:0;
  background:radial-gradient(circle,
    transparent 54%,
    rgba(18,7,12,.16) 59%,           /* trough (shadow) */
    rgba(255,251,244,.60) 63.5%,     /* crest (highlight) */
    rgba(255,255,255,.14) 66.5%,
    rgba(18,7,12,.10) 70%,           /* faint outer trough */
    transparent 76%);
  animation:waterRing 1.9s cubic-bezier(.08,.6,.18,1) forwards;will-change:width,height,opacity;}
@keyframes waterRing{0%{width:12px;height:12px;opacity:0;}8%{opacity:.95;}70%{opacity:.5;}100%{width:var(--r);height:var(--r);opacity:0;}}
/* central drop impact */
.water-ripple::after{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,252,246,.7),rgba(255,252,246,0) 68%);animation:waterDrop .55s ease-out forwards;}
@keyframes waterDrop{0%{opacity:.9;transform:translate(-50%,-50%) scale(.35);}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6);}}
@media (prefers-reduced-motion:reduce){ .wr-ring{animation-duration:.6s;} .water-ripple::after{display:none;} }

/* === v20: typography audit === */
/* Slide 1 (Bismillah, Verse & Names) */
.p1 .ov-inner { padding: 12% 18% 15%; }
.name { font-size: clamp(2.2rem, 9.5vw, 3.2rem); }
.verse { line-height: 1.4; letter-spacing: 0.02em; }

/* Slide 2 & 3 (Nikah & Walima) */
.p2 .ov-inner, .p3 .ov-inner { padding: 22% 16% 14%; }
.evt-title { font-size: clamp(2.2rem, 12vw, 3.4rem); }
.evt-line, .evt-sub, .btn { letter-spacing: 0.25em; }

/* Slide 4 (Durood & Du'a) */
.p4 .dua-ar, .p4 .durood { line-height: 2.2; }
.p4 .dua-en { letter-spacing: 0.12em; }

/* ============================================================================
   v21 — Page 5 Kaaba: larger centrepiece (tilts via JS foreground parallax)
   ============================================================================ */
.p5 .mecca{width:62%;max-width:392px;bottom:21%;will-change:transform,translate,rotate;}

/* ============================================================================
   v22 — Page 4 monogram: "Suhail & Sana" — initials + "&" full size,
   the trailing "uhail"/"ana" at half the initial size
   ============================================================================ */
.monogram .mono-sm{font-size:.5em;}