body {
    background: radial-gradient(circle at 20% 80%, #000015 0%, #000003 100%);
    overflow-x: hidden;
    position: relative;
}

.aurora-wrapper {
    position: relative;
    z-index: 1;
}

body::before,
body::after,
.aurora-wrapper::before,
.aurora-wrapper::after {
    content: '';
    position: fixed;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

body::before {
    top: -100%;
    left: -100%;
    width: 500%;
    height: 500%;
    z-index: -5;
    background:
        conic-gradient(from 0deg at 20% 80%,
            rgba(88, 28, 146, 0.25) 0deg,
            rgba(0, 180, 180, 0.2) 120deg,
            rgba(200, 15, 100, 0.3) 240deg,
            rgba(88, 28, 146, 0.25) 360deg
        ),
        radial-gradient(ellipse 200% 100% at 30% 70%,
            rgba(70, 60, 140, 0.4) 0%,
            rgba(70, 60, 140, 0.15) 40%,
            transparent 70%
        ),
        radial-gradient(ellipse 150% 200% at 80% 20%,
            rgba(180, 70, 120, 0.25) 0%,
            rgba(180, 70, 120, 0.08) 50%,
            transparent 80%
        ),
        radial-gradient(ellipse 300% 80% at 50% 100%,
            rgba(0, 160, 140, 0.2) 0%,
            transparent 60%
        );
    animation: primordial-flow 180s cubic-bezier(0.23, 1, 0.32, 1) infinite;
    filter: blur(1px) saturate(1.2);
    mix-blend-mode: screen;
}

body::after {
    top: -50%;
    left: -50%;
    width: 300%;
    height: 300%;
    z-index: -4;
    background:
        radial-gradient(ellipse 400% 100% at 10% 50%,
            rgba(180, 180, 180, 0.06) 0%,
            rgba(60, 140, 200, 0.2) 30%,
            transparent 70%
        ),
        radial-gradient(ellipse 100% 400% at 90% 50%,
            rgba(180, 60, 180, 0.15) 0%,
            transparent 60%
        ),
        radial-gradient(circle at 50% 0%,
            rgba(200, 200, 200, 0.1) 0%,
            transparent 50%
        ),
        repeating-conic-gradient(from 45deg at 50% 50%,
            transparent 0deg 30deg,
            rgba(160, 160, 160, 0.02) 30deg 60deg
        );
    animation:
        crystal-matrix 90s ease-in-out infinite,
        depth-shift 240s linear infinite;
    filter: blur(0.5px) brightness(0.9);
    mix-blend-mode: plus-lighter;
}

.aurora-wrapper::before {
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    z-index: -3;
    background:
        radial-gradient(circle at 25% 25%,
            rgba(200, 200, 200, 0.15) 0%,
            rgba(200, 200, 200, 0.03) 30%,
            transparent 60%
        ),
        radial-gradient(circle at 75% 75%,
            rgba(0, 180, 180, 0.12) 0%,
            rgba(0, 180, 180, 0.03) 40%,
            transparent 70%
        ),
        radial-gradient(circle at 50% 90%,
            rgba(200, 70, 140, 0.1) 0%,
            transparent 50%
        ),
        linear-gradient(45deg,
            transparent 0%,
            rgba(160, 160, 160, 0.015) 50%,
            transparent 100%
        );
    animation: plasma-dance 60s ease-in-out infinite;
    filter: blur(1.5px) contrast(1.1);
    mix-blend-mode: overlay;
}

.aurora-wrapper::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background:
        radial-gradient(1px 1px at 15% 25%, rgba(200, 200, 200, 0.4), transparent),
        radial-gradient(1px 1px at 45% 65%, rgba(140, 180, 180, 0.35), transparent),
        radial-gradient(1px 1px at 75% 35%, rgba(180, 140, 180, 0.4), transparent),
        radial-gradient(1px 1px at 85% 85%, rgba(180, 180, 140, 0.35), transparent),
        radial-gradient(1px 1px at 25% 75%, rgba(140, 180, 140, 0.4), transparent);
    background-size: 200px 200px, 300px 300px, 250px 250px, 350px 350px, 280px 280px;
    animation: quantum-drift 100s linear infinite;
    filter: blur(0.2px);
}

@keyframes primordial-flow {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    25% { transform: translate(-48%, -52%) rotate(90deg) scale(1.05); }
    50% { transform: translate(-52%, -48%) rotate(180deg) scale(1.1); }
    75% { transform: translate(-50%, -50%) rotate(270deg) scale(1.03); }
}

@keyframes crystal-matrix {
    0%, 100% {
        transform: rotate(0deg) scale(1);
        filter: blur(0.5px) brightness(0.9) hue-rotate(0deg);
    }
    33% {
        transform: rotate(120deg) scale(1.08);
        filter: blur(0.3px) brightness(1.1) hue-rotate(60deg);
    }
    66% {
        transform: rotate(240deg) scale(1.12);
        filter: blur(0.7px) brightness(0.8) hue-rotate(120deg);
    }
}

@keyframes depth-shift {
    0% { transform: translateZ(0) rotateY(0deg); }
    100% { transform: translateZ(0) rotateY(360deg); }
}

@keyframes plasma-dance {
    0%, 100% {
        transform: rotate(0deg) scale(1) translate(0, 0);
        opacity: 0.7;
    }
    50% {
        transform: rotate(180deg) scale(1.1) translate(20px, -20px);
        opacity: 0.9;
    }
}

@keyframes quantum-drift {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; }
    25% { transform: translate(30px, -20px) rotate(90deg); opacity: 0.5; }
    50% { transform: translate(-20px, 40px) rotate(180deg); opacity: 0.7; }
    75% { transform: translate(40px, 20px) rotate(270deg); opacity: 0.4; }
    100% { transform: translate(0, 0) rotate(360deg); opacity: 0.3; }
}

body.dark-mode {
    background: radial-gradient(circle at 20% 80%, #000020 0%, #000000 100%);
}

body.dark-mode::before {
    background:
        conic-gradient(from 0deg at 20% 80%,
            rgba(50, 90, 130, 0.2) 0deg,
            rgba(100, 0, 150, 0.25) 120deg,
            rgba(0, 130, 180, 0.22) 240deg,
            rgba(50, 90, 130, 0.2) 360deg
        ),
        radial-gradient(ellipse 200% 100% at 30% 70%,
            rgba(20, 20, 80, 0.3) 0%,
            transparent 70%
        );
    filter: blur(1.2px) saturate(1.3) brightness(0.6);
}

body.dark-mode::after {
    filter: blur(0.7px) brightness(0.7) contrast(1.2);
}

.dark-mode .aurora-wrapper::before {
    mix-blend-mode: exclusion;
    filter: blur(2px) contrast(0.7) brightness(0.5);
}

.dark-mode .aurora-wrapper::after {
    opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
    body::before, body::after, .aurora-wrapper::before, .aurora-wrapper::after {
        animation-duration: 600s;
        animation-timing-function: linear;
    }
}

@media (max-width: 768px) {
    body::before { width: 300%; height: 300%; }
    body::after { width: 200%; height: 200%; }
    .aurora-wrapper::before { width: 120%; height: 120%; }
}