/* Page layout for the guest site. Colours, type and shape come only from tokens.css + bundle.css. */
html { scroll-behavior: smooth; }
body { font-size: 16px; line-height: 26px; }
html[lang="ar"] body { font-family: var(--font-arabic-body); font-size: 17px; line-height: 30px; }
html.locked { overflow: hidden; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
h2, h3, p { margin: 0; }
.skip { position: absolute; inset-inline-start: -9999px; }
/* gold-ink is 3.84:1 on the blush band in the light theme: use plum there to reach 4.5:1 */
.band .ni-eyebrow { color: var(--plum); }
.skip:focus { inset-inline-start: var(--space-3); top: var(--space-3); z-index: 50; background: var(--paper-raised); padding: var(--space-2) var(--space-3); color: var(--plum); }
:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 3px; }

/* ---------- Envelope intro ---------- */
.intro { position: fixed; inset: 0; z-index: 40; background: var(--paper); display: grid; place-items: center; overflow: auto; transition: opacity .6s ease, visibility .6s; }
.intro.gone { opacity: 0; visibility: hidden; }
.intro__inner { display: grid; justify-items: center; gap: var(--space-3); }
.intro__hint { color: var(--ink-muted); text-align: center; }
.env { position: relative; width: min(340px, calc(100vw - 32px)); height: 250px; margin-top: 140px; perspective: 900px; }
.env__back { position: absolute; inset: 0; background: var(--blush); border-radius: var(--radius-sm); }
.env__front { position: absolute; inset: 0; background: var(--paper-raised); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; z-index: 3; }
.env__to { text-align: center; }
.env__guest-en { font: italic 500 26px/1.1 var(--font-display); color: var(--plum); margin-top: 4px; }
.env__guest-ar { font: 400 22px/1.4 var(--font-arabic-display); color: var(--plum); }
.env__flap { position: absolute; inset-inline: 0; top: 0; height: 112px; background: var(--blush); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .7s cubic-bezier(.6,.1,.2,1) .15s; z-index: 4; border-top: 1px solid var(--gold); }
.env__seal { position: absolute; width: 72px; height: 72px; font-size: 24px; left: 50%; top: 76px; transform: translate(-50%, 0); z-index: 5; transition: opacity .3s, transform .3s; }
.env__seal:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 4px; }
.env__card { position: absolute; inset-inline: 16px; top: 10px; height: 226px; background: var(--paper-raised); border-radius: var(--radius-sm); z-index: 2; text-align: center; padding: 12px; transition: transform .8s cubic-bezier(.2,.8,.2,1) .7s; border: 1px solid var(--hairline); }
.env__names { font: italic 500 30px/1 var(--font-display); color: var(--plum); margin-top: 10px; }
.film-mini { height: 110px; width: 80px; margin: 0 auto; background: radial-gradient(120% 80% at 50% 20%, var(--plum) 0%, var(--plum-deep) 70%); }
.env.open .env__flap { transform: rotateX(180deg); z-index: 1; }
.env.open .env__seal { opacity: 0; transform: translate(-50%, -10px) scale(.8); pointer-events: none; }
.env.open .env__card { transform: translateY(-130px); }

.proofbar { position: relative; z-index: 45; background: var(--olive); color: var(--on-plum); padding: 10px var(--space-3); text-align: center; font: 500 14px/22px var(--font-body); display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.proofbar [lang="ar"] { font-family: var(--font-arabic-body); font-size: 15px; }

/* ---------- Update banner + top bar ---------- */
.upd { background: var(--blush); color: var(--ink); padding: 12px var(--space-3); font: 400 15px/22px var(--font-body); text-align: center; }
html[lang="ar"] .upd { font: 400 16px/26px var(--font-arabic-body); }
.upd b { color: var(--plum); margin-inline-end: 6px; }
.bar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: center; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--paper); border-bottom: 1px solid var(--hairline); }
.lt { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); border: 1.5px solid var(--field-border); background: var(--paper-raised); }
.lt button { min-height: 40px; min-width: 88px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 500 15px/1 var(--font-body); cursor: pointer; }
.lt button[lang="ar"] { font: 600 16px/1 var(--font-arabic-body); }
.lt button[aria-pressed="true"] { background: var(--plum); color: var(--on-plum); }
.theme-btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--field-border); background: var(--paper-raised); color: var(--plum); display: grid; place-items: center; cursor: pointer; }

/* ---------- Hero ---------- */
main { padding: 0 var(--space-3); max-width: 1080px; margin: 0 auto; }
.hero-wrap { padding-top: var(--space-5); display: grid; justify-items: center; gap: var(--space-3); }
.hero-wrap .ni-hero { width: min(100%, 420px); margin: 0; }
.ni-hero video { transform: none; }
.ni-hero__sound .w { display: none; }
.ni-hero__sound[aria-pressed="true"] .w { display: inline; }
.film { background: radial-gradient(120% 80% at 50% 20%, var(--plum) 0%, var(--plum-deep) 65%); overflow: hidden; }
.film .b { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; animation: drift 9s ease-in-out infinite alternate; }
.b1 { width: 120px; height: 120px; left: -20px; top: 15%; background: var(--gold); }
.b2 { width: 70px; height: 70px; right: 10px; top: 32%; background: var(--blush); animation-delay: -3s; }
.b3 { width: 160px; height: 160px; left: 25%; top: 55%; background: var(--olive); opacity: .35; }
.b4 { width: 40px; height: 40px; left: 15%; top: 7%; background: var(--paper-raised); opacity: .35; animation-delay: -6s; }
@keyframes drift { to { transform: translate(30px, -40px) scale(1.15); } }
.living { animation: zoom 14s ease-in-out infinite alternate; }
@keyframes zoom { from { transform: scale(1); } to { transform: scale(1.05); } }
@media (max-width: 480px) { .ni-hero__names { font-size: 40px; } .ni-hero__names-ar { font-size: 34px; } }

