/* =====================================================
   Animated wedding invitation
   Ivory envelope · watercolour lake · olive wreath
   monogram · gold heart wax seal · scratch card.

   The page never scrolls. A scroll gesture, swipe or
   arrow key animates one full-screen section out and
   the next one in. #bg carries [data-theme] and is
   retinted to whichever section is showing.
   ===================================================== */

:root{
  /* gold foil */
  --g1:#f0dba4;
  --g2:#c9a45c;
  --g3:#a5832f;
  --g4:#7d6320;

  /* olive / eucalyptus */
  --sage:#8ea183;

  /* theme: rose (the default ivory page) */
  --paper-1:#fdfbf6;
  --paper-2:#f6efe4;
  --paper-3:#ece2d2;
  --ink:#3f4653;
  --muted:#80776a;
  --line:rgba(165,131,47,.3);
  --swatch:#c9a45c;
  --art-filter:none;
  --art-op:.34;
  --petal-a:#cdbfa6;
  --petal-b:#dcc68f;
  --petal-c:#b3c0ac;

  --ease:cubic-bezier(.2,.85,.25,1);
  --stage-w:min(560px, 100vw);
}

[data-theme="cover"]{
  --paper-1:#fbf7f0;
  --paper-2:#f3ece1;
  --paper-3:#e6dccd;
  --art-op:0;
}

/* Welcome evening — lavender, the same lavender as the dress code */
[data-theme="welcome"]{
  --paper-1:#faf7fe;
  --paper-2:#efe8fb;
  --paper-3:#ddd0f2;
  --ink:#3f3163;
  --muted:#675892;
  --line:rgba(120,95,175,.3);
  --swatch:#b9a4e8;
  --art-filter:hue-rotate(-34deg) saturate(.6);
  --art-op:.3;
  --petal-a:#c9b8ec;
  --petal-b:#e8def9;
  --petal-c:#ab94d9;
}

/* Garden brunch — yellow, the same yellow as the dress code */
[data-theme="brunch"]{
  --paper-1:#fffdf2;
  --paper-2:#fbf3d5;
  --paper-3:#f3e3ac;
  --ink:#5f4a12;
  --muted:#8a7226;
  --line:rgba(165,131,47,.38);
  --swatch:#efc63f;
  --art-filter:hue-rotate(-152deg) saturate(.5);
  --art-op:.3;
  --petal-a:#eed88b;
  --petal-b:#e6c363;
  --petal-c:#f7ecc0;
}

/* Wedding — emerald, the same emerald as the dress code */
[data-theme="wedding"]{
  --paper-1:#f7fbf8;
  --paper-2:#e7f2ea;
  --paper-3:#cfe4d6;
  --ink:#1f4436;
  --muted:#436d5a;
  --line:rgba(63,125,99,.32);
  --swatch:#3f7d63;
  --art-filter:hue-rotate(-66deg) saturate(.55);
  --art-op:.28;
  --petal-a:#a9cfba;
  --petal-b:#cfe6d8;
  --petal-c:#8bbaa1;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;background:#f3ece1;color:var(--ink);
  font-family:"Cormorant Garamond",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none !important}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* ---------- fixed backdrop ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.paper{
  position:absolute;inset:0;
  background:linear-gradient(172deg,var(--paper-1) 0%,var(--paper-2) 58%,var(--paper-3) 100%);
  transition:background 1.1s var(--ease);
}
.artband{
  position:absolute;left:0;right:0;bottom:0;height:62%;
  background:url("../img/lake.svg") center bottom / cover no-repeat;
  opacity:var(--art-op);
  filter:var(--art-filter);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 38%,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 38%,#000 82%,transparent 100%);
  transition:opacity 1.1s var(--ease), filter 1.1s var(--ease);
}
.grain{
  position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.055'/></svg>");
}
.sheen{
  position:absolute;inset:-25%;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.5) 47%,rgba(255,255,255,.18) 52%,transparent 61%);
  background-size:260% 100%;
  animation:sweep 13s ease-in-out infinite;
  mix-blend-mode:soft-light;
}
@keyframes sweep{0%{background-position:130% 0}58%,100%{background-position:-50% 0}}
.petals{position:absolute;inset:0;width:100%;height:100%}

