/* ---------- Fonts (self-hosted, deterministic) ---------- */
@font-face { font-family: 'Vazirmatn'; font-weight: 300; src: url(/node_modules/@fontsource/vazirmatn/files/vazirmatn-arabic-300-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Vazirmatn'; font-weight: 400; src: url(/node_modules/@fontsource/vazirmatn/files/vazirmatn-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Vazirmatn'; font-weight: 500; src: url(/node_modules/@fontsource/vazirmatn/files/vazirmatn-arabic-500-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Vazirmatn'; font-weight: 700; src: url(/node_modules/@fontsource/vazirmatn/files/vazirmatn-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Vazirmatn'; font-weight: 900; src: url(/node_modules/@fontsource/vazirmatn/files/vazirmatn-arabic-900-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Inter Tight'; font-weight: 300; src: url(/node_modules/@fontsource/inter-tight/files/inter-tight-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 400; src: url(/node_modules/@fontsource/inter-tight/files/inter-tight-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 500; src: url(/node_modules/@fontsource/inter-tight/files/inter-tight-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 600; src: url(/node_modules/@fontsource/inter-tight/files/inter-tight-latin-600-normal.woff2) format('woff2'); }

:root {
  --void: #02050b;
  --blue: #1e6fd6;
  --azure: #3d9bff;
  --cyan: #7fd8ff;
  --ice: #eaf5ff;
  --amber: #ffb547;
  --mint: #5ff2c8;
  --glass: rgba(10, 26, 52, 0.42);
  --line: rgba(127, 216, 255, 0.28);
  --fa: 'Vazirmatn', 'Inter Tight', sans-serif;
  --en: 'Inter Tight', 'Vazirmatn', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #000; height: 100%; overflow: hidden; }

#viewport { position: fixed; inset: 0; display: grid; place-items: center; background: #000; }
#stage { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: var(--void); transform-origin: center; }
#gl { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }
#overlay { position: absolute; inset: 0; pointer-events: none; color: var(--ice); font-family: var(--en); -webkit-font-smoothing: antialiased; }
#overlay > * { position: absolute; will-change: transform, opacity; }

/* ---------- Bilingual caption ---------- */
.cap { opacity: 0; }
.cap .kicker { display: flex; align-items: center; gap: 14px; font: 500 15px/1 var(--en); letter-spacing: .32em; text-transform: uppercase; color: var(--cyan); margin-bottom: 22px; }
.cap .kicker i { display: block; width: 46px; height: 1px; background: currentColor; transform-origin: left center; }
.cap .fa { font: 700 64px/1.32 var(--fa); direction: rtl; color: #fff; text-shadow: 0 0 40px rgba(61,155,255,.35); white-space: nowrap; }
.cap .fa .w { display: inline-block; }
.cap .en { font: 300 25px/1.35 var(--en); letter-spacing: .01em; color: rgba(234,245,255,.78); margin-top: 14px; white-space: nowrap; }
.cap.center { left: 0; right: 0; text-align: center; }
.cap.center .kicker { justify-content: center; }
.cap.right { right: 140px; text-align: right; }
.cap.right .kicker { justify-content: flex-end; flex-direction: row-reverse; }
.cap.left { left: 140px; text-align: left; }

/* ---------- HUD frame ---------- */
.hud { inset: 0; opacity: 0; }
.hud .corner { position: absolute; width: 26px; height: 26px; border-color: rgba(234,245,255,.42); border-style: solid; border-width: 0; }
.hud .tl { left: 48px; top: 48px; border-left-width: 1px; border-top-width: 1px; }
.hud .tr { right: 48px; top: 48px; border-right-width: 1px; border-top-width: 1px; }
.hud .bl { left: 48px; bottom: 48px; border-left-width: 1px; border-bottom-width: 1px; }
.hud .br { right: 48px; bottom: 48px; border-right-width: 1px; border-bottom-width: 1px; }
.hud .brand { position: absolute; left: 92px; top: 56px; font: 500 13px/1 var(--en); letter-spacing: .34em; color: rgba(234,245,255,.7); }
.hud .brand b { font: 500 15px/1 var(--fa); letter-spacing: 0; color: rgba(234,245,255,.85); margin-left: 16px; }
.hud .chapter { position: absolute; right: 92px; top: 56px; font: 500 13px/1 var(--en); letter-spacing: .3em; color: rgba(234,245,255,.7); text-align: right; }
.hud .chapter span { color: var(--cyan); }
.hud .tc { position: absolute; right: 92px; bottom: 56px; font: 400 13px/1 var(--en); letter-spacing: .24em; color: rgba(234,245,255,.5); font-variant-numeric: tabular-nums; }
.hud .geo { position: absolute; left: 92px; bottom: 56px; font: 400 13px/1 var(--en); letter-spacing: .24em; color: rgba(234,245,255,.5); }

/* ---------- AVA analysis panel ---------- */
.panel { left: 120px; bottom: 120px; width: 470px; padding: 26px 28px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); opacity: 0; }
.panel .row1 { display: flex; justify-content: space-between; align-items: center; font: 500 15px/1 var(--en); color: rgba(234,245,255,.86); }
.panel .live { display: flex; gap: 8px; align-items: center; font: 600 12px/1 var(--en); letter-spacing: .2em; color: var(--mint); text-transform: uppercase; }
.panel .live i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.panel .bar { margin-top: 20px; }
.panel .bar .lbl { display: flex; justify-content: space-between; font: 400 14px/1 var(--en); color: rgba(234,245,255,.72); margin-bottom: 9px; font-variant-numeric: tabular-nums; }
.panel .bar .track { height: 3px; border-radius: 3px; background: rgba(127,216,255,.14); overflow: hidden; }
.panel .bar .fill { height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 12px var(--cyan); }
.panel .fa-note { margin-top: 20px; font: 400 16px/1.6 var(--fa); direction: rtl; text-align: right; color: rgba(234,245,255,.66); }

/* ---------- Projected 3D labels ---------- */
.tag { left: 0; top: 0; opacity: 0; display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.tag .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan), 0 0 0 5px rgba(127,216,255,.14); flex: none; }
.tag .ln { width: 56px; height: 1px; background: linear-gradient(90deg, var(--cyan), rgba(127,216,255,.1)); transform-origin: left center; flex: none; }
.tag .txt { display: flex; flex-direction: column; gap: 6px; text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 0 30px rgba(0,0,0,.8); }
.tag .t-fa { font: 700 24px/1.2 var(--fa); direction: rtl; color: #fff; }
.tag .t-en { font: 500 12.5px/1 var(--en); letter-spacing: .24em; text-transform: uppercase; color: rgba(234,245,255,.66); }
.tag.flip { flex-direction: row-reverse; }
.tag.flip .ln { transform-origin: right center; background: linear-gradient(270deg, var(--cyan), rgba(127,216,255,.1)); }
.tag.flip .txt { align-items: flex-end; }
.tag.amber .dot { background: var(--amber); box-shadow: 0 0 14px var(--amber), 0 0 0 5px rgba(255,181,71,.16); }
.tag.amber .ln { background: linear-gradient(90deg, var(--amber), rgba(255,181,71,.1)); }
.tag.amber .t-fa { color: var(--amber); }
.tag.small .t-fa { font-size: 20px; }

.city .badges { display: flex; gap: 8px; margin-top: 4px; }
.city .badge { font: 600 11px/1 var(--en); letter-spacing: .18em; text-transform: uppercase; padding: 6px 9px; border-radius: 99px; border: 1px solid rgba(127,216,255,.45); color: var(--cyan); background: rgba(9,30,60,.55); }
.city .badge.clinic { border-color: rgba(95,242,200,.5); color: var(--mint); }

/* ---------- Chat (AVA assistants) ---------- */
.chat { right: 150px; top: 200px; width: 620px; perspective: 1400px; opacity: 0; }
.chat .head { display: flex; align-items: center; gap: 14px; flex-direction: row-reverse; margin-bottom: 22px; }
.chat .avatar { width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7fd8ff, #1e6fd6 55%, #0a2a5c); box-shadow: 0 0 30px rgba(61,155,255,.6); display: grid; place-items: center; font: 700 16px/1 var(--en); color: #fff; }
.chat .who { text-align: right; }
.chat .who .n { font: 700 22px/1.2 var(--fa); direction: rtl; color: #fff; }
.chat .who .h { font: 500 13px/1 var(--en); letter-spacing: .12em; color: var(--cyan); margin-top: 5px; }
.bubble { position: relative; max-width: 560px; padding: 20px 24px; border-radius: 24px; margin-bottom: 16px; font: 400 23px/1.65 var(--fa); direction: rtl; text-align: right; opacity: 0; }
.bubble.user { margin-left: auto; background: rgba(234,245,255,.1); border: 1px solid rgba(234,245,255,.18); border-bottom-right-radius: 6px; color: rgba(255,255,255,.92); width: fit-content; }
.bubble.bot { margin-right: auto; background: linear-gradient(135deg, rgba(30,111,214,.55), rgba(10,40,90,.55)); border: 1px solid rgba(127,216,255,.38); border-bottom-left-radius: 6px; color: #fff; box-shadow: 0 20px 60px rgba(30,111,214,.25); width: fit-content; }
.bubble .typing { position: absolute; left: 26px; top: 50%; margin-top: -5px; display: flex; gap: 7px; direction: ltr; }
.bubble .typing i { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); }
.bubble .reply { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 26px; }
.chip { display: flex; gap: 10px; align-items: baseline; padding: 11px 18px; border-radius: 99px; border: 1px solid var(--line); background: rgba(8,24,48,.6); opacity: 0; }
.chip .c-fa { font: 500 18px/1 var(--fa); direction: rtl; color: #fff; }
.chip .c-en { font: 500 11.5px/1 var(--en); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }

/* ---------- Stats ---------- */
.stats { left: 0; right: 0; bottom: 66px; display: flex; justify-content: center; gap: 84px; opacity: 0; }
.stat { text-align: center; }
.stat .num { font: 300 72px/1 var(--en); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(61,155,255,.5); }
.stat .s-fa { font: 500 22px/1.4 var(--fa); direction: rtl; color: #fff; margin-top: 10px; }
.stat .s-en { font: 500 12px/1 var(--en); letter-spacing: .26em; text-transform: uppercase; color: var(--cyan); margin-top: 8px; }

/* ---------- Finale lockup ---------- */
.lockup { left: 0; right: 0; top: 700px; text-align: center; }
.lockup .l-fa { font: 900 82px/1.25 var(--fa); direction: rtl; color: #fff; text-shadow: 0 0 60px rgba(61,155,255,.45); opacity: 0; }
.lockup .l-en { font: 500 22px/1 var(--en); letter-spacing: .62em; margin-top: 18px; padding-left: .62em; color: rgba(234,245,255,.9); opacity: 0; }
.lockup .l-tag { font: 300 22px/1 var(--en); margin-top: 22px; color: rgba(234,245,255,.62); opacity: 0; }
.socials { left: 0; right: 0; bottom: 64px; display: flex; justify-content: center; gap: 34px; font: 500 15px/1 var(--en); letter-spacing: .14em; color: rgba(234,245,255,.62); opacity: 0; }
.socials b { color: var(--cyan); font-weight: 500; }
.socials .sep { width: 1px; height: 15px; background: rgba(234,245,255,.25); }

/* ---------- AVA suite panels (film) ---------- */
.suite { opacity: 0; right: 140px; }
.s-photo { top: 190px; width: 640px; padding: 26px; border-radius: 28px; background: rgba(6, 16, 34, .7); border: 1px solid rgba(127, 216, 255, .2); backdrop-filter: blur(16px); box-shadow: 0 50px 120px rgba(0,0,0,.5); }
.s-head { display: flex; align-items: center; gap: 12px; direction: rtl; margin-bottom: 16px; }
.s-head i { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.s-head b { flex: 1; font: 700 22px/1 var(--fa); color: #fff; }
.s-head small { font: 500 12px/1 var(--en); letter-spacing: .2em; color: var(--cyan); }
.s-smile { border-radius: 20px; overflow: hidden; background: radial-gradient(ellipse at center, #0b1a36, #030812); border: 1px solid rgba(127,216,255,.12); margin-bottom: 16px; }
.s-smile svg { display: block; width: 100%; height: auto; }
.f-ring { fill: none; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.f-ring.amber { stroke: var(--amber); filter: drop-shadow(0 0 6px var(--amber)); }
.f-ring.cyan { stroke: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); }
.f-scan { fill: var(--cyan); filter: drop-shadow(0 0 10px var(--cyan)); }
.s-rows { list-style: none; display: grid; gap: 9px; }
.s-rows li { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; background: rgba(127,216,255,.05); border: 1px solid rgba(127,216,255,.1); direction: rtl; overflow: hidden; opacity: 0; }
.s-rows li i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.s-rows li span { font: 500 19px/1 var(--fa); color: #fff; }
.s-rows li em { flex: 1; font: 500 11px/1 var(--en); font-style: normal; letter-spacing: .18em; color: rgba(234,245,255,.45); direction: ltr; text-align: right; }
.s-rows li b { font: 600 15px/1 var(--fa); color: var(--c); }
.s-rows li u { position: absolute; right: 0; bottom: 0; height: 2px; width: calc(var(--v) * 100%); background: var(--c); transform-origin: right center; transform: scaleX(0); }
.s-ev { top: 230px; width: 860px; border-radius: 22px; overflow: hidden; background: #050b17; border: 1px solid rgba(127,216,255,.25); box-shadow: 0 60px 140px rgba(0,0,0,.6), 0 0 100px rgba(52,214,176,.15); }
.s-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.07); }
.s-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.18); }
.s-bar span { margin-left: 12px; flex: 1; font: 500 15px/1 var(--en); color: rgba(234,245,255,.6); }
.s-bar b { font: 700 12px/1 var(--fa); letter-spacing: .08em; padding: 7px 12px; border-radius: 99px; color: #02101f; background: linear-gradient(135deg, var(--mint), var(--cyan)); }
.s-shots { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.s-shots .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-care { top: 150px; width: 900px; height: 800px; perspective: 1800px; }
.s-care .ph { position: absolute; top: 50%; left: 50%; width: 270px; aspect-ratio: 9 / 19; object-fit: cover; object-position: top; border-radius: 36px; border: 8px solid #0d1426; box-shadow: 0 50px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(127,216,255,.3), 0 0 80px rgba(61,155,255,.2); opacity: 0; }

/* ---------- Full-frame veils ---------- */
.veil { inset: 0; opacity: 0; }
.veil.black { background: #000; }

/* ---------- Preview controls (never rendered into frames) ---------- */
#controls { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-radius: 12px; background: rgba(20,24,32,.85); color: #fff; font: 13px/1 system-ui, sans-serif; z-index: 10; }
#controls[hidden] { display: none; }
#controls input { width: 520px; }
#controls button { background: #1e6fd6; color: #fff; border: 0; padding: 7px 14px; border-radius: 8px; cursor: pointer; }