/* ================= CINEMATIC BACKGROUND ================= */

body {
    position: relative;
    overflow-x: hidden;
    color: #ecfbf3;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

/* Star haze and atmospheric falloff */
body::before {
    z-index: -6;
    background:
        radial-gradient(110% 80% at 50% 0%, rgba(85, 255, 187, 0.11), transparent 58%),
        radial-gradient(120% 80% at 50% 100%, rgba(0, 0, 0, 0.36), transparent 55%);
}

/* Tiny stars */
body::after {
    z-index: -7;
    opacity: 0.22;
    background-image:
        radial-gradient(rgba(219, 255, 238, 0.45) 1px, transparent 1px),
        radial-gradient(rgba(219, 255, 238, 0.28) 1px, transparent 1px);
    background-size: 3px 3px, 6px 6px;
    background-position: 0 0, 40px 30px;
}

.background-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -5;
    background:
        radial-gradient(50% 35% at 20% 18%, rgba(57, 215, 152, 0.16), transparent 72%),
        radial-gradient(50% 32% at 80% 14%, rgba(57, 215, 152, 0.1), transparent 74%),
        radial-gradient(40% 26% at 52% 4%, rgba(57, 215, 152, 0.08), transparent 70%);
}

.background-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -8;
    opacity: 0.08;
    background-image: radial-gradient(rgba(230, 255, 245, 0.55) 1px, transparent 1px);
    background-size: 5px 5px;
    animation: starDrift 36s linear infinite;
}

@keyframes starDrift {
    from { transform: translateY(0); }
    to { transform: translateY(18px); }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    .background-particles {
        animation: none;
        opacity: 0.05;
    }
}

body.perf-lite .background-particles {
    display: none !important;
}