/* demo-zaid-lina v2 · "Paris letterpress": photographic materials (linen book-cloth box, champagne silk satin, deckled
   cotton cards, wax seal, tissue). Art: Gemini cut-outs via tools/render-zaid-lina.py. Type: Bodoni Moda + Amiri. */
:root {
  --stage: #ece8e1; --paper: #fbf9f4; --ink: #1d2433; --ink2: #464d5e;
  --champ: #c2a774; --champ-d: #9a7e4b; --champ-l: #e8dcc0;
  --W: 343px; --H: 549px;
  /* letterpress: the ink sits IN the paper; a light lip under each stroke, a faint shade above */
  --bite: 0 .6px 0 rgba(255,255,255,.85), 0 -.5px 0 rgba(20,24,34,.16);
}
* { box-sizing: border-box; }
html { background: var(--stage); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font-family: 'Amiri', serif; overflow-x: hidden; }
body.locked { overflow: hidden; height: 100lvh; }
p { margin: 0; }
img { display: block; }

/* ---------- stage: pale stone-washed linen, soft window light ---------- */
#track { position: relative; }
.stage {
  position: sticky; top: 0; height: 100lvh; overflow: hidden; direction: ltr;
  background: var(--stage) url(assets/linen.webp) center / cover;
}
.stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(90% 70% at 38% 30%, rgba(255,253,248,.38), rgba(255,253,248,0) 60%),
              radial-gradient(130% 100% at 50% 50%, rgba(0,0,0,0) 55%, rgba(60,48,32,.16) 100%); }
.cam { position: absolute; inset: 0; transform-origin: 50% 48%; }

.boxg {
  position: absolute; left: 50%; top: 50%; width: var(--W); height: var(--H);
  margin: calc(var(--H) / -2) 0 0 calc(var(--W) / -2);
}

/* tray (the open box): the same linen book cloth as the lid, a shadowed well inside */
.tray {
  position: absolute; left: -5%; top: -3.75%; width: 110%; height: 107.5%; border-radius: 1.4% / .9%;
  background: #efe9de url(assets/lid.webp) center / 100% 100%;
  box-shadow: 0 calc(var(--W) * .05) calc(var(--W) * .08) calc(var(--W) * -.035) rgba(58,44,24,.42),
              0 2px 5px rgba(58,44,24,.16);
}
.tray .floor {
  position: absolute; inset: 2.4%; border-radius: 3px; background: #e6dfd2;
  box-shadow: inset 0 calc(var(--W) * .03) calc(var(--W) * .05) calc(var(--W) * -.01) rgba(60,45,25,.34),
              inset 0 0 0 1px rgba(60,45,25,.1);
}

/* ---------- letterpress cards: deckled cotton paper, shadow baked into the art ---------- */
.deck { position: absolute; inset: 0; }
.card { position: absolute; inset: 0; }
.card.moving { will-change: transform; }
.card .cs { position: absolute; inset: 2%; opacity: var(--lift, 0);
  box-shadow: 0 calc(var(--W) * .12) calc(var(--W) * .16) calc(var(--W) * -.05) rgba(45,34,18,.5); }
.card .paper { position: absolute; left: -4%; top: -2.5%; width: 108%; height: 105%;
  background: url(assets/card.webp) center / 100% 100% no-repeat; }
.c-names .paper { transform: scaleX(-1); }
.c-date .paper { transform: scaleY(-1); }
.c-venue .paper { transform: scale(-1, -1); }
.c-verse .paper { filter: brightness(1.015) saturate(.85); }
.face { position: absolute; inset: 0; container-type: inline-size; overflow: hidden; color: var(--ink); }

.ln { position: absolute; left: 6%; right: 6%; text-align: center; line-height: 1.45; white-space: nowrap;
  text-shadow: var(--bite); direction: rtl; }