/* ---------- progress + chrome ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:40;background:rgba(80,70,55,.12)}
.progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--g3),var(--g2));
  transition:width .55s var(--ease);
}
body:not(.is-open) .progress{opacity:0}

.topbar{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:var(--stage-w);z-index:35;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(20px + env(safe-area-inset-top)) 18px 0;
  pointer-events:none;transition:opacity .6s;
}
body:not(.is-open) .topbar{opacity:0}
.topbar__tag{
  font-family:"Marcellus",serif;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--g4);opacity:.6;
}
.iconbtn{
  width:32px;height:32px;display:grid;place-items:center;border-radius:50%;pointer-events:auto;
  background:rgba(255,255,255,.66);border:1px solid rgba(165,131,47,.28);
  box-shadow:0 2px 10px rgba(90,74,50,.12);
  backdrop-filter:blur(6px);transition:background .25s,transform .25s;
}
.iconbtn:hover{background:#fff;transform:scale(1.06)}
.ico-music{display:flex;align-items:flex-end;gap:2px;height:13px}
.ico-music i{width:2px;background:var(--g3);height:5px;border-radius:1px;animation:eq .9s ease-in-out infinite alternate}
.ico-music i:nth-child(2){animation-delay:.15s;height:11px}
.ico-music i:nth-child(3){animation-delay:.3s;height:7px}
.ico-music i:nth-child(4){animation-delay:.45s;height:13px}
.is-muted .ico-music i{animation-play-state:paused;height:4px;opacity:.5}
@keyframes eq{to{height:13px}}

/* section dots */
.dots{
  position:fixed;right:13px;top:50%;transform:translateY(-50%);z-index:36;
  display:flex;flex-direction:column;gap:9px;transition:opacity .6s;
}
body:not(.is-open) .dots{opacity:0;pointer-events:none}
.dots button{
  width:7px;height:7px;padding:0;border-radius:50%;
  background:rgba(120,100,70,.26);
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.dots button:hover{background:rgba(120,100,70,.5)}
.dots button.is-on{background:var(--g2);transform:scale(1.6)}

/* the nudge to keep going */
.scrollcue{
  position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));z-index:34;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--g4);pointer-events:none;transition:opacity .5s;
}
.scrollcue span{font-family:"Marcellus",serif;font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6}
.scrollcue svg{width:20px;height:12px;animation:nudge 1.9s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}
.scrollcue.is-hidden,body:not(.is-open) .scrollcue{opacity:0}

/* ---------- the deck of sections ---------- */
#deck{position:fixed;inset:0;z-index:10}
.scene{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:86px 26px 92px;
  opacity:0;visibility:hidden;
  transform:translate3d(0,7%,0) scale(.985);
  transition:opacity .7s var(--ease), transform .9s var(--ease), visibility .9s;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
.scene::-webkit-scrollbar{width:0;height:0}
.scene.is-above{transform:translate3d(0,-7%,0) scale(.985)}
.scene.is-current{opacity:1;visibility:visible;transform:none;z-index:2}
.inner{width:100%;max-width:400px;margin:auto;position:relative;z-index:4}
.center{text-align:center}

/* ---------- reveal as each section arrives ---------- */
[data-r]{opacity:0}
.scene.is-current [data-r="up"]  {animation:rUp   1s var(--ease) both;  animation-delay:var(--d,0s)}
.scene.is-current [data-r="zoom"]{animation:rZoom 1.1s var(--ease) both;animation-delay:var(--d,0s)}
.scene.is-current [data-r="wide"]{animation:rWide 1.1s var(--ease) both;animation-delay:var(--d,0s)}
.scene.is-current [data-r="arch"]{animation:rArch 1.3s var(--ease) both;animation-delay:var(--d,0s)}
.scene.is-current [data-r="draw"]{animation:rDraw 1.4s var(--ease) both;animation-delay:var(--d,0s)}

@keyframes rUp  {from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none}}
@keyframes rZoom{from{opacity:0;transform:scale(.7)} to{opacity:1;transform:none}}
@keyframes rWide{from{opacity:0;transform:scaleX(.2)} to{opacity:1;transform:none}}
@keyframes rArch{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(14px)} to{opacity:1;clip-path:inset(0 0 -20% 0);transform:none}}
@keyframes rDraw{0%{opacity:0;transform:translateY(16px) scale(.85)}60%{opacity:1}100%{opacity:1;transform:none}}

