/* Ali & Noor (demo) — "Sandouq al-Arous": the bride's chest.
   Ivory silk stage; the objects carry the colour (bottle-green lacquer, brass, jasmine).
   Rules: film objects are centred by LAYOUT (inset:0 + margin:auto + explicit size); GSAP adds only
   x/y/scale/rotation. Only bitmaps scale; text only fades/translates. Sizes come from JS (--CW --CH --M). */
:root {
  --silk: #f3ecdf;
  --paper: #fbf7ef;
  --ink: #1d2a22;
  --ink-2: #5d6a5f;
  --green: #1f4a36;
  --brass: #9a6f22;
  --brass-2: #c9a256;
  --serif: 'Amiri', serif;
  --script: 'Aref Ruqaa', 'Amiri', serif;
  --sans: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --CW: 260px; --CH: 376px; --M: 320px;          /* chest + mirror base sizes */
  --gTop: 30vh; --gBot: 84vh; --vTop: 54vh; --cTop: 58vh; --pBot: 52vh;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--silk); 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; }
.silk { position: absolute; inset: 0; background: var(--silk) url(assets/silk.webp) center / cover no-repeat; }
.silk::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 45%, rgba(255, 253, 247, .55) 0%, rgba(255, 253, 247, 0) 55%, rgba(120, 100, 60, .10) 100%); }
html:not(.film) .silk { position: fixed; z-index: -1; }

.obj { position: absolute; inset: 0; margin: auto; pointer-events: none; will-change: transform, opacity; }
.tray-g, .lid-g { width: var(--CW); height: var(--CH); }
.tray-g { z-index: 2; }
.mirror { z-index: 3; width: var(--M); height: calc(var(--M) / 1.0156); }
.lid-g { z-index: 4; }
.obj > img { position: absolute; }
.tray, .lid { inset: 0; width: 100%; height: 100%; }
.c-shadow { left: -19.5%; right: -19.5%; top: calc(var(--CW) * -.195 + 3%); width: 139%; height: calc(100% + var(--CW) * .39); }
.sprig { width: 46%; height: auto; }
.sp-a { top: 4%; right: 13%; transform: rotate(12deg); }
.sp-b { bottom: 4%; left: 13%; transform: rotate(192deg); }
.key { width: 44%; height: auto; right: 4%; bottom: 4%; }

.m-shadow { left: -16.5%; top: -12%; width: 133%; height: 133%; }
.m-glass, .m-map { inset: 0; margin: auto; width: 63%; height: 64%; }
.m-map { opacity: 0; }
.m-frame { inset: 0; width: 100%; height: 100%; }

