/**
 * aurora_background.css
 * BEM namespace: .aurora-background
 *
 * Five drifting gradient blobs behind the entire page. Pinned at z-index -1
 * so the rest of the page sits on top with a glassy translucent feel.
 *
 * Theme switches the blob blend mode and accent colours via tokens defined
 * in home_page.css.
 */

.aurora-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: var(--aurora-opacity, 0.85);
}

.aurora-background__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(var(--aurora-blur, 90px));
    mix-blend-mode: var(--aurora-blend, multiply);
    opacity: var(--aurora-blob-opacity, 0.55);
    will-change: transform;
}

.aurora-background__blob--b1 {
    width: 720px;
    height: 720px;
    top: -280px;
    left: -180px;
    background: radial-gradient(circle at center, var(--aurora-1) 0%, transparent 65%);
    animation: auroraBackgroundDrift1 32s ease-in-out infinite;
}
.aurora-background__blob--b2 {
    width: 640px;
    height: 640px;
    top: 12%;
    right: -200px;
    background: radial-gradient(circle at center, var(--aurora-2) 0%, transparent 65%);
    animation: auroraBackgroundDrift2 38s ease-in-out infinite;
}
.aurora-background__blob--b3 {
    width: 580px;
    height: 580px;
    bottom: -200px;
    left: 18%;
    background: radial-gradient(circle at center, var(--aurora-3) 0%, transparent 65%);
    animation: auroraBackgroundDrift3 30s ease-in-out infinite;
}
.aurora-background__blob--b4 {
    width: 700px;
    height: 700px;
    top: 35%;
    left: 30%;
    background: radial-gradient(circle at center, var(--aurora-4) 0%, transparent 65%);
    animation: auroraBackgroundDrift4 36s ease-in-out infinite;
}
.aurora-background__blob--b5 {
    width: 560px;
    height: 560px;
    bottom: -160px;
    right: 8%;
    background: radial-gradient(circle at center, var(--aurora-5) 0%, transparent 65%);
    animation: auroraBackgroundDrift5 28s ease-in-out infinite;
}

@keyframes auroraBackgroundDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(80px, 60px) scale(1.08); }
    66%      { transform: translate(-40px, 100px) scale(0.95); }
}
@keyframes auroraBackgroundDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-120px, 80px) scale(1.12); }
}
@keyframes auroraBackgroundDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40%      { transform: translate(60px, -80px) scale(0.92); }
    80%      { transform: translate(-50px, -40px) scale(1.06); }
}
@keyframes auroraBackgroundDrift4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(100px, -120px) scale(1.1); }
}
@keyframes auroraBackgroundDrift5 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    35%      { transform: translate(-80px, 40px) scale(1.06); }
    70%      { transform: translate(40px, -60px) scale(0.94); }
}

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