body {
    margin: 0;
    background: #050b18; /* Deepest background */
    overflow-x: hidden;
    min-height: 100vh;
}

/* Base static gradient */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 40% 50%, #0a1428 0%, #050b18 100%);
    z-index: -2;
}

/* The "Dynamic Orbs" Layer */
body::after {
    content: "";
    position: fixed;
    inset: -50%; /* Larger than screen to allow movement without edges showing */
    z-index: -1;
    pointer-events: none;

    /* Three soft orbs of different colors */
    background-image:
        radial-gradient(
            circle at 30% 40%,
            rgba(30, 58, 138, 0.3) 0%,
            transparent 40%
        ),
        /* Navy */
        radial-gradient(
            circle at 70% 60%,
            rgba(20, 184, 166, 0.15) 0%,
            transparent 25%
        ),
        /* Teal */
        radial-gradient(
            circle at 50% 50%,
            rgba(59, 130, 246, 0.1) 0%,
            transparent 50%
        ); /* Blue */


    animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift {
    0% {
        transform: rotate(0deg) scale(1);
        background-position: 0% 0%;
    }
    50% {
        transform: rotate(5deg) scale(1.1);
        background-position: 10% 5%;
    }
    100% {
        transform: rotate(-5deg) scale(1);
        background-position: -5% 10%;
    }
}

.content-overlay {
    /* This glass effect anchors the UI while the light drifts behind it */
    /*background: rgba(10, 20, 40, 0.75);*/
    backdrop-filter: blur(1px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 1;
    min-height: 100vh;
}