/* ---------- Sections ---------- */
.sec { padding: var(--space-5) 0; }
.sec.center { text-align: center; }
.sec__head { text-align: center; display: grid; gap: var(--space-2); justify-items: center; margin-bottom: var(--space-4); }
.sec__head .ni-ornament { width: min(240px, 60%); }
.h2 { font: 500 36px/1.1 var(--font-display); color: var(--plum); }
html[lang="ar"] .h2 { font: 600 30px/1.5 var(--font-arabic-body); }
.band { background: var(--blush); margin-inline: calc(var(--space-3) * -1); padding-inline: var(--space-3); border-radius: var(--radius-md); }

.cd { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-3); flex-wrap: wrap; }
.cd div { display: grid; gap: 4px; min-width: 64px; }
.cd b { font: 500 44px/1 var(--font-display); color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.cd span { font: 500 11px/14px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
html[lang="ar"] .cd span { font: 600 14px/20px var(--font-arabic-body); letter-spacing: 0; }
.cd .done { font: italic 500 32px/1.2 var(--font-display); color: var(--plum); }
html[lang="ar"] .cd .done { font: 400 30px/1.5 var(--font-arabic-display); }

.events { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.ev { display: grid; align-content: start; gap: var(--space-2); }
.ev h3 { font: 500 30px/1.1 var(--font-display); color: var(--plum); }
html[lang="ar"] .ev h3 { font: 600 26px/1.5 var(--font-arabic-body); }
.ev dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: var(--space-2) 0; }
.ev dt { font: 500 12px/22px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
html[lang="ar"] .ev dt { font: 600 14px/26px var(--font-arabic-body); letter-spacing: 0; }
.ev dd { margin: 0; font: 400 15px/22px var(--font-body); }
html[lang="ar"] .ev dd { font: 400 16px/26px var(--font-arabic-body); }
.muted { color: var(--ink-muted); font-size: 13px; }
.ev .ni-btn--quiet { justify-self: start; min-height: 48px; }

.story { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.story figure { margin: 0; display: grid; gap: var(--space-3); }
.story .ni-arch { aspect-ratio: 3 / 4; }
.story .ni-arch .film { position: absolute; inset: 0; }
.story .yr { font: 500 44px/1 var(--font-display); color: var(--gold-ink); }
.story figcaption { color: var(--ink); }

.rsvp { max-width: 520px; margin: 0 auto; display: grid; gap: 18px; }
.rsvp h2 { font: 500 32px/1.15 var(--font-display); color: var(--plum); margin-top: 6px; }
html[lang="ar"] .rsvp h2 { font: 600 26px/1.5 var(--font-arabic-body); }
.rs { border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0; display: grid; gap: 4px; }
.rs.bad { border-color: var(--error); }
.rs legend { padding: 0 6px; }
.rs label { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; }
.rs input { accent-color: var(--plum); width: 20px; height: 20px; margin: 0; }
textarea.ni-input { min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.ok { color: var(--olive); font-weight: 500; }
.demo { color: var(--ink-muted); }

.vw { max-width: 520px; margin: var(--space-4) auto 0; display: grid; gap: var(--space-3); }
.vw__title { font: 500 26px/1.2 var(--font-display); color: var(--plum); }
html[lang="ar"] .vw__title { font: 600 22px/1.6 var(--font-arabic-body); }
.vw__btns { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.vw__file { position: relative; }
.vw__file:focus-within { outline: 3px solid var(--gold-ink); outline-offset: 3px; }
.vw__input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.vw__frame { width: min(100%, 280px); aspect-ratio: 9 / 16; justify-self: center; }
.vw__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--plum-deep); }
.vw__mirror { transform: scaleX(-1); }       /* selfie preview only; the sent clip is not mirrored */
.vw__dot { position: absolute; top: 18%; inset-inline-end: 18%; width: 14px; height: 14px; border-radius: 50%; background: var(--error); z-index: 2; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.vw__left { text-align: center; font: 500 22px/1.2 var(--font-display); color: var(--gold-ink); }
html[lang="ar"] .vw__left { font: 600 18px/1.6 var(--font-arabic-body); }
.vw progress { width: 100%; height: 8px; accent-color: var(--plum); }

.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.details h3 { font: 500 24px/1.2 var(--font-display); color: var(--plum); margin-bottom: var(--space-2); }
html[lang="ar"] .details h3 { font: 600 20px/1.6 var(--font-arabic-body); }

.pf { max-width: 1080px; margin: var(--space-5) auto 0; padding: var(--space-4) var(--space-3) var(--space-5); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-3); border-top: 1px solid var(--hairline); }
.pf .credit { text-align: end; }
.pf .credit b { display: block; color: var(--ink); font: italic 500 20px/1.3 var(--font-display); }
.pf .ni-btn--quiet { min-height: 48px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}