body {
    font-family: 'DM Sans', sans-serif;
}

/* Desktop Panel Sliding Transition - GPU accelerated with smooth easing */
#image-panel,
#form-panel {
    transition: left 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                right 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: left, right, width, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Image crossfade for slider - smooth transition */
#img-front {
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Accordion Transition for Fields (Mobile & Desktop) */
.field-transition {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Text Cross-fade Transition - smoother animation */
.text-fade {
    transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Button hover lift effect */
#submit-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#submit-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(47, 128, 237, 0.4);
}

/* Login options fade */
#login-options {
    transition: opacity 0.3s ease-in-out, max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#login-options.hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Password requirements smooth reveal */
#password-requirements {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Trust signals smooth reveal */
#trust-signals {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Name and referral fields smooth reveal */
#name-field,
#referral-code-field {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stagger animation delays for sequential feel */
.auth-mode-register #name-field {
    transition-delay: 0s;
}

.auth-mode-register #referral-code-field {
    transition-delay: 0.05s;
}

.auth-mode-register #password-requirements {
    transition-delay: 0.1s;
}

.auth-mode-register #trust-signals {
    transition-delay: 0.15s;
}

/* Mobile Fixes */
@media (max-width: 1023px) {
    #image-panel {
        display: none !important;
    }
    #form-panel {
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        position: relative !important;
    }
}

/* Password toggle button hover */
#toggle-password,
#toggle-confirm-password {
    transition: color 0.2s ease-in-out;
}

/* Social buttons hover effect */
.social-auth-btn {
    transition: all 0.2s ease-in-out;
}

.social-auth-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Input focus transitions */
input[type="text"],
input[type="email"],
input[type="password"] {
    transition: border-color 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out;
}

/* Slider dot transitions */
.slider-dot {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Panel content transition for login/register switch */
#form-content-wrapper {
    transition: opacity 0.3s ease-out;
}

/* Slider text container animation */
#slider-text-container {
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Slow spinner animation for loading states */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 2s linear infinite;
}