/* Sistema de Onboarding - JusPrompt */

#onboarding-modal {
    animation: fadeInBackdrop 0.3s ease-out;
}

#onboarding-modal > div {
    animation: slideInModal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeInBackdrop {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInModal {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Animação dos dots de progresso */
.step-dot {
    transition: all 0.3s ease;
}

.step-dot.active {
    transform: scale(1.2);
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.3);
}

.step-dot.completed {
    transform: scale(1.1);
}

/* Animação do conteúdo dos steps */
#onboarding-content {
    min-height: 300px;
}

.step-content {
    animation: slideInContent 0.3s ease-out;
}

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

/* Hover effects nos botões */
#onboarding-modal button {
    transition: all 0.2s ease;
}

#onboarding-modal button:hover {
    transform: translateY(-1px);
}

#onboarding-modal button:active {
    transform: translateY(0);
}

/* Animação do input de username */
#username-input {
    transition: all 0.2s ease;
}

#username-input:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
}

/* Proteção do @ no input */
.username-container {
    position: relative;
}

.username-at {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #fbbf24;
    font-weight: bold;
    font-size: 1.125rem;
    pointer-events: none;
    user-select: none;
    z-index: 10;
}

/* Garantir que o texto do input não sobreponha o @ */
#username-input {
    padding-left: 2.5rem !important;
}

/* Feedback de username */
#username-feedback {
    transition: all 0.3s ease;
}

/* Gradientes animados */
.gradient-bg {
    background: linear-gradient(-45deg, #1f2937, #111827, #0f172a, #1e293b);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Ícones com animação */
.icon-bounce {
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Responsividade */
@media (max-width: 640px) {
    #onboarding-modal > div {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }
    
    #onboarding-content {
        min-height: 250px;
    }
}

/* Loading state */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}