/* ====== Avina - Star Map Background ====== */
/* انیمیشن نقشه ستارگان: ظریف، آرام، آموزشی */
/* "هر ستاره یک مهارت، هر خط یک اتصال در مسیر رشد" */

#avina-stars-bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -2 !important;   /* پشت همه چی، حتی Aurora (z=-1) */
    pointer-events: none !important;
    opacity: 1;
    will-change: transform;
    animation: starsFadeIn 1.6s ease-out;
}

@keyframes starsFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Aurora glow — saturated, energetic Gen-Z palette (violet ⇄ magenta ⇄ gold) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 70% 55% at 12% 6%, rgba(124, 58, 237, 0.30), transparent 60%),
        radial-gradient(ellipse 62% 52% at 88% 92%, rgba(236, 72, 153, 0.20), transparent 60%),
        radial-gradient(ellipse 55% 45% at 92% 16%, rgba(168, 139, 250, 0.24), transparent 65%),
        radial-gradient(ellipse 52% 42% at 6% 86%, rgba(56, 189, 248, 0.18), transparent 58%),
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(76, 29, 149, 0.14), transparent 72%);
    animation: auroraDrift 28s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
    0%   { opacity: 0.9;  transform: translateY(0) scale(1); }
    50%  { opacity: 1;    transform: translateY(-14px) scale(1.05); }
    100% { opacity: 0.8;  transform: translateY(8px) scale(0.99); }
}

/* Floating color blobs — slow, alive, adds depth & energy without distraction */
body::after {
    content: '';
    position: fixed;
    inset: -25%;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 24% 28%, rgba(124, 58, 237, 0.22), transparent 24%),
        radial-gradient(circle at 76% 64%, rgba(236, 72, 153, 0.16), transparent 22%),
        radial-gradient(circle at 62% 18%, rgba(255, 215, 140, 0.12), transparent 18%),
        radial-gradient(circle at 18% 78%, rgba(56, 189, 248, 0.12), transparent 20%);
    filter: blur(46px);
    animation: blobDrift 30s ease-in-out infinite alternate;
}

@keyframes blobDrift {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(2.5%, -2%) scale(1.08) rotate(2deg); }
    100% { transform: translate(-2%, 2.5%) scale(1.03) rotate(-1.5deg); }
}

/* main-layout و main روی canvas باشن، اما app-layout نباید stacking context بسازه
   چون sidebar/backdrop داخلش هستند و stacking context ما رو به دام می‌اندازه */
.main-layout, main {
    position: relative;
    z-index: 1;
}

/* app-layout رو فقط یک container بدون stacking context جدید می‌گذاریم.
   مهم: شفافش می‌کنیم؛ وگرنه background-color: var(--bg) (#10131a) کل ویوپورت را
   می‌پوشاند و canvas ستاره‌ها + aurora + گرادینت پشت body اصلاً دیده نمی‌شوند
   (دلیل اصلی «پس‌زمینهٔ مشکی و بی‌روح»). */
.app-layout {
    position: static !important;
    background: transparent !important;
}

/* main-layout هم شفاف تا گرادینت کیهانی پشتش پیدا باشد */
.main-layout {
    background: transparent !important;
}

#blazor-error-ui { z-index: 2000 !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    body::before, body::after, #avina-stars-bg { animation: none; }
}

/* پس‌زمینه روی html (که زیر canvas میمونه) — کیهانی، عمیق، نیلی-بنفش به‌جای مشکی ساده */
html {
    background:
        radial-gradient(ellipse 60% 50% at 18% 0%, #1d1148 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 86% 8%, #2a1056 0%, transparent 52%),
        radial-gradient(ellipse 70% 55% at 50% 100%, #160e3a 0%, transparent 60%),
        linear-gradient(160deg, #0c0a22 0%, #0a0820 50%, #070617 100%) !important;
    background-attachment: fixed !important;
    margin: 0;
    padding: 0;
}
body {
    /* body شفاف باشه تا canvas (z=-2) دیده بشه */
    background: transparent !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}