.char{display:inline-block;opacity:0;white-space:pre}
.word{display:inline-block;white-space:nowrap}
.scene.is-current .char{animation:rChar .8s var(--ease) both;animation-delay:calc(var(--d,0s) + var(--i) * .055s)}
@keyframes rChar{from{opacity:0;transform:translateY(38%);filter:blur(6px)} to{opacity:1;transform:none;filter:none}}

/* ---------- typography ---------- */
.script{font-family:"Great Vibes",cursive;font-weight:400;color:var(--g3)}

.eyebrow{
  font-family:"Marcellus",serif;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--g4);opacity:.75;margin:0 0 .9rem;line-height:2;
}
.lede{font-size:1.04rem;line-height:1.74;color:var(--muted);margin:.9rem 0 0}
.lede--sm{font-size:.92rem;opacity:.9}
.big{font-size:2rem;line-height:1.32;margin:.4rem 0}



.names{margin:1rem 0 0;display:flex;flex-direction:column;align-items:center;gap:.05rem}
.name{
  font-family:"Marcellus",serif;font-size:clamp(2.3rem,12vw,3.5rem);
  line-height:1.06;letter-spacing:.04em;color:var(--ink);
}
.amp{font-size:1.7rem;margin:.1rem 0}
.parents{font-size:.8rem;letter-spacing:.05em;color:var(--muted);opacity:.85;margin:.24rem 0 0}

.divider{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:1rem auto;color:var(--g3);opacity:.8}
.divider::before,.divider::after{content:"";height:1px;width:52px;background:linear-gradient(90deg,transparent,currentColor)}
.divider::after{background:linear-gradient(270deg,transparent,currentColor)}
.divider svg{width:40px;height:16px}

.orn{color:var(--g3);display:block;margin:0 auto}
.orn--star{width:52px;height:52px}
.orn--big{width:86px;height:92px;margin-bottom:.4rem}
.orn--sm{width:38px;height:15px;margin:0 auto .6rem;opacity:.85}

