/* ========================================================
   MAHIKARI · BACKGROUND & CINEMATIC BANNER STAGE
   Ultra-Crisp 16:9 Artwork Presentation · Zero Blurry Fog
======================================================== */

.banner-stage,
.banner-layer,
.starry-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

.banner-stage {
    z-index: 0;
    overflow: hidden;
    background-color: #030408;
}

/* 6 Pre-Rasterized GPU Waifu Layers */
.banner-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 25%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.6s var(--ease-out-quint);
    transform: translateZ(0);
    will-change: opacity;
    filter: contrast(1.02) saturate(1.04);
}

.banner-layer.active {
    opacity: 1;
    z-index: 1;
}

/* Cinematic controlled vignette — keeps the image crystal-clear while providing subtle contrast */
.banner-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(3, 5, 12, 0.35) 0%, rgba(3, 5, 12, 0.85) 100%);
    pointer-events: none;
    z-index: 2;
}

body.light-mode .banner-stage::after {
    background: radial-gradient(
        circle at 50% 50%,
        rgba(240, 244, 250, 0.28) 0%,
        rgba(235, 240, 248, 0.68) 100%
    );
}

/* Minimalist ambient canvas */
.starry-bg {
    z-index: 2;
    mix-blend-mode: screen;
}

body.light-mode .starry-bg {
    opacity: 0.22;
    mix-blend-mode: multiply;
}