/* verse card */
.basm { top: 13%; font-size: 5.4cqw; color: var(--ink2); }
.orn { top: 21.5%; display: flex; justify-content: center; align-items: center; gap: 2.4cqw; }
.orn i, .rule i { display: block; width: 14cqw; height: 1px; background: var(--champ); }
.orn b, .rule b { display: block; width: 1.8cqw; height: 1.8cqw; transform: rotate(45deg); border: 1px solid var(--champ-d); }
.v { font-size: 6.9cqw; line-height: 1.5; }
.v1 { top: 27%; } .v2 { top: 34.2%; } .v3 { top: 41.4%; } .v4 { top: 48.6%; }
.sura { top: 58.5%; font-size: 4.3cqw; color: var(--champ-d); }

/* names card */
.h1, .h2 { font-size: 4.7cqw; color: var(--ink2); }
.h1 { top: 9%; } .h2 { top: 14.2%; }
.nm { font-weight: 700; font-size: 17cqw; line-height: 1.3; letter-spacing: 0; }
.na { top: 22.5%; } .nb { top: 41%; }
.amp { top: 35.4%; font-size: 9cqw; color: var(--champ-d); }
.lat { top: 56.5%; font-family: 'Bodoni Moda', serif; font-style: italic; font-size: 7.4cqw; color: var(--ink); direction: ltr; }
.lat b { font-weight: 400; color: var(--champ-d); }
.bf { top: 85%; font-size: 4.9cqw; color: var(--ink2); }

/* date card */
.dday { top: 7.2%; font-size: 8.4cqw; }
.dnum { top: 17.5%; font-weight: 700; font-size: 30cqw; line-height: 1.25; color: var(--ink);
  text-shadow: 0 1.2px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(20,24,34,.22); }
.dmon { top: 47%; font-size: 7.6cqw; }
.dtime { top: 54.5%; font-size: 5.2cqw; color: var(--ink2); }
.rule { top: 63%; display: flex; justify-content: center; align-items: center; gap: 2.4cqw; }
.dcount { top: 66.5%; font-size: 5.4cqw; color: var(--ink2); }
.dcount b { font-size: 8.6cqw; color: var(--ink); font-weight: 700; }
.dfr { top: 81%; font-family: 'Bodoni Moda', serif; font-style: italic; font-size: 4.4cqw; color: var(--champ-d); direction: ltr; }

/* venue card */
.kick { top: 7%; font-size: 5cqw; color: var(--champ-d); }
.sketch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sketch path { fill: none; stroke: #232a3a; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sketch .soft path { stroke: #8a8f9b; stroke-width: 1.5; }
.vname { top: 56%; font-weight: 700; font-size: 8.8cqw; }
.vsub { top: 63.5%; font-size: 5.2cqw; color: var(--ink2); }
.acts { top: 72%; display: grid; gap: 2.2cqw; justify-items: center; white-space: normal; text-shadow: none; }
.btn { display: inline-block; min-width: 56cqw; padding: 2.1cqw 5cqw; border-radius: 999px; font: 700 4.3cqw/1.4 'Amiri', serif;
  text-decoration: none; color: var(--paper); background: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29,36,51,.35); }

/* close card: the satin bow is tied again above the dua, a wax seal at the foot */
.dua1, .dua2 { font-size: 8.6cqw; font-weight: 700; }
.dua1 { top: 39%; } .dua2 { top: 47.3%; }
.sign { top: 58.5%; font-size: 5.4cqw; color: var(--ink2); }
.fam { top: 65%; font-size: 5.6cqw; color: var(--champ-d); }
.cseal { position: absolute; left: 39.5%; top: 73.5%; width: 21%; --sz: calc(var(--W) * .21); }
.stamp { top: 88%; font-size: 4.2cqw; color: var(--champ-d); }

/* wax seal with the Z&L impressed (shared by the tissue and the last card) */
.seal { position: relative; filter: drop-shadow(0 1.5px 1.5px rgba(60,44,20,.35)); }
.seal img { position: relative; width: 100%; height: auto; }
.seal p { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; padding-bottom: 2%; white-space: nowrap;
  font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 600; font-size: calc(var(--sz, 80px) * .3); color: #9c7f4a; direction: ltr;
  text-shadow: -.7px -.7px .3px rgba(92,68,32,.6), .8px 1px .4px rgba(255,244,214,.9); }
