/* Full-viewport auth background */
.auth-body {
    min-height: 100vh;
    overflow: hidden;
}

/* Two layers we crossfade between */
.bg-layer {
    position: fixed;
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transform: scale(1.02); /* tiny zoom for subtle parallax feel */
    transition: opacity 1s ease;
    will-change: opacity;
}

    /* Active layer */
    .bg-layer.show {
        opacity: 1;
    }

/* Slight vignette / dark overlay for text legibility */
.bg-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(120% 120% at 50% 30%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.60) 100%);
    pointer-events: none;
}

/* Centering wrapper (the card is the only focus) */
.auth-wrap {
    position: relative;
    z-index: 2; /* above backgrounds */
    padding: 2rem;
}

/* Glassmorphism card */
.glass {
    /* Uses Bootstrap 5.3 CSS vars for theme-aware translucency */
    background-color: rgba(var(--bs-body-bg-rgb), 0.75);
    backdrop-filter: blur(6px);
}

.auth-card .form-control-lg {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* Optional: elevate hover */
.auth-card:hover {
    box-shadow: 0 0.75rem 2rem rgba(0,0,0,0.25);
}