:root { --u: 3.9px; --ivory: #F6EBDD; --gold: #E8B65A; --ink: #1E1A17; --brown: #5B3B1A; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #120d0a; overflow: hidden; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.film { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 80% at 50% 40%, #2a1d14 0%, #120d0a 70%); }
.stage { position: relative; overflow: hidden; width: var(--sw, 100vw); height: var(--sh, 100vh); background: #0d0907; contain: strict; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#fxLight { mix-blend-mode: screen; }

/* captions */
.scrim { position: absolute; left: 0; right: 0; pointer-events: none; opacity: 0; }
.scrim.top { top: 0; height: 38%; background: linear-gradient(to bottom, rgba(12,7,3,.62), rgba(12,7,3,.36) 38%, rgba(12,7,3,.10) 75%, rgba(12,7,3,0)); }
.scrim.bottom { bottom: 0; height: 42%; background: linear-gradient(to top, rgba(12,7,3,.62), rgba(12,7,3,.36) 38%, rgba(12,7,3,.10) 75%, rgba(12,7,3,0)); }
.cap { position: absolute; left: 5%; right: 5%; text-align: center; display: none; pointer-events: none; will-change: opacity, transform, filter; }
.cap.top { top: 5.5%; } .cap.bottom { bottom: 6.5%; } .cap.mid { top: 40%; }
.cap .ar, .cap .en { display: block; }
.cap .ar { font-family: 'Aref Ruqaa', 'Amiri', serif; font-weight: 700; font-size: calc(var(--u) * 7.6); line-height: 1.55; }
.cap .en { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: calc(var(--u) * 4.4); line-height: 1.3; margin-top: calc(var(--u) * .4); }
.cap.dark .ar { color: #FFF4E0; text-shadow: 0 2px 8px rgba(15,8,2,.8), 0 0 26px rgba(15,8,2,.5); }
.cap.dark .en { color: #F4E3C4; text-shadow: 0 2px 6px rgba(15,8,2,.8), 0 0 20px rgba(15,8,2,.5); }
.cap.light .ar { color: #5B3B1A; text-shadow: 0 0 14px rgba(255,248,232,.95), 0 0 30px rgba(255,244,220,.8); }
.cap.light .en { color: #6A4626; text-shadow: 0 0 12px rgba(255,248,232,.95); }
.cap.mid .ar { font-size: calc(var(--u) * 8.6); font-weight: 700; }
.cap.mid .en { font-size: calc(var(--u) * 4.8); }

/* invitation card (sizes are relative to the card: container query units) */
.card { position: absolute; left: 50%; top: 50%; width: var(--cw, 90%); aspect-ratio: 980 / 1482; display: none;
  container-type: size; will-change: transform, opacity; filter: drop-shadow(0 calc(var(--u)*2.4) calc(var(--u)*3) rgba(40,22,6,.45)); }
.card-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ci { position: absolute; left: 10%; right: 10%; text-align: center; opacity: 0; will-change: opacity, transform, filter; }
.gold { background-image: linear-gradient(90deg, transparent calc(var(--s, -40%) - 6%), rgba(255,226,160,.6) var(--s, -40%), transparent calc(var(--s, -40%) + 6%)),
  linear-gradient(180deg, #C99139 0%, #9A6420 50%, #5E3A10 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 1.5px rgba(110,70,20,.45)); }
.names-ar { top: 13.4%; font-family: 'Aref Ruqaa', serif; font-weight: 700; font-size: 11.6cqw; line-height: 1.5; }
.names-en { top: 24.6%; font-family: 'Pinyon Script', cursive; font-size: 10cqw; line-height: 1.3; }
.divider { top: 34.6%; left: 22%; right: 22%; }
.divider img { width: 100%; display: block; }
.inv-ar { top: 39.8%; font-family: 'Aref Ruqaa', serif; font-size: 5.2cqw; color: #5B3B1A; line-height: 1.5; }
.inv-en { top: 46.1%; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 3.5cqw; color: #6A4626; }
.row { display: flex; align-items: center; justify-content: center; gap: 2.4cqw; direction: rtl; }
.row img { width: 6.6cqw; height: auto; flex: none; }
.row div { display: flex; flex-direction: column; align-items: center; }
.row .ar { font-family: 'Aref Ruqaa', serif; font-weight: 700; font-size: 5.6cqw; color: #4E3316; line-height: 1.4; }
.row .en { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 3.3cqw; color: #6A4626; line-height: 1.1; }
.r-date { top: 51.2%; } .r-time { top: 60%; } .r-place { top: 68.7%; }
.close-ar { top: 77%; font-family: 'Aref Ruqaa', serif; font-weight: 700; font-size: 7cqw; line-height: 1.5; }
.close-en { top: 84.2%; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 3.4cqw; color: #6A4626; }

/* end buttons */
.endbar { position: absolute; left: 0; right: 0; bottom: max(env(safe-area-inset-bottom), calc(var(--u) * 3)); display: flex; gap: calc(var(--u) * 2);
  justify-content: center; padding: 0 4%; opacity: 0; pointer-events: none; }
.endbar.on { pointer-events: auto; }
.endbar button, .endbar a { flex: 1 1 0; max-width: 34%; min-height: 48px; border: 0; border-radius: 999px; padding: calc(var(--u)*1.6) calc(var(--u)*2);
  background: linear-gradient(180deg, #2B3557, #1d2440); color: #F6EBDD; text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 1.5px #E8B65A inset, 0 6px 16px rgba(0,0,0,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; font: inherit; }
.endbar .ghost { background: rgba(246,235,221,.92); color: #5B3B1A; }
.endbar span { font-family: 'Aref Ruqaa', serif; font-weight: 700; font-size: calc(var(--u) * 3.9); line-height: 1.2; }
.endbar small { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: calc(var(--u) * 2.9); opacity: .85; }
.endbar :focus-visible, .controls :focus-visible, .seal:focus-visible { outline: 2px solid #E8B65A; outline-offset: 3px; }

/* controls */
.controls { position: absolute; top: max(env(safe-area-inset-top), 12px); left: 12px; display: flex; gap: 8px; opacity: 0; transition: opacity .6s; }
.controls.on { opacity: 1; }
.controls button { height: 40px; min-width: 40px; border-radius: 20px; border: 0; padding: 0 10px; display: flex; align-items: center; gap: 4px;
  background: rgba(18,13,10,.38); color: #F6EBDD; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; font-family: 'Aref Ruqaa', serif; font-size: 15px; }
.controls svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; }
.controls svg .w { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.controls .muted svg .w { opacity: 0; }
#btnSkip svg { stroke: none; }
.paused { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.paused svg { width: 72px; height: 72px; fill: rgba(246,235,221,.9); background: rgba(18,13,10,.35); border-radius: 50%; padding: 16px; }
.buffer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.buffer i { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(232,182,90,.25); border-top-color: #E8B65A; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* opening gate */
.gate { position: absolute; inset: 0; background: #EFE3D1 url(frames/OPEN.webp) center / cover no-repeat; display: flex; align-items: center; justify-content: center;
  transition: opacity 1.1s ease .5s; z-index: 5; }
.gate.out { opacity: 0; pointer-events: none; }
.gate-inner { text-align: center; color: #5B3B1A; }
.gate-names { font-family: 'Aref Ruqaa', serif; font-weight: 700; font-size: calc(var(--u) * 9); margin: 0 0 calc(var(--u) * 5);
  background: linear-gradient(180deg, #C99139, #9A6420 50%, #5E3A10); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gate-names span { font-family: 'Pinyon Script', cursive; font-weight: 400; padding: 0 .2em; }
.seal { position: relative; width: calc(var(--u) * 34); height: calc(var(--u) * 34); border: 0; background: none; padding: 0; cursor: pointer;
  filter: drop-shadow(0 8px 14px rgba(80,45,10,.35)); animation: breathe 2.6s ease-in-out infinite; }
.seal[disabled] { cursor: default; animation: none; opacity: .85; }
.seal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s; }
.seal .s-left, .seal .s-right { opacity: 0; }
.gate.open .seal { animation: none; }
.gate.open .s-full { opacity: 0; }
.gate.open .s-left { opacity: 1; transform: translate(-38%, 8%) rotate(-18deg); }
.gate.open .s-right { opacity: 1; transform: translate(38%, 8%) rotate(18deg); }
@keyframes breathe { 50% { transform: scale(1.04); } }
.gate-cta { margin: calc(var(--u) * 5) 0 0; display: flex; flex-direction: column; gap: 2px; transition: opacity .4s; }
.gate-cta b { font-family: 'Aref Ruqaa', serif; font-size: calc(var(--u) * 6); }
.gate-cta span { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: calc(var(--u) * 4.2); color: #6A4626; }
.gate-load { width: calc(var(--u) * 40); height: 3px; margin: calc(var(--u) * 4) auto 0; background: rgba(91,59,26,.15); border-radius: 2px; overflow: hidden; transition: opacity .5s; }
.gate-load i { display: block; height: 100%; width: 0; background: #C99139; transition: width .3s; }
.gate.ready .gate-load { opacity: 0; }
.gate:not(.ready) .gate-cta { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .seal { animation: none; } }

[hidden] { display: none !important; }

/* wedding-site embed: the site's envelope is the gate */
.embed .gate { display: none !important; }