/* Adam & Sara (demo): "Hikaya", a pop-up storybook.
   Warm desk, a cream storybook; the characters and objects carry the colour (ivory, ink, crimson, gold).
   Pages turn over the RIGHT edge (Arabic books open from the right). Figures stand up out of each page.
   Rules: film objects are centred by LAYOUT (inset + margin:auto + explicit size); GSAP adds only
   x/y/scale/rotation. Bitmaps scale; text only fades/translates. Sizes come from JS (--PW --PH --TZ ...). */
:root {
  --desk: #efe6d6;
  --paper: #fbf6ec;
  --ink: #2a1d18;
  --ink-2: #6b5a50;
  --crimson: #9e1c2c;
  --gold: #a9802f;
  --gold-2: #d6b060;
  --night: #1f1c2a;
  --serif: 'Amiri', serif;
  --script: 'Aref Ruqaa', 'Amiri', serif;
  --sans: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --PW: 350px; --PH: 700px; --TZ: 300px; --GL: 34px;
  --GW: 240px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--desk); color: var(--ink); }
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
body.locked { overflow: hidden; }
p { margin: 0; }
img { display: block; max-width: none; }

/* ------------------------------------------------ stage */
#track { position: relative; }
html.film .stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; contain: layout paint; }
.desk { position: absolute; inset: 0; background: var(--desk) url(assets/paper.webp) center / 320px repeat; }
.desk::after { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 46%, rgba(255, 252, 244, .7) 0%, rgba(255, 252, 244, 0) 60%, rgba(110, 80, 50, .12) 100%); }
html:not(.film) .desk { position: fixed; z-index: -1; }

/* the open book: pages stacked on a black cloth board that peeks out around them */
html.film .book { position: absolute; inset: 0; margin: auto; width: var(--PW); height: var(--PH); perspective: 2400px; perspective-origin: 50% 50%; will-change: transform; }
html.film .book::before { /* the board + page block */
  content: ''; position: absolute; inset: -7px -9px -12px -7px; border-radius: 6px 10px 10px 6px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(100% - 22px), rgba(255, 255, 255, .06) calc(100% - 14px), rgba(0, 0, 0, .25) 100%),
    #241c1a;
  box-shadow: 0 22px 40px -18px rgba(60, 35, 20, .55), 0 2px 0 rgba(0, 0, 0, .2);
}
html.film .book::after { /* page edges under the top page */
  content: ''; position: absolute; left: 3px; right: -3px; bottom: -6px; height: 8px; border-radius: 0 0 3px 3px;
  background: repeating-linear-gradient(180deg, #efe4cf 0 1px, #d9ccb2 1px 2px); z-index: 0;
}
.pg { position: relative; }
html.film .pg { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.pg-1 { z-index: 16; } .pg-2 { z-index: 15; } .pg-3 { z-index: 14; } .pg-4 { z-index: 13; } .pg-5 { z-index: 12; } .pg-6 { z-index: 11; }
.face, .rear { position: absolute; inset: 0; border-radius: 2px 6px 6px 2px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.face {
  background: var(--paper) url(assets/paper.webp) center / 320px repeat;
  box-shadow: inset 0 0 0 1px rgba(120, 90, 60, .08);
}
.face::before { /* spine shading on the right, a soft printed frame */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 9;
  background: linear-gradient(270deg, rgba(90, 60, 40, .16) 0, rgba(90, 60, 40, 0) 26px);
}
.face::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none; z-index: 9;
  border: 1px solid rgba(169, 128, 47, .32); border-radius: 2px; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(169, 128, 47, .18);
}
.rear { transform: rotateY(180deg); background: #f3ead9 url(assets/paper.webp) center / 320px repeat; }
.rear::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(90, 60, 40, .18) 0, rgba(90, 60, 40, 0) 30px); }
.shade { position: absolute; inset: 0; z-index: 10; pointer-events: none; background: linear-gradient(90deg, rgba(40, 25, 15, .5), rgba(40, 25, 15, .1)); opacity: 0; }

/* the night page */
.pg-3 .face { background: var(--night) url(assets/paper.webp) center / 320px repeat; background-blend-mode: multiply; }
.pg-3 .face::after { border-color: rgba(214, 176, 96, .35); box-shadow: inset 0 0 0 3px var(--night), inset 0 0 0 4px rgba(214, 176, 96, .2); }
.pg-3 .face::before { background: radial-gradient(70% 45% at 50% 70%, rgba(214, 176, 96, .16), rgba(214, 176, 96, 0) 70%), linear-gradient(270deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, 0) 26px); }

