/* 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;
    mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 90%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 90%);
}

/* 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;
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 90%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 90%);
}

/* 📱 Mobile Optimization */
@media (max-width: 768px) {
    .anime-background {
        filter: brightness(0.85) contrast(1.2); /* Slightly higher contrast for better visibility */
    }

    .anime-background::before, 
    .anime-background::after {
        filter: blur(5px); /* Lower blur for better performance */
    }

    .anime-background::after {
        filter: grayscale(50%) blur(5px); /* Slight grayscale effect for mobile */
    }
}