/* ============================================================
   جلوه‌های گرافیکی پس‌زمینهٔ تم‌ها
   لایهٔ #theme-fx پشت کل صفحه ثابت است؛ بسته به data-theme
   فقط یکی از سه لایهٔ .fx-space / .fx-tactical / .fx-amber
   نمایش داده می‌شود.
   ============================================================ */

#theme-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* لایه‌بندی محتوا روی جلوه‌های پس‌زمینه */
body > *:not(#theme-fx):not(#license-gate) { position: relative; z-index: 1; }

#license-gate {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}

/* هر لایهٔ جلوه پیش‌فرض پنهان است؛ تم فعال آن را روشن می‌کند */
#theme-fx .fx { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }

html[data-theme="deep_space"] #theme-fx .fx-space    { opacity: 1; }
html[data-theme="tactical"]   #theme-fx .fx-tactical { opacity: 1; }
html[data-theme="amber"]      #theme-fx .fx-amber    { opacity: 1; }

/* ============================================================
   ۱) DEEP SPACE — میدان ستاره‌ای + سحابی + گرادیان کیهانی
   ============================================================ */
.fx-space {
  background:
    radial-gradient(ellipse 120% 90% at 50% -10%, #14203f 0%, transparent 55%),
    radial-gradient(ellipse 100% 100% at 80% 100%, #0d1830 0%, transparent 60%),
    radial-gradient(circle at 50% 40%, #0b1226 0%, #05070f 100%);
}

/* سه لایه ستاره با اندازه/سرعت متفاوت برای عمق (parallax drift) */
.fx-space .stars {
  position: absolute; inset: -50%;
  background-repeat: repeat;
}
.fx-space .stars-1 {
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 120px 80px, #cfe8ff, transparent),
    radial-gradient(2px 2px at 200px 160px, #ffffff, transparent),
    radial-gradient(1px 1px at 90px 200px, #9fd8ff, transparent),
    radial-gradient(1.5px 1.5px at 260px 40px, #ffffff, transparent);
  background-size: 300px 300px;
  animation: drift 140s linear infinite, twinkle 5s ease-in-out infinite;
  opacity: .9;
}
.fx-space .stars-2 {
  background-image:
    radial-gradient(1px 1px at 60px 60px, #a5b8ff, transparent),
    radial-gradient(1.5px 1.5px at 180px 120px, #ffffff, transparent),
    radial-gradient(1px 1px at 240px 220px, #c4b5fd, transparent),
    radial-gradient(1px 1px at 30px 180px, #ffffff, transparent);
  background-size: 260px 260px;
  animation: drift 200s linear infinite reverse, twinkle 7s ease-in-out infinite;
  opacity: .7;
}
.fx-space .stars-3 {
  background-image:
    radial-gradient(1px 1px at 100px 40px, #ffffff, transparent),
    radial-gradient(1px 1px at 220px 180px, #7dd3fc, transparent),
    radial-gradient(0.8px 0.8px at 40px 120px, #e9d5ff, transparent);
  background-size: 220px 220px;
  animation: drift 260s linear infinite, twinkle 9s ease-in-out infinite;
  opacity: .5;
}

/* سحابی‌های محو در گوشه‌ها */
.fx-space .nebula { position: absolute; border-radius: 50%; filter: blur(70px); }
.fx-space .neb-a {
  top: -12%; left: -8%; width: 45vw; height: 45vw;
  background: radial-gradient(circle, rgba(34,211,238,.20), transparent 70%);
  animation: pulseGlow 12s ease-in-out infinite;
}
.fx-space .neb-b {
  bottom: -18%; right: -10%; width: 50vw; height: 50vw;
  background: radial-gradient(circle, rgba(139,92,246,.18), transparent 70%);
  animation: pulseGlow 16s ease-in-out infinite 2s;
}

@keyframes drift { from { transform: translate(0,0); } to { transform: translate(-140px, -90px); } }
@keyframes twinkle { 0%,100% { opacity: .85; } 50% { opacity: .45; } }
@keyframes pulseGlow { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

/* ============================================================
   ۲) TACTICAL — شبکهٔ نظامی + رادار چرخان (Canvas) + اسکن‌لاین
   ============================================================ */
.fx-tactical {
  background:
    radial-gradient(ellipse 100% 100% at 85% 20%, #14301c 0%, transparent 55%),
    linear-gradient(160deg, #0b160e 0%, #070d09 100%);
}

/* شبکهٔ مختصاتِ نظامی */
.fx-tactical .mil-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(74,222,128,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,.09) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 40%, transparent 85%);
}

/* بوم رادار چرخان */
.fx-tactical #radar-canvas {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vh, 90vw);
  height: min(90vh, 90vw);
  opacity: .55;
}

/* خط اسکن افقی که بالا و پایین می‌رود */
.fx-tactical .scanline {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(74,222,128,.55), transparent);
  box-shadow: 0 0 12px rgba(74,222,128,.6);
  animation: scanMove 6s linear infinite;
}
@keyframes scanMove { 0% { top: 5%; } 50% { top: 95%; } 100% { top: 5%; } }

/* ============================================================
   ۳) MIDNIGHT AMBER — شبکهٔ کهربایی + هالهٔ گرم
   ============================================================ */
.fx-amber {
  background:
    radial-gradient(ellipse 90% 70% at 30% 20%, #241a10 0%, transparent 55%),
    linear-gradient(150deg, #121013 0%, #0a090b 100%);
}

.fx-amber .amber-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245,158,11,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,158,11,.07) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 90% 90% at 40% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 40% 40%, #000 30%, transparent 80%);
}

.fx-amber .amber-glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.fx-amber .glow-a {
  top: -10%; left: 10%; width: 46vw; height: 46vw;
  background: radial-gradient(circle, rgba(245,158,11,.22), transparent 70%);
  animation: pulseGlow 14s ease-in-out infinite;
}
.fx-amber .glow-b {
  bottom: -14%; right: 5%; width: 40vw; height: 40vw;
  background: radial-gradient(circle, rgba(217,119,6,.18), transparent 70%);
  animation: pulseGlow 18s ease-in-out infinite 3s;
}

/* ============================================================
   شفاف‌سازی پنل‌ها تا جلوهٔ پس‌زمینه دیده شود + هالهٔ نئون
   ============================================================ */
.bg-slate-800, .bg-slate-800\/80, .bg-slate-800\/90 {
  background-color: color-mix(in srgb, var(--panel) 82%, transparent) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
header.bg-slate-800\/80 {
  background-color: color-mix(in srgb, var(--panel2) 70%, transparent) !important;
}
/* هالهٔ نئون ملایم دور پنل‌ها با رنگ اکسنت تم */
main section > div.border,
main section > div[class*="border-slate"] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
              0 8px 30px rgba(0,0,0,.35);
}

/* احترام به کاربرانی که انیمیشن کمتری می‌خواهند */
@media (prefers-reduced-motion: reduce) {
  .fx-space .stars, .fx-space .nebula,
  .fx-tactical .scanline, .fx-amber .amber-glow { animation: none !important; }
}