body.login-background {
    position: relative; /* Ensure positioning context for the pseudo-element */
}

body.login-background::before {
    content: '';
    position: fixed; /* or absolute depending on your layout */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/backgrounds/bg_02.webp') no-repeat center center;
    background-size: cover;
    opacity: 0; /* start fully transparent */
    z-index: -1; /* Place the background behind the content */
    animation: fadeInBackground 1.5s forwards;
}

@keyframes fadeInBackground {
    to {
        opacity: 1; /* Fade to 0.6 opacity */
    }
}

/* Fade-out class */
body.fade-out {
    opacity: 0;
}

body {
    transition: opacity 0.8s ease;
}

/* Apply a fade-in animation to the login form */
#cardAuthentication {
    opacity: 0;
    transform: translateY(-10px); /* Slightly move up to create a smooth effect */
    animation: fadeInQuick 1.6s ease-in-out 0.3s forwards; /* 0.2s delay */
}

/* Define the keyframes for the fade-in effect */
@keyframes fadeInQuick {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}