:root{
  --paper:#ece8df;
  --ink:#9a8472;
  --ink-strong:#6f5e50;
  --ink-soft:#7d6b5d;
  --ink-pale:#cdc3b7;
  --gold:#cdb27f;
  --font-script:'Great Vibes',cursive;      /* swap here to try Allura / Alex Brush */
  --font-latin:'Cairo',sans-serif;
  --font-ar-display:'Aref Ruqaa',serif;
  --font-ar:'Tajawal','Cairo',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--paper);color:var(--ink-strong);font-family:var(--font-ar)}
body.locked{overflow:hidden;height:100svh}
button{font:inherit;cursor:pointer}
.is-hidden{display:none!important}

/* ── fixed background stage (phone-width column, centred on desktop) ── */
.stage{position:fixed;inset:0 auto 0 50%;transform:translateX(-50%);width:min(100vw,480px);height:100dvh;overflow:hidden;z-index:0;pointer-events:none;background:var(--paper)}
.bg{position:absolute;inset:0;background-image:url(../images/bg-florals.jpg);background-repeat:no-repeat}
.bg-full{background-size:auto 100%;background-position:center top;transition:opacity .2s linear}
.bg-tl,.bg-br{opacity:0;inset:auto;background-size:630px 844px}
.bg-tl{left:0;top:0;width:250px;height:340px;background-position:-20px 0;
  -webkit-mask-image:radial-gradient(ellipse 92% 92% at 0% 0%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 92% 92% at 0% 0%,#000 55%,transparent 100%)}
.bg-br{right:0;bottom:0;width:230px;height:320px;background-position:-400px -524px;
  -webkit-mask-image:radial-gradient(ellipse 92% 92% at 100% 100%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 92% 92% at 100% 100%,#000 55%,transparent 100%)}

/* ── content column ── */
.col{position:relative;z-index:1;width:min(100vw,480px);margin:0 auto}
.pg{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;text-align:center;padding:72px 28px 72px}

.ink{color:var(--ink);text-shadow:1px 1px 1px rgba(255,255,255,.85),-1px -1px 1px rgba(90,70,55,.22)}
.script{font-family:var(--font-script);-webkit-text-stroke:.5px currentColor;font-weight:400;line-height:1.1}
.cap{font-family:var(--font-latin);font-weight:700;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-strong)}
.cap.ar{font-family:var(--font-ar);letter-spacing:.2em;font-size:13px}

/* scroll reveal */
.rv{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),filter .9s var(--ease) var(--d,0s)}
.rv.in{opacity:1;transform:none;filter:none}

/* page A · names (matches the last frame of the intro video) */
.pg-names{justify-content:center;padding-top:0;direction:ltr}
.pg-names .stack{display:flex;flex-direction:column;align-items:center;margin-top:-4svh}
.nm{font-size:68px}
.and{font-size:42px;margin:-4px 0 -4px;color:var(--ink)}
.datel{font-family:var(--font-latin);font-weight:500;font-size:19px;letter-spacing:.04em;margin-top:44px;color:var(--ink)}
.cue{position:absolute;bottom:28px;left:0;right:0;display:flex;justify-content:center;animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(6px);opacity:1}}

/* page B · invitation */
.pg-invite{justify-content:flex-start}
.par{font-size:14px;color:var(--ink-soft)}
.par-row{display:flex;gap:28px;margin:8px 0;font-size:15px;font-weight:500;color:var(--ink-strong)}
.ar-name{font-family:var(--font-ar-display);font-size:112px;line-height:1.05}
.en-name{font-size:84px}
.inv-line{font-size:16px;color:var(--ink-strong);margin-top:14px}
.std{margin-top:64px;display:flex;flex-direction:column;align-items:center;direction:ltr}
.std .s1{font-size:150px;line-height:1.05}
.std .s2{font-size:90px;line-height:1.1;margin-top:-18px}

/* page C · date + venues */
.tag{font-size:15px;color:var(--ink-strong)}
.date-big{font-family:var(--font-latin);font-weight:500;font-size:32px;letter-spacing:.03em;margin-top:14px;direction:ltr}
.daytime{font-size:16px;font-weight:500;color:var(--ink-strong);margin-top:2px}
.car{margin-top:12px;opacity:0}
.car.in{animation:drive 1.4s var(--ease) .3s both}
@keyframes drive{0%{transform:translateX(90px);opacity:0}30%{opacity:1}100%{transform:translateX(0);opacity:1}}
.venue{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:34px}
.venue .eyebrow{font-size:12px;letter-spacing:.2em;font-weight:500;color:var(--ink-strong)}
.venue .vname{font-family:var(--font-ar-display);font-size:32px;line-height:1.3;margin-top:6px;padding:0 12px}
html[lang=en] .venue .vname{font-family:var(--font-latin);font-weight:700;font-size:26px}
.venue .addr{font-size:14px;line-height:1.6;color:var(--ink-soft);margin-top:6px;max-width:300px}
.map{position:relative;width:100%;max-width:340px;aspect-ratio:16/10;margin-top:24px;border:1px solid var(--gold);border-radius:16px;overflow:hidden;box-shadow:0 10px 28px rgba(110,90,70,.18);background:#e9e3d6}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:sepia(.35) saturate(.7) hue-rotate(-10deg);pointer-events:none}
.map a.tap{position:absolute;inset:0;z-index:2}
.map .pin{position:absolute;left:50%;top:50%;width:32px;height:44px;margin:-44px 0 0 -16px;z-index:1;animation:pin 3.6s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes pin{0%{transform:translateY(-30px);opacity:0}12%,100%{transform:none;opacity:1}}
.map .osm{position:absolute;right:6px;bottom:4px;z-index:3;font:10px var(--font-latin);color:#6f5e50;background:rgba(251,248,241,.85);padding:1px 6px;border-radius:6px;text-decoration:none}
.hint{font-size:13px;color:var(--ink-soft);margin-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 30px;margin-top:14px;border:1px solid var(--gold);border-radius:999px;background:#f6f2ea;box-shadow:0 6px 16px rgba(110,90,70,.16);font-size:16px;font-weight:500;color:var(--ink-strong);text-decoration:none}
.btn:focus-visible,.ctl:focus-visible,.open-btn:focus-visible,.skip-btn:focus-visible{outline:2px solid var(--ink-strong);outline-offset:3px}

/* page D · moments */
.mom-title{font-size:64px}
.mom-ar{font-family:var(--font-ar-display);font-size:26px;margin-top:-4px}
.mom-sub{font-size:14px;color:var(--ink-strong);margin-top:6px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 26px;width:100%;max-width:340px;margin-top:40px}
.grid .ph:nth-child(even){margin-top:34px}
.ph{position:relative;margin:0;transform:rotate(var(--r,0deg))}
.ph.rv{transform:translateY(28px) rotate(var(--r,0deg))}
.ph.rv.in{transform:rotate(var(--r,0deg))}
.ph .fr{position:absolute;inset:0;transform:translate(7px,7px);border:1px solid var(--gold);border-radius:14px}
.ph button{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;border-radius:14px;overflow:hidden;box-shadow:0 10px 22px rgba(110,90,70,.2);background:linear-gradient(160deg,#d8c7b0,#b7a28b);color:#fbf6ee}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph.missing img{display:none}
.ph .ph-fallback{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:13px}
.ph.missing .ph-fallback{display:flex}

/* page E · countdown + closing */
.cd-title{font-size:18px;font-weight:500;color:var(--ink-strong)}
.cd{display:flex;align-items:center;gap:6px;margin-top:22px;direction:rtl}
.cd .u{display:flex;flex-direction:column;align-items:center;min-width:70px}
.cd .n{font-family:var(--font-latin);font-weight:700;font-size:48px;line-height:1;color:#8c7867;text-shadow:1px 1px 1px rgba(255,255,255,.85),-1px -1px 1px rgba(90,70,55,.22);font-variant-numeric:tabular-nums}
.cd .l{font-size:14px;color:var(--ink-strong);margin-top:6px}
.cd .hl{width:1px;height:62px;background:var(--gold);opacity:.7}
html[lang=en] .cd{direction:ltr}
.rule{display:flex;align-items:center;gap:10px;margin-top:56px}
.rule i{display:block;width:70px;height:1px;background:var(--gold)}
.rule b{display:block;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.end-std .s1{font-size:120px;line-height:1.05}
.end-std .s2{font-size:76px;line-height:1.1;margin-top:-14px}
.end-date{direction:ltr;font-family:var(--font-latin);font-weight:500;font-size:22px;letter-spacing:.04em;margin-top:18px;color:var(--ink)}
.end-msg{font-size:17px;line-height:1.7;color:var(--ink-strong);margin-top:22px;max-width:300px}

/* controls */
.controls{position:fixed;top:max(14px,env(safe-area-inset-top));inset-inline-end:14px;z-index:20;display:flex;gap:10px}
.ctl{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);background:rgba(246,242,234,.92);color:var(--ink-strong);display:grid;place-items:center;font-size:15px;font-weight:700;box-shadow:0 4px 12px rgba(110,90,70,.15)}
.ctl svg{width:20px;height:20px}

/* intro gate + video */
.intro{position:fixed;inset:0;z-index:50;background:var(--paper) url(../images/intro-poster.jpg) center/cover no-repeat;transition:opacity .7s var(--ease)}
.intro.out{opacity:0;pointer-events:none}
.intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.open-btn{position:absolute;left:50%;bottom:11svh;transform:translateX(-50%);z-index:2;width:68px;height:68px;display:flex;align-items:center;justify-content:center;padding:0 0 0 4px;border:1px solid var(--gold);border-radius:50%;background:rgba(246,242,234,.94);color:var(--ink-strong);box-shadow:0 8px 22px rgba(110,90,70,.25)}
.skip-btn{position:absolute;top:max(16px,env(safe-area-inset-top));inset-inline-end:16px;z-index:2;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:rgba(246,242,234,.9);color:var(--ink-strong);font-size:14px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:60;background:rgba(40,32,26,.92);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:84vh;border-radius:10px}
.lb button{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:rgba(246,242,234,.92);color:var(--ink-strong);font-size:22px}
.lb .x{top:16px;inset-inline-end:16px}
.lb .pv{left:12px;top:50%}.lb .nx{right:12px;top:50%}

@media (min-width:600px){ .controls{inset-inline-end:calc(50% - 226px)} }
@media (prefers-reduced-motion:reduce){
  .rv{transition:opacity .4s linear;transform:none;filter:none}
  .cue,.map .pin{animation:none}
  .car.in{animation:none;opacity:1}
}