@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { 
        opacity: 0;
        transform: translateX(20px);
    }
    to { 
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.4s ease-out forwards;
}

.animate-slideInRight {
    animation: slideInRight 0.4s ease-out forwards;
}

.form-container {
    @apply h-full transition-all duration-500 ease-in-out;
}

.form-initial {
    @apply w-full max-w-4xl p-8 bg-white lg:rounded-tl-[150px] lg:rounded-br-[150px] rounded-bl-md rounded-tr-md shadow-[0_12px_4px_-2px_rgba(0,0,0,0.3)];
}

.form-expanded {
    @apply w-full max-w-7xl flex overflow-hidden bg-white lg:rounded-tl-[150px] lg:rounded-br-[150px] rounded-bl-md rounded-tr-md shadow-[0_12px_4px_-2px_rgba(0,0,0,0.3)];
}

.greeting-side {
    @apply flex-1 p-12 flex flex-col justify-center items-center text-center;
}

.form-side {
    @apply p-4 flex flex-col justify-center;
}

@media (max-width: 425px) {
    .form-expanded {
        @apply flex-col;
    }
    
    .greeting-side,
    .form-side {
        @apply p-4;
    }
}