/* ANIMATION STYLES */

/* Sign Up Mode Animations */
.auth-container.sign-up-mode:before {
    transform: translate(100%, -50%);
    right: 52%;
}

.auth-container.sign-up-mode .left-panel .image,
.auth-container.sign-up-mode .left-panel .content {
    transform: translateX(-800px);
}

.auth-container.sign-up-mode .right-panel .content, 
.auth-container.sign-up-mode .right-panel .image {
    transform: translateX(0px);
}

.auth-container.sign-up-mode .left-panel {
    pointer-events: none;
}

.auth-container.sign-up-mode .right-panel {
    pointer-events: all;
}

.auth-container.sign-up-mode .login-signup {
    left: 25%;
}

.auth-container.sign-up-mode form.sign-in-form {
    z-index: 1;
    opacity: 0;
}

.auth-container.sign-up-mode form.sign-up-form {
    z-index: 2;
    opacity: 1;
}

/* Logo Animation */
.auth-container.sign-up-mode .logo {
    animation: rotateLogo 0.6s ease-in-out;
}

@keyframes rotateLogo {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Form Transition Animations */
.sign-in-form, .sign-up-form {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.auth-container.sign-up-mode .sign-in-form {
    transform: translateX(-20px);
}

.auth-container:not(.sign-up-mode) .sign-up-form {
    transform: translateX(20px);
}

/* Button Hover Animation */
.btn:hover {
    transform: scale(1.05);
}

.btn.transparent:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Input Field Focus Animation */
.input-field input:focus ~ i {
    color: var(--navy-blue);
    transition: color 0.3s ease;
}

.input-field:focus-within {
    box-shadow: 0 0 8px rgba(30, 43, 80, 0.3);
    transition: box-shadow 0.3s ease;
}