/* ---------- eucalyptus sprays (built by JS) ---------- */
.spray{position:absolute;width:min(76vw,344px);aspect-ratio:1;z-index:2;pointer-events:none;color:var(--sage)}
.spray svg{width:100%;height:100%;overflow:visible}
.spray--tl{top:-40px;left:-58px}
.spray--tr{top:-40px;right:-58px;transform:scaleX(-1)}
.scene .spray{opacity:.6}
.cover .spray{opacity:.85;z-index:2}
.scene.is-current .spray{animation:sprayIn 1.8s var(--ease) both .1s}
@keyframes sprayIn{from{opacity:0;transform:translateY(-16px) rotate(-6deg)}}
.scene.is-current .spray--tr{animation-name:sprayInR}
@keyframes sprayInR{
  from{opacity:0;transform:scaleX(-1) translateY(-16px) rotate(-6deg)}
  to{opacity:.6;transform:scaleX(-1)}
}
.spray__leaf{animation:sway 7s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes sway{0%,100%{opacity:.85}50%{opacity:.6}}

/* ---------- monogram wreath ---------- */
.monogram{position:relative;width:186px;height:186px;margin:0 auto;display:grid;place-items:center}
.monogram--sm{width:132px;height:132px}
.wreath{position:absolute;inset:0;color:var(--g3)}
.wreath svg{width:100%;height:100%}
.mono{display:flex;align-items:center;gap:.5rem;position:relative;z-index:2}
.mono__c{font-family:"Marcellus",serif;font-size:2.6rem;line-height:1;color:var(--ink);letter-spacing:.02em}
.monogram--sm .mono__c{font-size:1.9rem}
.mono__bar{width:1px;height:2.1rem;background:linear-gradient(180deg,transparent,var(--g2),transparent)}
.monogram--sm .mono__bar{height:1.6rem}
.mono__heart{
  position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:17px;height:15px;color:var(--g2);z-index:2;
}

/* ---------- the scratch card ---------- */
.scratch-title{font-size:clamp(1.8rem,8vw,2.3rem);margin:.5rem 0 .1rem;line-height:1.2}
.minidiv--c{display:block;margin:0 auto;color:var(--g2);opacity:.8}
.scratch{
  position:relative;width:min(80vw,286px);aspect-ratio:1/.95;
  margin:.9rem auto 0;touch-action:none;user-select:none;-webkit-user-select:none;
}
.scratch__prize{position:absolute;inset:0;display:grid;place-items:center}
.scratch__heart{position:absolute;inset:0;width:100%;height:100%;color:var(--g3);opacity:.8}
.scratch__text{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.1rem;
  transform:translateY(-5%);padding:0 14%;
}
.scratch__small{font-size:1.35rem;line-height:1.2}
.scratch__date{
  font-family:"Marcellus",serif;font-weight:400;
  font-size:clamp(.92rem,4.3vw,1.1rem);letter-spacing:.11em;color:var(--ink);margin-top:.2rem;
}
.scratch__day,.scratch__time{
  font-family:"Marcellus",serif;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
}
.scratch__foil{
  position:absolute;inset:0;width:100%;height:100%;
  cursor:crosshair;touch-action:none;transition:opacity .8s var(--ease);
}
.scratch.is-revealed .scratch__foil{opacity:0;pointer-events:none}
.scratch__hint{
  position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  font-family:"Marcellus",serif;font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--g4);opacity:.65;white-space:nowrap;transition:opacity .4s;
  animation:breathe 3s ease-in-out infinite;
}
.scratch.is-scratching .scratch__hint,.scratch.is-revealed .scratch__hint{opacity:0;animation:none}

.scratch-done{
  font-size:clamp(1.6rem,7vw,2rem);margin:1.1rem 0 0;line-height:1.25;
  opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.scratch-done.is-shown{opacity:1;transform:none}

.confetti{position:absolute;inset:-20% -30%;pointer-events:none;overflow:hidden}
.confetti i{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--c,#c9a45c);opacity:0;
}
.scratch.is-revealed .confetti i{animation:pop 1.5s var(--ease) both;animation-delay:var(--cd,0s)}
@keyframes pop{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.3)}
  25%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--cx,0),var(--cy,-120px),0) scale(1)}
}

/* ---------- event details ---------- */
.etitle{
  font-family:"Marcellus",serif;font-size:clamp(2.3rem,11vw,3.2rem);
  letter-spacing:.07em;margin:.2rem 0 0;line-height:1.05;color:var(--ink);
}
.tagline{font-size:1.28rem;margin:.35rem 0 0}
.edetails{margin:.2rem 0 0;display:flex;flex-direction:column;gap:.85rem}
.edetails dt{
  font-family:"Marcellus",serif;font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--g4);opacity:.7;margin-bottom:.22rem;
}
.edetails dd{margin:0;font-size:1.02rem;line-height:1.55;color:var(--ink)}
.dress{
  margin:1.1rem 0 0;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  font-family:"Marcellus",serif;color:var(--g4);opacity:.9;
  display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;
}
/* the chip is the page's own colour, so the page matches the dress code */
.swatch{
  width:13px;height:13px;border-radius:50%;
  background:var(--swatch);
  box-shadow:0 0 0 1px rgba(255,255,255,.9), 0 0 0 2px var(--line);
}

