/* Yousif & Maryam (demo) — "Shanasheel" v3.
   Rules for this file (they are why v2 looked off):
   - every film element is centred by LAYOUT (inset:0 + margin:auto / grid), never by CSS translate;
     GSAP only adds x/y/scale/rotation on top, so a viewport resize can never knock anything off-axis.
   - every moving thing is a bitmap or plain text on its own layer; no SVG pattern / mask / blur moves. */
:root {
  --wall: #ece4d5;
  --lit: #faf5ec;
  --ink: #2b2018;
  --ink-2: #6e5847;
  --copper: #a8552c;
  --copper-2: #c98a52;
  --wood: #3a2315;
  --teal: #2c8c87;
  --serif: 'Amiri', serif;
  --script: 'Aref Ruqaa', 'Amiri', serif;
  --sans: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  /* film sizes, set in px by JS from the LARGE viewport (stable while Safari's bar moves) */
  --F: 340px;          /* star frame */
  --R: 400px;          /* dial ring */
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--wall); 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; }

/* ------------------------------------------------ gate */
#gate {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.15rem;
  padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom));
  background: radial-gradient(70% 50% at 50% 46%, #f8f1e4 0%, var(--wall) 75%);
  text-align: center;
}
#gate.gone { display: none; }
.g-kicker { font-family: var(--sans); font-size: .82rem; letter-spacing: .04em; color: var(--ink-2); }
.g-names { font-family: var(--script); font-weight: 700; font-size: clamp(2.1rem, 9.4vw, 3rem); line-height: 1.25; }
.g-names span { color: var(--copper); font-size: .66em; margin-inline: .12em; }
.g-hint { font-family: var(--sans); font-size: .84rem; color: var(--ink-2); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .4; } }

