/* BUILD A CREW · "Habibi, come to Dubai" · a night flight over Dubai in black and gold. The 3D world (three.js in a worker) sits behind the page;
   the painted skyline photo + coin images are its poster (first paint, reduced motion, no WebGL).
   Performance rules (phones under viral traffic):
   - animate only transform and opacity; never box-shadow, background-position, left/top, width/height, filter
   - no backdrop-filter over the moving 3D canvas (it re-blurs every frame): cards use solid glass colours
   - every looping animation lives in a section that pauseOffscreen() watches (.offscreen pauses it) */
@font-face { font-family: 'Reem Kufi'; src: url(/fonts/reemkufi.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Plex Arabic'; src: url(/fonts/plex-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Arabic'; src: url(/fonts/plex-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex Arabic'; src: url(/fonts/plex-700.woff2) format('woff2'); font-weight: 700 900; font-display: swap; }
:root {
  --bg: #050403; --bg2: #0c0905; --glass: rgba(13, 10, 6, .84); --glass2: rgba(22, 17, 10, .9);
  --line: rgba(242, 193, 91, .18); --line2: rgba(242, 193, 91, .38);
  --text: #f7efdf; --mute: #b3a487; --accent: #f2c15b; --gold2: #ffe3a0; --gold3: #a8741f; --accent-ink: #1a1204; --red: #e3263f; --ok: #5ee39a; --warn: #ffb547;
  --r: 22px; --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --out: cubic-bezier(.7, 0, .2, 1);
  --f-body: 'Plex Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif; --f-display: 'Reem Kufi', 'Plex Arabic', system-ui, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --gold-grad: linear-gradient(180deg, #fff4d2 0%, #f8d27a 34%, #d39a35 64%, #8f5f17 82%, #f3cf82 100%);
  --gold-flat: linear-gradient(135deg, #fff0c2 0%, #f2c15b 45%, #c68b2c 100%);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; background: var(--bg); }
/* the page colour lives on <html> only: a body background would paint over the fixed sky + 3D layers (negative z-index) */
body { margin: 0; background: transparent; color: var(--text); font: 16px/1.6 var(--f-body); overflow-x: clip; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
bdi { unicode-bidi: isolate; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.mono { font-family: var(--f-mono); direction: ltr; unicode-bidi: isolate; }
.gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* the world: poster photo (first paint) → 3D canvas on top once its first frame is drawn → a veil for text contrast */
.sky { position: fixed; inset: 0; z-index: -3; pointer-events: none; background: var(--bg); }
.sky img { display: block; width: 100%; height: 100vh; height: 100lvh; object-fit: cover; }
canvas[data-gl] { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 1.1s var(--ease); }
.gl canvas[data-gl] { opacity: 1; }
.veil { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 4, 3, .72) 0%, rgba(5, 4, 3, 0) 22%, rgba(5, 4, 3, 0) 60%, rgba(5, 4, 3, .78) 100%); }
[data-slot] { display: grid; place-items: center; }
[data-slot] > picture { display: contents; }
[data-slot] img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; transition: opacity .8s var(--ease), transform .8s var(--ease); animation: bob 5s ease-in-out infinite; }
.gl [data-slot] img { opacity: 0; transform: scale(.9); }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-2deg); } }

/* intro: the curtain opens on the gold coin (CSS only, ~1.4 s, never blocks taps) */
.intro { position: fixed; inset: 0; z-index: 60; pointer-events: none; animation: gone 0s 1.75s forwards; }
.intro::before, .intro::after { content: ''; position: absolute; inset-inline: 0; height: 50.5%; background: #030201; animation: cur-up .9s .9s var(--out) forwards; }
.intro::before { top: 0; border-bottom: 1px solid var(--line2); }
.intro::after { bottom: 0; border-top: 1px solid var(--line2); animation-name: cur-dn; }
.intro b { position: absolute; top: 50%; left: 50%; z-index: 1; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  background: url(/media/coin-96.webp) center/cover; box-shadow: 0 0 0 1px var(--line2), 0 0 70px rgba(242, 193, 91, .5); animation: coin-in .8s var(--spring) both, coin-out .45s .78s var(--out) forwards; }
.intro i { position: absolute; top: 50%; left: 50%; z-index: 1; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 1.5px solid var(--accent); animation: ring 1s .15s var(--ease) forwards; opacity: 0; }
@keyframes coin-in { from { transform: scale(.2) rotate(-200deg); opacity: 0; } }
@keyframes coin-out { to { transform: scale(2.4); opacity: 0; } }
@keyframes ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.5); } }
@keyframes cur-up { to { transform: translateY(-101%); } }
@keyframes cur-dn { to { transform: translateY(101%); } }
@keyframes gone { to { visibility: hidden; } }

