/* Latar 3D login Waman.
 *
 * Aset desktop dan mobile dibuat terpisah agar komposisi di tepi tidak hilang
 * karena crop. Area tengah pada keduanya sengaja tenang sehingga kartu login
 * tetap menjadi fokus dan seluruh teks/form mempertahankan kontrasnya.
 */

.login-weave {
    position: fixed;
    inset: -2.5vmax;
    z-index: 0;
    background-color: #f3f6f4;
    background-image: url("../img/waman-login-3d.webp?v=20260724a");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation: none;
    pointer-events: none;
    transform: translate3d(-.35%, -.2%, 0) scale(1.015);
    transform-origin: center;
    will-change: auto;
    backface-visibility: hidden;
}

/* Kilau hijau–emas bergerak pada lapisan terpisah agar objek 3D terasa hidup,
   tetapi tidak membuat teks atau kartu ikut bergeser. */
.login-weave::before {
    position: absolute;
    inset: -12%;
    background:
        radial-gradient(circle at 22% 38%, rgba(11, 122, 83, .10), rgba(11, 122, 83, 0) 24%),
        radial-gradient(circle at 78% 64%, rgba(196, 154, 71, .08), rgba(196, 154, 71, 0) 22%);
    content: "";
    opacity: .30;
    animation: none;
    will-change: auto;
}

/* Lapisan tipis di tengah menjaga pemisahan visual kartu dari detail 3D tanpa
   memudarkan objek di tepi. */
.login-weave::after {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse min(470px, 42vw) min(640px, 78vh) at 50% 50%,
        rgba(243, 246, 244, .34) 0%,
        rgba(243, 246, 244, .12) 68%,
        rgba(243, 246, 244, 0) 100%
    );
    content: "";
}

@media (max-width: 700px) {
    .login-weave {
        inset: -18px;
        background-image: url("../img/waman-login-3d-mobile.webp?v=20260724a");
        background-position: center;
        transform: none;
        will-change: auto;
    }

    .login-weave::before {
        opacity: .30;
        will-change: auto;
    }

    .login-weave::after {
        background: radial-gradient(
            ellipse 78% 62% at 50% 50%,
            rgba(243, 246, 244, .42) 0%,
            rgba(243, 246, 244, .14) 72%,
            rgba(243, 246, 244, 0) 100%
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-weave {
        transform: none;
        will-change: auto;
    }
}