.background-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    background: linear-gradient(180deg, #e8f5e8 0%, #f0f8e8 55%, #e8f5e8 100%);
}

.aurora {
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 58% 42% 53% 47% / 52% 46% 54% 48%;
    filter: blur(0px);
    opacity: 0.28;
    background: radial-gradient(circle at 40% 40%, rgba(168, 230, 207, 0.4), rgba(168, 230, 207, 0));
    animation: float 32s ease-in-out infinite;
}

.aurora-1 {
    top: -160px;
    left: -140px;
    animation-delay: 0s;
}

.aurora-2 {
    top: 50%;
    left: 60%;
    animation-delay: 6s;
    background: radial-gradient(circle at 60% 60%, rgba(220, 237, 193, 0.35), rgba(220, 237, 193, 0));
}

.aurora-3 {
    bottom: -180px;
    right: -160px;
    animation-delay: 12s;
    background: radial-gradient(circle at 50% 50%, rgba(129, 199, 132, 0.3), rgba(129, 199, 132, 0));
}

@keyframes float {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    25% {
        transform: translate3d(40px, -30px, 0) scale(1.05);
    }
    50% {
        transform: translate3d(-35px, 25px, 0) scale(0.95);
    }
    75% {
        transform: translate3d(20px, 35px, 0) scale(1.08);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (max-width: 768px) {
    .aurora {
        width: 280px;
        height: 280px;
        opacity: 0.24;
    }

    .aurora-1 {
        top: -110px;
        left: -130px;
    }

    .aurora-2 {
        top: 45%;
        left: 35%;
    }

    .aurora-3 {
        bottom: -140px;
        right: -120px;
    }
}