/* top controls: brand mark · cockpit toggle (ع | EN) · porthole X · seat button */
.top { position: fixed; top: 0; inset-inline: 0; z-index: 30; padding: 14px 0; transition: transform .45s var(--ease); }
.top::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 4, 3, .96) 0%, rgba(5, 4, 3, .9) 78%, rgba(5, 4, 3, 0) 100%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.top.solid::before { opacity: 1; }
.top-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line2), 0 0 22px rgba(242, 193, 91, .35); }
.brand span { display: grid; line-height: 1; }
.brand b { font: 700 25px/1 var(--f-display); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-block: 2px; }
.brand small { font: 700 10px/1 var(--f-mono); letter-spacing: .2em; color: var(--mute); margin-top: 4px; direction: ltr; }
.ctrl { display: flex; align-items: center; gap: 8px; }
/* cockpit toggle: engraved labels, a gold lever that slides to the current language */
.sw { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 82px; height: 38px; padding: 3px; border: 1px solid var(--line2); border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #0c0905, #1b140b); box-shadow: inset 0 2px 7px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 230, 170, .08); font: 700 13px/1 var(--f-body); color: var(--mute); }
.sw span { position: relative; z-index: 1; display: grid; place-items: center; transition: color .3s; }
.sw-b { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; }
.sw-k { position: absolute; top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc(50% - 3px); border-radius: 9px; background: var(--gold-flat);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 3px 10px rgba(0, 0, 0, .6); transition: transform .45s var(--spring); }
.sw[data-cur="en"] .sw-k { transform: translateX(100%); }
.sw[data-cur="ar"] .sw-a, .sw[data-cur="en"] .sw-b { color: var(--accent-ink); }
/* porthole window for X */
.port { display: grid; place-items: center; width: 40px; height: 44px; border-radius: 46% / 50%; text-decoration: none; color: var(--gold2);
  background: radial-gradient(circle at 35% 30%, #2a2014, #070503 70%); border: 2px solid #3d2e18; box-shadow: 0 0 0 1px var(--line2), inset 0 0 10px rgba(0, 0, 0, .9); transition: transform .3s var(--spring); }
.port svg { width: 15px; height: 15px; fill: currentColor; }
.port:hover { transform: scale(1.08) rotate(-6deg); }

/* buttons: gold leaf with a light sweep; .mag buttons lean toward the mouse (home.js / whitelist.js) */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 13px 24px; border: 0; border-radius: 14px; cursor: pointer; overflow: hidden; isolation: isolate;
  background: var(--gold-flat); color: var(--accent-ink); font: 700 16px/1.2 var(--f-body); text-decoration: none; transition: transform .25s var(--ease), opacity .2s;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .65) inset, 0 -2px 0 rgba(120, 70, 10, .35) inset, 0 12px 34px -12px rgba(242, 193, 91, .75); }
.btn::after { content: ''; position: absolute; inset: -40% auto -40% 0; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: translateX(-160%) skewX(-18deg); animation: sweep 4.8s 2.2s var(--ease) infinite; pointer-events: none; }
@keyframes sweep { 0% { transform: translateX(-160%) skewX(-18deg); } 28%, 100% { transform: translateX(380%) skewX(-18deg); } }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn.wait { opacity: .6; pointer-events: none; }
.btn.ghost { background: rgba(14, 10, 6, .7); color: var(--text); border: 1px solid var(--line2); box-shadow: none; }
.btn.ghost::after { display: none; }
.btn.sm { min-height: 40px; padding: 9px 16px; font-size: 14px; border-radius: 12px; }
.btn.big { width: 100%; min-height: 58px; padding: 18px 22px; font-size: 17.5px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font: 600 13px/1 var(--f-body); color: var(--mute); background: rgba(10, 7, 4, .72); }
.chip b { color: var(--text); font-family: var(--f-mono); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(227, 38, 63, .6); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.offscreen, .offscreen * { animation-play-state: paused !important; }

/* kinetic headline: each word flips up from below (transform only; the words are visible from the first paint) */
.kin { perspective: 700px; }
.kin .w { display: inline-block; transform-origin: 50% 85%; background: linear-gradient(180deg, #fff8e4 0%, #ffe09a 38%, #f0b54c 70%, #ffe7ae 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-block: .06em; animation: rise 1s var(--ease) both; }
.kin .w:nth-child(2) { animation-delay: .08s; } .kin .w:nth-child(3) { animation-delay: .16s; } .kin .w:nth-child(4) { animation-delay: .24s; }
.kin .w:nth-child(5) { animation-delay: .32s; } .kin .w:nth-child(6) { animation-delay: .4s; }
.kin em.w { font-style: normal; background: linear-gradient(180deg, #ffffff 0%, #ffe3a0 30%, #f2b23e 62%, #b9781b 100%); -webkit-background-clip: text; background-clip: text; }
@keyframes rise { from { transform: translateY(.5em) rotateX(-80deg) scale(.94); } }

.rv { transition: opacity .9s var(--ease), transform .9s var(--ease); }
/* hidden only after core.js has started the reveal, so the text stays visible if the script never loads */
.rvs .rv { opacity: 0; transform: translateY(30px); }
.rvs .rv.flip { transform: perspective(900px) rotateX(-38deg) translateY(36px); transform-origin: 50% 0; }
.rvs .rv.in { opacity: 1; transform: none; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(10, 7, 4, .7);
  font: 700 13.5px/1 var(--f-body); color: var(--gold2); letter-spacing: .01em; }

.foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 34px 0 54px; color: var(--mute); font-size: 14px; border-top: 1px solid var(--line); margin-top: 30px; }
.foot a { text-decoration: none; }
.foot > a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10, 7, 4, .7); }
@media (max-width: 430px) { .brand small { display: none; } .brand b { font-size: 22px; } .top .btn.sm { padding: 9px 12px; font-size: 13px; } }
@media (max-width: 359px) { .top .btn.sm { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .intro { display: none; } .rv { opacity: 1; transform: none; } }