.seal p b { font-weight: 400; font-size: .72em; padding: 0 .04em; }

/* the silk ribbon: one WebGL strip textured with real satin (main-2.js) */
.rib { position: absolute; left: -30%; top: -12.5%; width: 160%; height: 125%; pointer-events: none; }

/* photographic bows: tied + loosened frames in register, pivot on the knot (31.7 % down the image) */
.bow, .bow2 { position: absolute; aspect-ratio: 900 / 549; transform-origin: 50% 31.7%;
  filter: drop-shadow(0 calc(var(--W) * .01) calc(var(--W) * .012) rgba(52,38,18,.34)); }
.bow img, .bow2 img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bow .b-loose, .bow2 .b-tied { opacity: 0; }
.bow { left: 50%; top: 58%; width: 51%; margin-left: -25.5%; margin-top: calc(var(--W) * -.56 * 549 / 900 * .317); }
.bow2 { left: 50%; top: 18.75%; width: 52%; margin-left: -26%; margin-top: calc(var(--W) * -.52 * 549 / 900 * .317); visibility: hidden; }

/* tissue (real crinkled tissue, folds back from the seam), held by the wax seal */
.tissue { position: absolute; left: -2.6%; top: -1.6%; width: 105.2%; height: 103.2%; perspective: 1100px; }
.leaf { position: absolute; top: 0; height: 100%; width: 50.6%; opacity: .97;
  background: #efe6d4 url(assets/tissue.webp) center / 200% auto; backface-visibility: visible; }
.leaf::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.leaf.l { left: 0; transform-origin: 0 50%; background-position: 0 50%; }
.leaf.r { right: 0; transform-origin: 100% 50%; background-position: 100% 50%; }
.leaf.l::after { background: linear-gradient(90deg, rgba(90,70,40,.12), rgba(90,70,40,0) 12%, rgba(90,70,40,0) 88%, rgba(90,70,40,.1)); }
.leaf.r::after { background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(90,70,40,0) 12%, rgba(90,70,40,0) 88%, rgba(90,70,40,.12)); }
.tissue .seal { position: absolute; left: 50%; top: 50%; width: 24%; --sz: calc(var(--W) * .25); }

/* lid: linen book cloth (photo), blind-debossed monogram, foil names, the satin band + bow */
.lid, .lid-sh { position: absolute; left: -6.2%; top: -4.5%; width: 112.4%; height: 109%; border-radius: 1.6% / 1%; }
.lid-sh { box-shadow: 0 calc(var(--W) * .16) calc(var(--W) * .2) calc(var(--W) * -.08) rgba(45,34,18,.5); opacity: 0; }
.lid { background: url(assets/lid.webp) center / 100% 100% no-repeat;
  box-shadow: 0 2px 3px rgba(55,42,22,.16), 0 calc(var(--W) * .06) calc(var(--W) * .09) calc(var(--W) * -.04) rgba(55,42,22,.42); }
.lid p { position: absolute; left: 0; right: 0; text-align: center; }
.l-fr { top: 15.5%; font-family: 'Bodoni Moda', serif; font-style: italic; font-size: calc(var(--W) * .046); color: #a48a5a;
  letter-spacing: .06em; text-shadow: 0 .6px 0 rgba(255,255,255,.7); direction: ltr; }
.l-mono { top: 21%; font-family: 'Bodoni Moda', serif; font-size: calc(var(--W) * .25); line-height: 1.1; color: #ebe4d7; direction: ltr;
  text-shadow: -1px -1.2px .4px rgba(255,255,255,.95), 1.2px 1.6px 1.4px rgba(92,72,42,.38); }
.l-mono i { font-style: italic; } .l-mono b { font-weight: 400; font-style: italic; font-size: .7em; padding: 0 .06em; }
.l-ar { top: 79%; font-weight: 700; font-size: calc(var(--W) * .084); color: #a88d58;
  text-shadow: 0 .8px 0 rgba(255,250,235,.9), 0 -.5px 0 rgba(90,68,30,.35); direction: rtl; }
