/* Hub — mystical dark nebula (deep indigo, subtle stars) */

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: 0.68; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.22; }
    50%       { opacity: 0.38; }
}

#seasonal-matrix-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.32;
}

html[data-theme="light"] #seasonal-matrix-bg { opacity: 0.12; }

body {
    background:
        radial-gradient(ellipse 110% 75% at 50% -15%, rgba(139, 92, 246, 0.09) 0%, transparent 52%),
        radial-gradient(ellipse 80% 55% at 100% 85%, rgba(96, 165, 250, 0.05) 0%, transparent 48%),
        linear-gradient(135deg,
            #121528 0%, #181a38 14%, #1c1630 28%,
            #14182e 42%, #1a1838 58%, #1c1630 72%,
            #121528 100%);
    background-size: 100% 100%, 100% 100%, 400% 400%;
    background-attachment: fixed;
    animation: gradientShift 24s ease infinite;
}

body::before {
    content: '';
    position: fixed;
    top: 48%;
    left: 50%;
    width: min(900px, 120vw);
    height: min(900px, 120vw);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(147, 51, 234, 0.11) 0%,
        rgba(102, 126, 234, 0.06) 40%,
        transparent 68%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    animation: pulseGlow 10s ease-in-out infinite;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.42;
    background-image:
        radial-gradient(1px 1px at 8% 12%, rgba(255, 255, 255, 0.32) 0%, transparent 100%),
        radial-gradient(1px 1px at 18% 68%, rgba(196, 181, 253, 0.28) 0%, transparent 100%),
        radial-gradient(1px 1px at 32% 28%, rgba(251, 191, 36, 0.26) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 48% 8%, rgba(255, 255, 255, 0.22) 0%, transparent 100%),
        radial-gradient(1px 1px at 55% 78%, rgba(255, 255, 255, 0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 68% 35%, rgba(167, 139, 250, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 78% 88%, rgba(251, 191, 36, 0.18) 0%, transparent 100%),
        radial-gradient(1px 1px at 88% 18%, rgba(255, 255, 255, 0.24) 0%, transparent 100%),
        radial-gradient(1px 1px at 94% 62%, rgba(196, 181, 253, 0.22) 0%, transparent 100%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(88, 28, 135, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 15% 90%, rgba(139, 92, 246, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 35% 25% at 88% 15%, rgba(96, 165, 250, 0.05) 0%, transparent 70%);
    animation: starTwinkle 9s ease-in-out infinite;
}

.mystic-vignette {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 85% 70% at 50% 45%, transparent 35%, rgba(8, 6, 18, 0.55) 100%),
        linear-gradient(180deg, rgba(88, 28, 135, 0.06) 0%, transparent 35%, transparent 70%, rgba(30, 20, 60, 0.14) 100%);
}

body.season-winter {
    background:
        radial-gradient(ellipse 95% 65% at 50% 0%, rgba(196, 181, 253, 0.06) 0%, transparent 52%),
        linear-gradient(135deg,
            #121528 0%, #161738 15%, #181430 30%, #131c2e 45%,
            #16173d 60%, #181430 75%, #121528 100%);
    background-size: 100% 100%, 400% 400%;
}

body.season-spring {
    background:
        radial-gradient(ellipse 85% 55% at 30% 8%, rgba(167, 243, 208, 0.04) 0%, transparent 48%),
        linear-gradient(135deg,
            #121528 0%, #181838 15%, #181430 30%, #131c2e 45%,
            #16172d 60%, #181430 75%, #121528 100%);
    background-size: 100% 100%, 400% 400%;
}

body.season-summer {
    background:
        radial-gradient(ellipse 85% 55% at 70% 4%, rgba(110, 231, 183, 0.035) 0%, transparent 48%),
        linear-gradient(135deg,
            #121528 0%, #141f1a 15%, #141f22 30%, #131c2e 45%,
            #162220 60%, #141f22 75%, #121528 100%);
    background-size: 100% 100%, 400% 400%;
}

body.season-autumn {
    background:
        radial-gradient(ellipse 85% 55% at 50% 0%, rgba(251, 191, 36, 0.045) 0%, transparent 48%),
        linear-gradient(135deg,
            #121528 0%, #1a1524 15%, #1a1422 30%, #131c2e 45%,
            #1a1728 60%, #181430 75%, #121528 100%);
    background-size: 100% 100%, 400% 400%;
}

html[data-theme="light"] body {
    background: linear-gradient(135deg, #f0eef8 0%, #e8e4f4 50%, #f5f3ef 100%);
    background-size: 100% 100%;
    animation: none;
}

html[data-theme="light"] body::before {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 65%);
    animation: none;
    opacity: 0.7;
}

html[data-theme="light"] .mystic-vignette { display: none; }

html[data-theme="light"] body::after {
    opacity: 0.2;
    animation: none;
}

@media (max-width: 768px) {
    #seasonal-matrix-bg { opacity: 0.2; }
    body::after { opacity: 0.26; }
}

@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
    body::before,
    body::after { animation: none; }
    #seasonal-matrix-bg { display: none; }
}