/* ============================================================
   ثيم مسار الفيديو — "سينمائي / شريط زمني"
   الجوّ: حركة، زمن، إطارات، تمرير. قاعدة نيلية-باردة عميقة،
   مرجاني مهيمن (نقطة REC/الحركة)، نسيج علامات شريط زمني.
   ============================================================ */
:root {
  --bg-void: #07070e; --bg-deep: #0b0b16; --bg-panel: #10101e; --bg-elevated: #17172a; --bg-code: #08080f;
  --line: #1d1d31; --line-strong: #2c2c48; --line-faint: #131320;
  --fg: #e6e6f2; --fg-muted: #9a9ab8; --fg-dim: #5f5f7c; --fg-faint: #3c3c54;
  --acid: #ff6a5a; --acid-dim: #8a2e26;     /* مهيمن: مرجاني الحركة/REC */
  --cyan: #38d6ff; --cyan-dim: #1a7a96;     /* ثانوي: سماوي شريط الزمن */
  --amber: #ffb454; --amber-dim: #8a5f1f;   /* warn */
  --red: #ff2d55; --red-dim: #8a1730;       /* danger */
  --magenta: #c07cff; --magenta-dim: #5e3a8a;
  --spectrum: linear-gradient(90deg, #ff2d55, #ff6a5a, #ffb454, #38d6ff, #c07cff);
  --mono: "JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  --ar: "IBM Plex Sans Arabic","Tajawal","Noto Sans Arabic",system-ui,sans-serif;
  --t-image:#49c5ff; --t-audio:#ffb43c; --t-video:#ff6a5a;
}
/* نسيج: علامات شريط زمني رأسية + شبكة إطارات خفيفة + توهّج بارد */
body {
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(255,106,90,0.05) 0%, transparent 46%),
    radial-gradient(ellipse at 85% 80%, rgba(56,214,255,0.05) 0%, transparent 46%),
    repeating-linear-gradient(90deg, rgba(150,150,210,0.02) 0px, rgba(150,150,210,0.02) 1px, transparent 1px, transparent 28px);
}
.hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 18% 30%, rgba(255,106,90,0.12) 0%, transparent 44%),
              radial-gradient(circle at 82% 70%, rgba(56,214,255,0.08) 0%, transparent 44%); }
/* موتيف: ثقوب شريط الفيلم على الجانب */
.hero::after { content:""; position:absolute; top:0; bottom:0; left:0; width:26px; pointer-events:none; opacity:0.3;
  background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(56,214,255,0.35) 12px 20px, transparent 20px 28px);
  mask-image: linear-gradient(to right, black, transparent); }