/* Background Container */
.anime-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: brightness(0.9) contrast(1.1);
}

/* Upper Half (Colorful) */
.anime-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: inherit;
    filter: blur(8px);
    z-index: -1;
}

/* Lower Half (Black & White) */
.anime-background::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: inherit;
    filter: grayscale(100%) blur(8px);
    z-index: -1;
}

/* ✅ Smooth Gradient Transition Fix */
.anime-background::before {
    mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0) 85%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0) 85%);
}

.anime-background::after {
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 85%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 85%);
}

/* 📱 Mobile Optimization */
@media (max-width: 768px) {
    .anime-background::before, 
    .anime-background::after {
        filter: blur(5px); /* Lower blur for performance */
    }
}