.blooms { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.blooms img { position: absolute; inset: 0; margin: auto; width: calc(var(--M) * .17); height: auto; will-change: transform, opacity; opacity: 0; }

/* ------------------------------------------------ scenes */
.sc { position: relative; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.4rem; min-height: 100svh; }
html.film .sc { position: absolute; inset: 0; min-height: 0; padding: 0 1.4rem; pointer-events: none; }
html.film .s-place .actions { pointer-events: auto; }
.ln { display: block; }
html.film .top-area { position: absolute; left: 1.2rem; right: 1.2rem; top: 0; height: var(--vTop); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: env(safe-area-inset-top); }
html.film .s-close .top-area { height: var(--cTop); }

/* 1 · verse */
.basmala { font-size: clamp(1rem, 4.2vw, 1.2rem); color: var(--ink-2); margin-bottom: 1.2rem; }
.verse { font-weight: 700; font-size: clamp(1.35rem, 6.3vw, 2.1rem); line-height: 2; color: var(--green); }
.verse .ln { white-space: nowrap; }
.sura { margin-top: 1rem; font-family: var(--sans); font-size: .8rem; color: var(--brass); letter-spacing: .02em; }

/* 2 · names: inside the mirror glass; hosts above, bride's father below */
.hosts, .bride-father { font-size: clamp(1.02rem, 4.4vw, 1.3rem); line-height: 1.9; }
html.film .hosts, html.film .bride-father { position: absolute; left: 1.2rem; right: 1.2rem; }
html.film .hosts { bottom: calc(50% + var(--M) / 2 + 1rem); }
html.film .bride-father { top: calc(50% + var(--M) / 2 + 1rem); }
.names { display: flex; flex-direction: column; align-items: center; }
.nm { font-family: var(--script); font-weight: 700; font-size: calc(var(--M) * .155); line-height: 1.15; white-space: nowrap; color: var(--green); }
.amp { font-family: var(--script); font-size: calc(var(--M) * .07); line-height: 1; color: var(--brass); margin: -.1em 0 0; }

/* 3 · date: weekday above the jasmine ring, count in the glass, date below */
html.film .d-day { position: absolute; left: 0; right: 0; bottom: calc(50% + var(--M) * .66 + .6rem); }
.d-day { font-family: var(--script); font-weight: 700; font-size: clamp(2rem, 9vw, 2.7rem); line-height: 1.4; color: var(--green); }
.d-core { display: flex; flex-direction: column; align-items: center; }
.d-core b { font-family: var(--script); font-weight: 700; font-size: calc(var(--M) * .22); line-height: 1.05; color: var(--green); }
.d-core span { font-family: var(--sans); font-size: .78rem; color: var(--brass); margin-top: .2rem; }
html.film .d-rest { position: absolute; left: 0; right: 0; top: calc(50% + var(--M) * .66 + .8rem); }
.d-rest { display: grid; gap: .3rem; }
.d-date { font-size: clamp(1.3rem, 5.5vw, 1.6rem); font-weight: 700; }
.d-time { font-family: var(--sans); font-size: .92rem; color: var(--ink-2); }

/* 4 · place: the mirror becomes a lens over the city; venue below it */
html.film .place-body { position: absolute; left: 1.2rem; right: 1.2rem; top: calc(var(--pBot) + 1.1rem); }
.place-body { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.p-kicker { font-family: var(--sans); font-size: .8rem; color: var(--brass); letter-spacing: .04em; }
.v-name { font-family: var(--script); font-weight: 700; font-size: clamp(1.9rem, 8.4vw, 2.5rem); line-height: 1.3; color: var(--green); }
.v-sub { font-size: 1.02rem; color: var(--ink-2); margin-bottom: .7rem; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; width: min(100%, 340px); }
.btn {
  font-family: var(--sans); font-size: .88rem; text-decoration: none; color: var(--paper); background: var(--green);
  min-height: 46px; padding: 0 .6rem; 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(31, 74, 54, .3); }

/* 5 · close: the dua above the chest that closes on the mirror */
.dua { font-family: var(--script); font-weight: 700; font-size: clamp(1.7rem, 7.6vw, 2.5rem); line-height: 1.7; color: var(--green); }
.dua .ln { white-space: nowrap; }
.sign { margin-top: 1rem; font-size: 1.12rem; color: var(--ink-2); }
.fam { margin-top: .4rem; font-family: var(--sans); font-size: .82rem; color: var(--brass); }

/* ------------------------------------------------ gate */
#gate { position: fixed; inset: 0; z-index: 30; }
#gate.gone { display: none; }
.g-top { position: absolute; left: 0; right: 0; top: 0; height: var(--gTop); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 1.1rem; text-align: center; }
.g-kicker { font-family: var(--sans); font-size: .82rem; letter-spacing: .04em; color: var(--brass); }
.g-names { font-family: var(--script); font-weight: 700; font-size: clamp(2.7rem, 12.5vw, 3.8rem); line-height: 1.3; color: var(--green); }
.g-names span { color: var(--brass); font-size: .6em; margin-inline: .14em; }
.g-hint { position: absolute; left: 0; right: 0; top: calc(var(--gBot) + 1.4rem); text-align: center; font-family: var(--sans); font-size: .95rem; color: var(--green); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .4; } }
.g-lid { display: none; }
#open { all: unset; position: absolute; inset: 0; cursor: pointer; }
#open:focus-visible { outline: 2px solid var(--brass); outline-offset: -8px; }

/* ------------------------------------------------ RSVP */
#rsvp { position: relative; z-index: 8; background: var(--paper); padding: 4.5rem 1.3rem calc(3rem + env(safe-area-inset-bottom)); text-align: center; box-shadow: 0 -1px 0 rgba(31, 74, 54, .1); }
#rsvp::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--brass) 0, var(--brass-2) 50%, var(--brass) 100%); opacity: .85; }
.r-kicker { font-family: var(--sans); font-size: .8rem; color: var(--brass); 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(--green); }
.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(1.2rem + env(safe-area-inset-bottom)); width: 2px; height: 34px; z-index: 20; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; border-radius: 2px; background: rgba(154, 111, 34, .2); }
#cue i { position: absolute; inset: 0; background: var(--brass); 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): stacked and calm */
html:not(.film) .obj, html:not(.film) .blooms { display: none; }
html:not(.film) #gate { background: var(--silk); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
html:not(.film) .g-top, html:not(.film) .g-hint { position: static; height: auto; padding: 0; }
html:not(.film) .g-lid { display: block; width: min(52vw, 220px); height: auto; }
html:not(.film) .sc > * { opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease; }
html:not(.film) .sc.in > * { opacity: 1; transform: none; }
html:not(.film) .hosts, html:not(.film) .bride-father { margin-block: 1rem; }
html:not(.film) .s-date { gap: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .g-hint, #cue i { animation: none; } }