.l-date { top: 88.4%; font-size: calc(var(--W) * .043); color: var(--ink2); direction: rtl; text-shadow: var(--bite); }
.band { position: absolute; top: 58%; height: calc(var(--W) * .1); margin-top: calc(var(--W) * -.05); width: 52%;
  background: url(assets/ribbon.webp) 0 0 / auto 100% repeat-x;
  box-shadow: 0 1.5px 2px rgba(60,45,25,.22), 0 calc(var(--W) * .012) calc(var(--W) * .02) rgba(60,45,25,.16); overflow: hidden; }
.band::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,250,236,0) 20%, rgba(255,250,236,.32) 42%, rgba(255,250,236,0) 64%); }
.band i { position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, rgba(255,250,236,0), rgba(255,250,236,.42), rgba(255,250,236,0)); }
.b-l { left: -1.2%; } .b-r { right: -1.2%; }

/* gate overlay */
#gate { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: max(4.2svh, env(safe-area-inset-top)) 0 max(4.6svh, env(safe-area-inset-bottom)); pointer-events: none; }
#gate.gone { display: none; }
.g-top { text-align: center; }
.g-kicker { font-size: clamp(15px, 4.2vw, 19px); color: var(--champ-d); }
.g-names { font-weight: 700; font-size: clamp(30px, 9.4vw, 44px); line-height: 1.3; }
.g-names span { font-weight: 400; color: var(--champ-d); font-size: .6em; }
.g-hint { font-size: clamp(14px, 3.9vw, 17px); color: var(--ink2); display: flex; align-items: center; gap: .6em; }
.g-hint::before, .g-hint::after { content: ""; width: 26px; height: 1px; background: var(--champ); }
#open { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* scroll cue */
#cue { position: fixed; z-index: 15; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); width: 1px; height: 34px; margin-left: -.5px;
  background: rgba(156,128,76,.45); opacity: 0; visibility: hidden; pointer-events: none; }
#cue i { position: absolute; left: -2.5px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--champ-d); }

/* RSVP reply card: the same deckled cotton */
#rsvp { position: relative; padding: 9svh 6vw 7svh; background: var(--stage) url(assets/linen.webp) center / cover;
  display: grid; justify-items: center; gap: 22px; }
.reply { position: relative; width: min(100%, 440px); padding: 40px 30px 34px; text-align: center; }
.reply::before { content: ""; position: absolute; inset: -14px -16px; z-index: -1;
  background: url(assets/card.webp) center / 100% 100% no-repeat; }
.r-lat { font-family: 'Bodoni Moda', serif; font-style: italic; font-size: 17px; color: var(--champ-d); letter-spacing: .12em; text-shadow: var(--bite); }
.r-title { margin: 4px 0 2px; font-size: 30px; font-weight: 700; text-shadow: var(--bite); }
.r-sub { font-size: 16px; color: var(--ink2); margin-bottom: 20px; }
.credit { font-size: 14px; color: var(--ink2); text-decoration: none; opacity: .8; }

/* ---------- no-film fallback (reduced motion / no GSAP): cards in a column ---------- */
html:not(.film) .stage { position: relative; height: auto; overflow: visible; padding: 6vh 0; }
html:not(.film) .cam { position: relative; }
html:not(.film) .boxg { position: relative; left: auto; top: auto; margin: 0 auto; height: auto; display: block; }
html:not(.film) .tray, html:not(.film) .tissue, html:not(.film) .lid, html:not(.film) .lid-sh, html:not(.film) .rib { display: none; }
html:not(.film) .deck { position: relative; display: flex; flex-direction: column-reverse; gap: 5vh; }
html:not(.film) .card { position: relative; height: var(--H); }
html:not(.film) .bow2 { visibility: visible; top: auto; bottom: calc(var(--H) * .8); }
html:not(.film) .bow2 .b-tied { opacity: 1; }