.window {
  all: unset; cursor: pointer; position: relative; display: block;
  width: min(64vw, 270px, 36svh);
}
.window:focus-visible { outline: 2px solid var(--copper); outline-offset: 10px; border-radius: 4px; }
.w-crown { display: block; aspect-ratio: 300 / 96; }
.w-crown svg { display: block; width: 100%; height: 100%; }
.w-body {
  position: relative; display: block; aspect-ratio: 300 / 400; margin-top: -1px;
  background: var(--wood); perspective: 700px;
  box-shadow: 0 26px 40px -18px rgba(58, 35, 21, .35);
}
.w-light {
  position: absolute; inset: 8px;
  background: radial-gradient(75% 60% at 50% 42%, #fffbf2 0%, #f8e3bd 55%, #ecc286 100%);
}
.shutter {
  position: absolute; top: 8px; bottom: 8px; width: calc(50% - 8px);
  background: url(assets/shutter.webp) center / 100% 100% no-repeat;
  will-change: transform;
}
.sh-r { right: 8px; transform-origin: 100% 50%; }
.sh-l { left: 8px; transform-origin: 0 50%; }
.latch { position: absolute; inset: 0; margin: auto; width: 13%; aspect-ratio: 1; z-index: 2; }
.latch i {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0c48c, #b0643a 55%, #6d3a1d);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(58, 35, 21, .25);
}
.latch i::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16%; height: 52%; border-radius: 3px; background: #4a2a17; }
.w-sill { display: block; height: 12px; margin-inline: -6%; border-radius: 2px; background: linear-gradient(#6b462c, var(--wood)); }

/* ------------------------------------------------ stage */
#track { position: relative; }
html.film .stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
html.film .stage, html.film .sc { contain: layout paint; }

.wall { position: absolute; inset: 0; background: var(--wall) url(assets/wall-p.webp) center / cover no-repeat; }
@media (min-aspect-ratio: 1/1) { .wall { background-image: url(assets/wall-l.webp); } }
html:not(.film) .wall { position: fixed; z-index: -1; }

/* centred by layout, sized from --F / --R */
.hero, .dial-ring { position: absolute; inset: 0; margin: auto; pointer-events: none; z-index: 2; will-change: transform, opacity; }
.hero { width: calc(var(--F) / .88); height: calc(var(--F) / .88); }  /* star tips touch --F */
.hero img { width: 100%; height: 100%; }
.hero .hero-solid { position: absolute; inset: 0; opacity: 0; }
.dial-ring { width: var(--R); height: var(--R); background: url(assets/ring.webp) center / contain no-repeat; z-index: 1; }

.sc { position: relative; z-index: 3; 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; }
.ln { display: block; }
html.film .ln, html.film .nm, html.film .amp, html.film .basmala, html.film .sura, html.film .d-day, html.film .d-core,
html.film .d-rest, html.film .map, html.film .venue, html.film .actions, html.film .p-kicker, html.film .side,
html.film .sign, html.film .fam, html.film .names { will-change: transform, opacity; }

/* 1 · verse */
.basmala { font-size: clamp(1rem, 4.2vw, 1.15rem); color: var(--ink-2); margin-bottom: 1.5rem; }
.verse { font-weight: 700; font-size: clamp(1.3rem, 6vw, 1.85rem); line-height: 2; }
.verse .ln { white-space: nowrap; }
.sura { margin-top: 1.3rem; font-family: var(--sans); font-size: .8rem; color: var(--copper); letter-spacing: .02em; }

/* 2 · names: one centred column; star sits behind the names block */
.s-names { gap: 0; }
.hosts, .bride-father { font-size: clamp(1.02rem, 4.4vw, 1.25rem); line-height: 1.9; color: var(--ink); }
.hosts, .bride-father { position: absolute; left: 1.2rem; right: 1.2rem; }
.hosts { bottom: calc(50% + var(--F) / 2 + 1.1rem); }
.bride-father { top: calc(50% + var(--F) / 2 + 1.1rem); }
.names { display: flex; flex-direction: column; align-items: center; }
.nm { font-family: var(--script); font-weight: 700; font-size: calc(var(--F) * .175); line-height: 1.2; white-space: nowrap; }
.amp { font-size: calc(var(--F) * .06); line-height: 1; color: var(--copper); margin: .05em 0 .1em; }

/* 3 · date: day above, number in the star, date below; all on the axis */
.d-day { position: absolute; left: 0; right: 0; top: calc(50% - var(--R) / 2 - 4.4rem); font-family: var(--script); font-weight: 700; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.4; }
.d-core { display: flex; flex-direction: column; align-items: center; }
.d-core b { font-family: var(--script); font-weight: 700; font-size: calc(var(--F) * .27); line-height: 1.05; }
.d-core span { font-family: var(--sans); font-size: .8rem; color: var(--copper); margin-top: .25rem; }
.d-rest { position: absolute; left: 0; right: 0; top: calc(50% + var(--R) / 2 + 1.3rem); display: grid; gap: .3rem; }
.d-date { font-size: clamp(1.25rem, 5.3vw, 1.5rem); font-weight: 700; }
.d-time { font-family: var(--sans); font-size: .92rem; color: var(--ink-2); }

/* 4 · place */
.s-place { gap: 1.05rem; }
.p-kicker { font-family: var(--sans); font-size: .8rem; color: var(--copper); letter-spacing: .04em; }
.map {
  position: relative; width: min(74vw, 32svh, 320px); aspect-ratio: 1; border-radius: 24px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(58, 35, 21, .1), 0 22px 40px -22px rgba(58, 35, 21, .45);
}
.map img { width: 100%; height: 100%; }
.m-river, .m-area { position: absolute; pointer-events: none; }
.m-river { top: 9%; left: 30%; font-size: .95rem; color: var(--teal); }
.m-area { bottom: 10%; right: 0; left: 0; text-align: center; font-family: var(--sans); font-size: .72rem; color: var(--ink-2); }
.venue { display: grid; gap: .15rem; }
.v-name { font-family: var(--script); font-weight: 700; font-size: clamp(1.7rem, 7.4vw, 2.15rem); line-height: 1.45; }
.v-sub { font-size: 1.02rem; color: var(--ink-2); }
.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(--lit); background: var(--copper);
  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(58, 35, 21, .28); }

/* 5 · close: the shutters come back to frame the dua */
.side {
  position: absolute; top: 0; bottom: 0; width: clamp(54px, 15vw, 150px); z-index: 0;
  background: #f6dcb0 url(assets/side.webp) center / cover no-repeat;
  box-shadow: 0 0 34px rgba(58, 35, 21, .2);
}
.side-r { right: 0; } .side-l { left: 0; }
.close-body { position: relative; z-index: 1; padding-inline: clamp(54px, 15vw, 150px); }
.dua { font-family: var(--script); font-weight: 700; font-size: clamp(1.7rem, 7.6vw, 2.5rem); line-height: 1.75; }
.dua .ln { white-space: nowrap; }
.sign { margin-top: 1.3rem; font-size: 1.12rem; color: var(--ink-2); }
.fam { margin-top: .45rem; font-family: var(--sans); font-size: .82rem; color: var(--copper); }

/* ------------------------------------------------ RSVP */
#rsvp { position: relative; z-index: 4; background: var(--lit); padding: 4.5rem 1.3rem calc(3rem + env(safe-area-inset-bottom)); text-align: center; box-shadow: 0 -1px 0 rgba(58, 35, 21, .08); }
.r-kicker { font-family: var(--sans); font-size: .8rem; color: var(--copper); 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; }
.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: a quiet line, no text */
#cue { position: fixed; left: 0; right: 0; margin: auto; bottom: calc(1.4rem + 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(168, 85, 44, .18); }
#cue i { position: absolute; inset: 0; background: var(--copper); 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, calm */
html:not(.film) .hero, html:not(.film) .dial-ring { display: none; }
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; }
html:not(.film) .d-day, html:not(.film) .d-rest { position: static; }
html:not(.film) .side { display: none; }
html:not(.film) .close-body { padding-inline: 0; }

@media (prefers-reduced-motion: reduce) { .g-hint, #cue i { animation: none; } }