body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-main);
    box-sizing: border-box;
    margin: 0;

    min-height: 100vh;
    width: 100%;
    background-color: #000000;

    background-image:
        radial-gradient(circle at 50% 90%, #010a27ef, transparent 60%),
        radial-gradient(circle at 75% 75%, #b32a1bb6, transparent 45%),
        radial-gradient(circle at 10% 40%, #750069cf, transparent 35%),
        linear-gradient(135deg, #01000f 0%, rgb(4, 4, 7) 100%);

    background-attachment: fixed;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120vw;
    height: 120vh;
    z-index: -1;
    pointer-events: none;

    background-image:
        radial-gradient(circle at 12% 20%, rgba(139, 45, 34, 0.6) 1px, transparent 3px),
        radial-gradient(circle at 25% 75%, rgba(139, 45, 34, 0.4) 2px, transparent 5px),
        radial-gradient(circle at 82% 18%, rgba(218, 59, 202, 0.5) 1.5px, transparent 4px),
        radial-gradient(circle at 68% 60%, rgba(162, 0, 143, 0.7) 1px, transparent 2.5px),
        radial-gradient(circle at 45% 35%, rgba(0, 195, 255, 0.5) 1px, transparent 3px),
        radial-gradient(circle at 55% 85%, rgba(53, 90, 241, 0.6) 3px, transparent 7px),
        radial-gradient(circle at 90% 70%, rgba(0, 195, 255, 0.3) 2px, transparent 5px);

    filter: blur(0.5px);

    will-change: transform;
    animation: floatDebris 25s ease-in-out infinite alternate;
}

/* Debris Floating Keyframes */
@keyframes floatDebris {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    50% {
        transform: translateY(25px) translateX(15px) rotate(1deg);
    }
    100% {
        transform: translateY(-20px) translateX(-15px) rotate(-1deg);
    }
}