/* Aurora Background Effect */

/* Base Background */
body {
    background-color: var(--c-bg);
    position: relative;
    overflow-x: hidden;
}

/* Aurora Container */
body::before,
body::after {
    content: '';
    position: fixed;
    /* Increase size to allow rotation without showing edges */
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: var(--z-negative);
    pointer-events: none;

    background-size: 100% 100%;
    will-change: transform;
}

/* Primary Aurora (Blue/Violet) - Deformed */
body::before {
    background: radial-gradient(ellipse at center,
            color-mix(in srgb, var(--c-primary), transparent 80%) 0%,
            transparent 60%);
    animation: aurora-shift-1 60s ease-in-out infinite alternate;
    opacity: 0.6;
}

/* Secondary Aurora (Pink/Purple) - Deformed */
body::after {
    background: radial-gradient(ellipse at center,
            color-mix(in srgb, var(--c-secondary), transparent 80%) 0%,
            transparent 60%);
    animation: aurora-shift-2 80s ease-in-out infinite alternate-reverse;
    opacity: 0.6;
}

/* Moving Deformations */
@keyframes aurora-shift-1 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1, 1);
    }

    33% {
        transform: translate(10%, 10%) rotate(10deg) scale(1.2, 0.8);
    }

    66% {
        transform: translate(-10%, 5%) rotate(-5deg) scale(0.9, 1.1);
    }

    100% {
        transform: translate(5%, -5%) rotate(5deg) scale(1.1, 0.9);
    }
}

@keyframes aurora-shift-2 {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1.1, 0.9);
    }

    33% {
        transform: translate(-10%, -5%) rotate(-10deg) scale(0.9, 1.1);
    }

    66% {
        transform: translate(5%, -10%) rotate(5deg) scale(1.2, 0.8);
    }

    100% {
        transform: translate(-5%, 5%) rotate(-5deg) scale(1, 1);
    }
}

/* Shadow & Glow Effects */
.shadow-primary-glow {
    box-shadow: 0 4px 20px -5px rgba(var(--c-primary-rgb), 0.4);
}

.shadow-secondary-glow {
    box-shadow: 0 4px 20px -5px rgba(var(--c-secondary-rgb), 0.4);
}

.shadow-lg {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
}