/* text zone (top) + figures standing on the ground line (bottom) */
.txt { position: absolute; left: 1.2rem; right: 1.2rem; top: 0; height: var(--TZ); z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: var(--fs, 16px); }
/* every size inside .txt is in em: main-1.js fits each page's text block into the space above its figures */
.fig { position: absolute; left: 0; right: 0; margin-inline: auto; bottom: var(--GL); z-index: 2; pointer-events: none; will-change: transform; }
.fig img { width: 100%; height: auto; }
.idle { position: relative; width: 100%; height: 100%; will-change: transform; }
.folio { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4; text-align: center; font-family: var(--serif); font-size: .78rem; color: var(--gold); opacity: .8; }
.pg-3 .folio { color: var(--gold-2); }
.ln { display: block; white-space: nowrap; }

/* 1 · verse */
.basmala { font-size: .92em; color: var(--ink-2); margin-bottom: .55em; }
.verse { font-weight: 700; font-size: 1.2em; line-height: 1.9; color: var(--ink); }
.sura { margin-top: .5em; font-family: var(--sans); font-size: .72em; color: var(--crimson); letter-spacing: .02em; }
.dv { z-index: 3; }
.dv .idle img { position: absolute; left: 0; top: 0; width: 100%; }
.dv .dn { opacity: 0; transform: scaleX(-1); }
.dv.flap .up { opacity: 0; } .dv.flap .dn { opacity: 1; }
.dv-a { bottom: calc(var(--GL) + var(--FZ) * .66); }
.dv-b { bottom: calc(var(--GL) + var(--FZ) * .8); }
.hrt { z-index: 4; }