/* ---------- save the date ---------- */
.bigdate{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:.4rem 0 .2rem}
.bigdate__d{font-family:"Marcellus",serif;font-size:clamp(4.2rem,25vw,6.2rem);line-height:.85;color:var(--ink)}
.bigdate__m{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.bigdate__m span{font-family:"Marcellus",serif;font-size:1.12rem;letter-spacing:.26em;text-transform:uppercase;color:var(--g4)}
.bigdate__y{opacity:.6;font-size:.92rem !important;margin-top:.25rem}

.count{display:flex;justify-content:center;gap:.5rem;margin:1.4rem 0 0}
.count__cell{
  min-width:62px;padding:.6rem .3rem;border-radius:12px;
  background:rgba(255,255,255,.62);border:1px solid rgba(165,131,47,.2);
  box-shadow:0 6px 18px rgba(90,74,50,.1);
}
.count__cell b{display:block;font-family:"Marcellus",serif;font-size:1.5rem;color:var(--g4);font-weight:400}
.count__cell span{font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:.8}

/* ---------- venue ---------- */
.venuecard{
  position:relative;padding:2rem 1.4rem 1.8rem;border-radius:4px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(165,131,47,.25);
  box-shadow:0 18px 44px rgba(90,74,50,.14);
}
.venuecard::after{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}
.vname{font-family:"Marcellus",serif;font-size:1.8rem;margin:0 0 .5rem;letter-spacing:.04em;color:var(--ink)}
.vaddr{font-size:.98rem;line-height:1.65;color:var(--muted);margin:0 0 1.3rem}

/* ---------- buttons ---------- */
.ghostbtn,.solidbtn{
  display:inline-block;margin-top:1.1rem;padding:.62rem 1.5rem;border-radius:999px;
  font-family:"Marcellus",serif;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;transition:transform .25s var(--ease),background .25s,box-shadow .25s;
}
.ghostbtn{border:1px solid var(--line);color:var(--g4);background:rgba(255,255,255,.55)}
.ghostbtn:hover{background:#fff;transform:translateY(-2px)}
.solidbtn{
  margin-top:0;color:#fff;
  background:linear-gradient(100deg,var(--g3),var(--g2));
  box-shadow:0 10px 24px rgba(165,131,47,.3);
}
.solidbtn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(165,131,47,.4)}

/* ---------- rsvp ---------- */
.rsvp{display:flex;flex-direction:column;gap:.55rem;margin:.6rem 0 0}
.rsvp__contact{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.1rem;border-radius:10px;text-decoration:none;color:var(--ink);
  background:rgba(255,255,255,.62);border:1px solid rgba(165,131,47,.2);
  box-shadow:0 6px 16px rgba(90,74,50,.08);
  transition:background .25s,transform .25s;
}
.rsvp a:hover{background:#fff;transform:translateY(-2px)}
.rsvp b{font-weight:500;font-size:.92rem}
.rsvp__contact div{text-align:left}
.rsvp small{display:block;margin-top:.2rem;font-size:.85rem;color:var(--muted);letter-spacing:.04em}
.rsvp span{font-family:"Marcellus",serif;font-size:.68rem;letter-spacing:.1em;color:var(--g4)}
.hashtag{font-family:"Marcellus",serif;font-size:.84rem;letter-spacing:.26em;margin:1rem 0 0;color:var(--g4)}
.finale-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* =====================================================
   The sealed cover
   ===================================================== */
.scene--gate{padding:0;overflow:hidden}
.cover{position:absolute;inset:0;z-index:6;overflow:hidden;cursor:pointer;background:radial-gradient(ellipse at 50% 40%,#fffdf8,#eee4d5)}
.cover__heading{position:absolute;top:12%;left:20px;right:20px;text-align:center;color:var(--g4);transition:opacity .3s}
.cover__heading p{font-family:"Marcellus",serif;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.cover__heading h2{font-family:"Great Vibes",cursive;font-weight:400;font-size:clamp(2.2rem,8vw,3rem);margin:.6rem 0}
.envelope{position:absolute;width:min(86%,480px);aspect-ratio:1.48;left:50%;top:48%;transform:translate(-50%,-50%);perspective:1400px;background:#dcc9a8;border:1px solid #cfbb98;border-radius:5px;box-shadow:0 24px 40px -12px rgba(83,62,28,.3),0 3px 5px rgba(83,62,28,.12)}

.cover__card{position:absolute;inset:5% 5% 3%;z-index:2;overflow:hidden;background:#fdfbf6;border:1px solid #d8c49b;border-radius:5px;box-shadow:0 8px 30px rgba(90,70,35,.15);transition:transform 1.1s var(--ease), opacity .8s}
.cover__card>.monogram{margin:12px auto 0;width:clamp(100px,30vw,145px);height:clamp(100px,30vw,145px)}
.envelope-flap{position:absolute;left:-1px;right:-1px;top:-1px;height:61%;z-index:4;transform-origin:center top;transform-style:preserve-3d;filter:drop-shadow(0 3px 2px rgba(90,70,40,.22))}
.envelope-flap span{display:block;width:100%;height:100%;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(165deg,#fffaf0 0%,#ede0c9 80%,#d7c39e 100%)}
.cover__art{
  position:absolute;inset:0;
  background:url("../img/lake.svg") 46% 44% / 128% auto no-repeat;
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.08) translateY(-10px)}}
.cover__haze{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(253,251,246,.96) 0%,rgba(253,251,246,.72) 12%,rgba(253,251,246,.18) 26%,transparent 38%),
    radial-gradient(80% 26% at 50% 4%, rgba(255,254,250,.9), transparent 72%);
}

.pocket{
  position:absolute;inset:0;z-index:3;border-radius:4px;overflow:hidden;
}
.pocket__l,.pocket__r{position:absolute;left:0;right:0;top:0;bottom:0;display:block}
.pocket__l{
  clip-path:polygon(0 0, 55% 55%, 55% 100%, 0 100%);
  background:linear-gradient(118deg,#fdfbf6 0%,#f6efe3 55%,#eee4d5 100%);
}
.pocket__r{
  clip-path:polygon(100% 0, 45% 55%, 45% 100%, 100% 100%);
  background:linear-gradient(242deg,#fbf8f1 0%,#f2ebdf 55%,#e9dfd0 100%);
}
.pocket__seam{
  position:absolute;left:0;right:0;top:0;bottom:0;display:block;
  background:linear-gradient(180deg,#e2d1b5,#f9f2e6 65%,#efe2ce);
  clip-path:polygon(0 100%,50% 43%,100% 100%);
  filter:drop-shadow(0 -1px 1px rgba(100,75,35,.2));
}

.seal{
  position:absolute;left:50%;top:59%;transform:translate(-50%,-50%);
  width:88px;height:84px;z-index:5;padding:0;
  transition:transform .85s var(--ease), opacity .6s;
  animation:none;
}
@keyframes sealFloat{0%,100%{margin-top:0}50%{margin-top:-4px}}
.seal__svg{width:100%;height:100%;filter:drop-shadow(0 8px 12px rgba(105,80,25,.4))}
.seal__i{font-family:"Marcellus",serif;font-size:40px;fill:#6f5418;letter-spacing:.02em}
.seal__ping{
  position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;
  border-radius:50%;border:1px solid rgba(165,131,47,.45);
  animation:pulse 2.8s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.25);opacity:0}}

.cover__foot{
  position:absolute;left:0;right:0;bottom:calc(6% + env(safe-area-inset-bottom));z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;
  animation:footIn 1.6s var(--ease) both .35s;
}
@keyframes footIn{from{opacity:0;transform:translateY(16px)}}
.taptoopen{
  margin:0 0 .35rem;padding:.42rem 1.5rem;border-radius:999px;
  font-family:"Marcellus",serif;font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--g3);background:rgba(255,255,255,.55);
  box-shadow:0 2px 14px rgba(255,255,255,.7);
  animation:breathe 3.4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}
.minidiv{width:132px;height:15px;color:var(--g2);opacity:.85}
.forever{
  margin:.15rem 0 0;font-family:"Marcellus",serif;
  font-size:clamp(.82rem,3.8vw,.95rem);letter-spacing:.3em;text-transform:uppercase;
  color:var(--g4);
}
.foreverscript{margin:-.1rem 0 0;font-size:2rem;line-height:1.1;color:var(--g3);opacity:.9}

.is-opening .envelope-flap{animation:flapOpen 1.15s ease-in-out .18s both}
@keyframes flapOpen{0%{transform:rotateX(0);z-index:4}49%{z-index:4}50%,100%{z-index:1}100%{transform:rotateX(180deg)}}
.is-opening .pocket{transform:translateY(52%);opacity:0;transition:transform 1s var(--ease) 1.05s,opacity .8s 1.25s}
.is-opening .seal{animation:none;transform:translate(-50%,-65%) scale(1.15) rotate(-12deg);opacity:0;transition:transform .45s ease,opacity .35s ease;pointer-events:none}
.is-opening .cover__foot{animation:none;opacity:0;transition:opacity .3s}
.is-opening .cover__heading{opacity:0}
.is-opening .cover__card{animation:cardUnfold 1.3s var(--ease) .7s both}
@keyframes cardUnfold{0%{transform:translateY(0)}65%{transform:translateY(-65%) scale(1.02)}100%{transform:translateY(-70%) scale(1.06)}}

/* ---------- responsive ---------- */
@media (max-height:720px){
  .scene{padding:74px 22px 78px}
  .orn--big{width:70px;height:74px}
  .monogram{width:150px;height:150px}
  .mono__c{font-size:2.1rem}
  .count__cell{min-width:56px;padding:.45rem .25rem}
  .count__cell b{font-size:1.25rem}
  .seal{width:78px;height:75px}
  .foreverscript{font-size:1.7rem}
  .scratch{width:min(64vw,228px)}
  .scratch-title{font-size:1.6rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.15s !important}
  .scene.is-current [data-r],.scene.is-current .char{opacity:1}
  .scene.is-current .spray{opacity:.6}
  .is-opening .envelope-flap,.is-opening .cover__card{animation:none!important}
  .is-opening .envelope-flap{opacity:0}
}

/* Stationery details and accessible controls. */
.welcome-title{font-size:clamp(2.3rem,8vw,3.3rem);line-height:1.2;margin:1rem 0}
.closing{font-size:1.8rem;margin:1.2rem 0 .3rem}
.itinerary{display:grid;gap:0;text-align:left;border-block:1px solid var(--line)}
.itinerary button{display:flex;align-items:center;gap:1rem;width:100%;padding:.85rem .5rem;text-align:left}
.itinerary button+button{border-top:1px solid var(--line)}
.itinerary time{font-family:"Marcellus",serif;font-size:1.3rem;color:var(--g4);min-width:2.3rem;text-align:center}
.itinerary time small{display:block;font-size:.55rem;letter-spacing:.15em}
.itinerary strong{font-weight:500;font-size:1.15rem;display:block}
.itinerary span small{font-size:.85rem;color:var(--muted)}
.itinerary button::after{content:"\2197";margin-left:auto;color:var(--g4)}
.itinerary button:hover{background:rgba(255,255,255,.65)}
.scene[data-label="Mehndi"] .inner,.scene[data-label="Haldi"] .inner,.scene[data-label="Wedding Dinner"] .inner{
  padding:28px 24px;border:1px solid var(--line);outline:1px solid var(--line);outline-offset:7px;
  background:rgba(255,255,255,.56);box-shadow:0 18px 60px rgba(70,60,40,.06);border-radius:100px 100px 5px 5px;
}
.revealbtn{display:block;margin:1rem auto 0;padding:.6rem 1rem;text-decoration:underline;text-underline-offset:4px;font-size:.9rem;color:var(--g4)}
button:focus-visible,a:focus-visible{outline:2px solid var(--g4);outline-offset:5px}
.dots{gap:2px;right:5px}
.dots button{width:24px;height:24px;border-radius:50%;background:transparent;display:grid;place-items:center}
.dots button::after{content:"";width:5px;height:5px;border-radius:50%;background:rgba(120,100,70,.35)}
.dots button.is-on{background:transparent;transform:none}
.dots button.is-on::after{background:var(--g4);box-shadow:0 0 0 4px rgba(165,131,47,.16)}
.scrollcue{pointer-events:auto;width:max-content;min-width:100px;min-height:44px;margin:auto}
.scrollcue.is-hidden,body:not(.is-open) .scrollcue{visibility:hidden;pointer-events:none}
.share-status{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:45;background:var(--paper-1);padding:.7rem 1rem;border-radius:8px;text-align:center;margin:0;max-width:90vw;overflow-wrap:anywhere}
.share-status:empty{display:none}
@media(min-width:760px){
  .cover{max-width:560px;margin:auto;border-inline:1px solid var(--line);box-shadow:0 0 90px rgba(80,60,30,.1)}
  .dots{right:calc(50% - 300px)}
}
@media(prefers-reduced-motion:reduce){[data-r],.char{animation-delay:0s!important}.confetti{display:none}}

/* Personal photos. */
.event-art{display:block;width:124px;height:186px;object-fit:contain;margin:.6rem auto;border:1px solid var(--line);border-radius:48px 48px 5px 5px;box-shadow:0 8px 20px rgba(75,55,30,.12)}
.event-portrait{position:relative;width:124px;margin:.6rem auto 1rem}
.event-portrait .event-art{margin:0}
.event-icon{position:absolute;right:-15px;bottom:-10px;width:42px;height:42px;padding:7px;border-radius:50%;background:var(--paper-1);border:1px solid var(--line);color:var(--g3);box-shadow:0 3px 8px rgba(75,55,30,.1)}
@media(max-height:720px){.event-portrait{width:88px}.event-icon{width:36px;height:36px;padding:6px;right:-12px}}
@media(max-height:720px){.event-art{width:88px;height:132px}}
.scene[data-label="The couple"] .name{font-size:clamp(1.8rem,8vw,2.8rem)}
.scene--photos .inner{max-width:520px}
.photo-album{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:center;margin:2rem 0}
.photo-print{min-width:0;margin:0;padding:7px 7px 0;background:#fffdf8;border:1px solid var(--line);box-shadow:0 12px 28px rgba(75,55,30,.13)}
.photo-print--couple{transform:rotate(-5deg) translateY(-9px)}
.photo-print--bride{transform:rotate(5deg) translateY(15px)}
.photo-print--groom{transform:rotate(-3deg) translateY(-5px)}
.photo-print img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain}
.photo-print figcaption{padding:10px 0;font-size:clamp(.65rem,2.5vw,.9rem);color:var(--g4)}
@media(max-height:720px){
  .scene--photos .welcome-title{font-size:2rem}
  .photo-album{max-width:330px;margin:1.4rem auto}
}
@media(max-height:620px){
  .scene[data-label="Mehndi"] .inner,.scene[data-label="Haldi"] .inner,.scene[data-label="Wedding Dinner"] .inner{padding:16px}
  .orn--big{width:62px;height:62px;margin:.2rem auto}
  .edetails{margin:.6rem 0}
  .edetails>div{margin-bottom:.5rem}
}