/* styles-aurora.css - Aurora / Gradient Mesh Background */

.aurora-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
    pointer-events: none;
    transition: background-color 0.3s ease;
}

.aurora-blob--1 {
    width: 600px;
    height: 600px;
    background-color: var(--color-primary);
    opacity: 0.4;
    top: -200px;
    left: -200px;
    animation: auroraFloat1 20s ease-in-out infinite;
    animation-delay: -5s;
}

.aurora-blob--2 {
    width: 500px;
    height: 500px;
    background-color: var(--color-tertiary);
    opacity: 0.3;
    bottom: -150px;
    right: -150px;
    animation: auroraFloat2 25s ease-in-out infinite;
    animation-delay: -12s;
}

.aurora-blob--3 {
    width: 450px;
    height: 450px;
    background-color: var(--color-secondary);
    opacity: 0.25;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: auroraFloat3 22s ease-in-out infinite;
    animation-delay: -8s;
}

@keyframes auroraFloat1 {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(50px, -40px) scale(1.08); }
    50% { transform: translate(-30px, 30px) scale(0.92); }
    75% { transform: translate(40px, 20px) scale(1.05); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes auroraFloat2 {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-40px, -30px) scale(1.06); }
    50% { transform: translate(30px, 40px) scale(0.94); }
    75% { transform: translate(-20px, -20px) scale(1.03); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes auroraFloat3 {
    0% { transform: translate(-50%, -50%) translate(0, 0) scale(1); }
    25% { transform: translate(-50%, -50%) translate(35px, -25px) scale(1.07); }
    50% { transform: translate(-50%, -50%) translate(-40px, 35px) scale(0.93); }
    75% { transform: translate(-50%, -50%) translate(25px, -15px) scale(1.04); }
    100% { transform: translate(-50%, -50%) translate(0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .aurora-blob {
        animation: none !important;
    }
}