/* 2 · names */
.hosts { font-size: 1em; line-height: 1.8; color: var(--ink-2); }
.names { display: flex; flex-direction: column; align-items: center; margin: .35em 0 .25em; }
.nm { font-family: var(--script); font-weight: 700; font-size: 3.1em; line-height: 1.15; white-space: nowrap; color: var(--crimson); }
.amp { font-family: var(--script); font-weight: 700; font-size: 1.3em; line-height: 1; color: var(--gold); margin: -.1em 0 0; }
.bride-father { font-size: 1em; line-height: 1.8; color: var(--ink-2); }
.floaters { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.floaters img, .stars img, .swirl img, .fx img { position: absolute; left: 0; right: 0; margin-inline: auto; will-change: transform, opacity; opacity: 0; }
.floaters img { bottom: var(--GL); }

/* 3 · date (night) */
.pg-3 .txt { color: #f3e9d2; }
.d-day { font-family: var(--script); font-weight: 700; font-size: 2.1em; line-height: 1.35; color: var(--gold-2); }
.d-core { display: flex; flex-direction: column; align-items: center; margin: .1em 0 .45em; }
.d-core b { font-family: var(--script); font-weight: 700; font-size: 4em; line-height: 1.1; color: #fbf3df; }
.d-core span { font-family: var(--sans); font-size: .78em; color: var(--gold-2); margin-top: .1em; }
.d-date { font-size: 1.3em; font-weight: 700; }
.d-time { margin-top: .2em; font-family: var(--sans); font-size: .85em; color: rgba(243, 233, 210, .75); }
.stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* 4 · place */
.p-kicker { font-family: var(--sans); font-size: .76em; color: var(--crimson); letter-spacing: .04em; }
.v-name { font-family: var(--script); font-weight: 700; font-size: 1.85em; line-height: 1.4; color: var(--ink); margin-top: .15em; white-space: nowrap; }
.v-sub { font-size: 1em; color: var(--ink-2); margin: .1em 0 1em; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; width: 100%; max-width: 21em; }
.btn {
  font-family: var(--sans); font-size: .8em; text-decoration: none; color: #fff8ec; background: var(--crimson);
  min-height: max(40px, 3.1em); padding: 0 .6em; border-radius: 999px; display: flex; align-items: center; justify-content: center; white-space: nowrap;
}
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(158, 28, 44, .35); }
html.film .pg-4 .actions { pointer-events: auto; }
.f-sky { bottom: calc(var(--GL) + var(--FZ) * .2); z-index: 1; }
.f-car { z-index: 2; }
.wheel { position: absolute; will-change: transform; }

/* 5 · dua */
.dua { font-family: var(--script); font-weight: 700; font-size: 1.95em; line-height: 1.65; color: var(--crimson); }
.swirl { position: absolute; left: 0; right: 0; bottom: var(--GL); height: var(--FZ); z-index: 3; pointer-events: none; }

/* 6 · close */
.end { font-family: var(--script); font-weight: 700; font-size: 2.2em; line-height: 1.6; color: var(--ink); }
.end .ln:last-child { color: var(--crimson); }
.fam { margin-top: .6em; font-family: var(--sans); font-size: .78em; color: var(--gold); }
.f-back { bottom: calc(var(--GL) + var(--FZ) * .06); z-index: 1; }
.f-roses { bottom: calc(var(--GL) - var(--FZ) * .1); z-index: 3; }

.fx { position: absolute; inset: 0; z-index: 25; pointer-events: none; }

/* ------------------------------------------------ gate: the closed storybook */
#gate { position: fixed; inset: 0; z-index: 30; background: var(--desk) url(assets/paper.webp) center / 320px repeat; }
#gate::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 50% 46%, rgba(255, 252, 244, .7) 0%, rgba(255, 252, 244, 0) 60%, rgba(110, 80, 50, .12) 100%); }
#gate.gone { display: none; }
.g-top { position: absolute; left: 0; right: 0; top: 0; height: var(--gTop); z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 1rem; text-align: center; }
.g-kicker { font-family: var(--sans); font-size: .82rem; letter-spacing: .04em; color: var(--crimson); }
.g-names { font-family: var(--script); font-weight: 700; font-size: clamp(2.6rem, 12vw, 3.6rem); line-height: 1.3; color: var(--ink); }
.g-names span { color: var(--crimson); font-size: .6em; margin-inline: .14em; }
.g-book { position: absolute; left: 0; right: 0; margin-inline: auto; top: var(--gBookTop); width: var(--GW); height: calc(var(--GW) * 971 / 735); z-index: 1; perspective: 1400px; will-change: transform; }
.g-book::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: -4%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(70, 40, 20, .35), rgba(70, 40, 20, 0)); }
.g-body { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-page { position: absolute; left: 1.2%; top: .9%; width: calc(95.8% - 1.2%); height: calc(83.6% - 1.2%); background: var(--paper) url(assets/paper.webp) center / 220px repeat; border-radius: 2px; box-shadow: inset -10px 0 18px -10px rgba(90, 60, 40, .3); }
.g-page::after { content: ''; position: absolute; inset: 8%; border: 1px solid rgba(169, 128, 47, .3); }
.g-cover { position: absolute; left: 0; top: 0; width: calc(100% * 704 / 735); height: calc(100% * 812 / 971); transform-origin: 100% 50%; transform-style: preserve-3d; will-change: transform; }
.g-cover img { width: 100%; height: 100%; }
.g-title { position: absolute; left: 53.4%; top: 49.4%; width: 0; display: flex; justify-content: center; transform: translateY(-50%); font-family: var(--script); font-weight: 700; font-size: calc(var(--GW) * .1); color: #3a2416; white-space: nowrap; text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
.g-hint { position: absolute; left: 0; right: 0; top: var(--gHint); z-index: 2; text-align: center; font-family: var(--sans); font-size: .95rem; color: var(--crimson); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .4; } }
#open { all: unset; position: absolute; inset: 0; z-index: 3; cursor: pointer; }
#open:focus-visible { outline: 2px solid var(--gold); outline-offset: -8px; }

/* ------------------------------------------------ RSVP */
#rsvp { position: relative; z-index: 8; background: var(--paper) url(assets/paper.webp) center / 320px repeat; padding: 4.2rem 1.3rem calc(3rem + env(safe-area-inset-bottom)); text-align: center; box-shadow: 0 -1px 0 rgba(158, 28, 44, .12); }
.r-heart { width: 54px; height: auto; margin: 0 auto .6rem; }
.r-kicker { font-family: var(--sans); font-size: .8rem; color: var(--crimson); letter-spacing: .04em; }
.r-title { margin: .35rem 0 .5rem; font-family: var(--script); font-weight: 700; font-size: clamp(2rem, 8.6vw, 2.6rem); line-height: 1.35; color: var(--ink); }
.r-sub { font-size: 1.02rem; color: var(--ink-2); margin-bottom: 2rem; }
.credit { display: inline-block; margin-top: 3rem; font-family: var(--sans); font-size: .76rem; color: var(--ink-2); text-decoration: none; opacity: .75; }

/* scroll cue */
#cue { position: fixed; left: 0; right: 0; margin: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); width: 2px; height: 30px; z-index: 20; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; border-radius: 2px; background: rgba(158, 28, 44, .18); }
#cue i { position: absolute; inset: 0; background: var(--crimson); will-change: transform; animation: cue 1.9s cubic-bezier(.6, 0, .3, 1) infinite paused; }
#cue.on i { animation-play-state: running; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ------------------------------------------------ fallback (reduced motion / no GSAP): pages stacked, calm */
html:not(.film) .book { display: grid; gap: 1.6rem; padding: 1.6rem 1rem; max-width: 460px; margin: 0 auto; }
html:not(.film) .pg { height: min(150vw, 690px); }
html:not(.film) .face { box-shadow: 0 10px 30px -14px rgba(60, 35, 20, .5); }
html:not(.film) .rear, html:not(.film) .dv, html:not(.film) .hrt, html:not(.film) .f-bride, html:not(.film) .f-groom, html:not(.film) .fx { display: none; }
html:not(.film) .pg .face > * { opacity: 0; transition: opacity .9s ease; }
html:not(.film) .pg.in .face > * { opacity: 1; }
html:not(.film) #gate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
html:not(.film) .g-top, html:not(.film) .g-hint, html:not(.film) .g-book { position: relative; top: auto; height: auto; padding: 0; }
html:not(.film) .g-book { height: calc(var(--GW) * 971 / 735); }
@media (prefers-reduced-motion: reduce) { .g-hint, #cue i { animation: none; } }