/* FILE: css/layout/background.css */

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: var(--bg-void);
}

/* 1. Scanlines (CRT Monitor Effect) */
.background-container::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    z-index: 10;
    pointer-events: none;
}

/* 2. Vignette */
.vignette-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 40%, #000 140%);
    z-index: 5;
}

/* 3. Nebula */
.background-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70vw;
    height: 70vh;
    background: radial-gradient(circle,
            rgba(157, 78, 221, 0.12) 0%,
            transparent 60%);
    filter: blur(80px);
    z-index: 0;
    opacity: 0.8;
    animation: pulse-nebula 10s infinite alternate;
}

/* 4. Stars */
.starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.star-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: move-stars linear infinite;
}

/* Layer 1 */
.stars-1 {
    width: 1px;
    height: 1px;
    background: transparent;
    animation-duration: 200s;
    opacity: 0.5;
    box-shadow: 10vw 10vh #fff, 20vw 80vh #fff, 80vw 10vh #fff, 90vw 90vh #fff,
        5vw 50vh #fff, 70vw 20vh #fff, 30vw 60vh #fff, 60vw 40vh #fff,
        15vw 25vh #fff, 85vw 75vh #fff, 25vw 95vh #fff, 75vw 5vh #fff,
        45vw 35vh #fff, 55vw 65vh #fff, 12vw 12vh #fff, 88vw 88vh #fff;
}

.stars-1::after {
    content: " ";
    position: absolute;
    top: 100vh;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: inherit;
}

/* Layer 2 */
.stars-2 {
    width: 2px;
    height: 2px;
    background: transparent;
    animation-duration: 150s;
    opacity: 0.8;
    box-shadow: 15vw 15vh rgba(255, 255, 255, 0.8),
        85vw 85vh rgba(255, 255, 255, 0.8), 35vw 55vh rgba(255, 255, 255, 0.8),
        65vw 25vh rgba(255, 255, 255, 0.8), 10vw 60vh rgba(255, 255, 255, 0.8),
        90vw 40vh rgba(255, 255, 255, 0.8);
}

.stars-2::after {
    content: " ";
    position: absolute;
    top: 100vh;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: inherit;
}

/* Layer 3 */
.stars-3 {
    width: 3px;
    height: 3px;
    background: transparent;
    animation-duration: 100s;
    box-shadow: 30vw 20vh #fff, 80vw 60vh #fff, 10vw 90vh #fff, 50vw 50vh #fff;
    filter: drop-shadow(0 0 3px #fff);
}

.stars-3::after {
    content: " ";
    position: absolute;
    top: 100vh;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: inherit;
}

@keyframes move-stars {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

@keyframes pulse-nebula {
    from {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}