/* public/css/style.css */

/* Animação para o gradiente de fundo */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

body {
    /* Define o gradiente de fundo com as novas cores */
    background: linear-gradient(to right, #2C425C, #4C607C, #2C425C); /* primary-base com um tom intermediário para a transição */
    background-size: 400% 400%; /* Permite o movimento do gradiente */
    animation: gradient-animation 15s ease infinite;
}

/* Animação sutil para o ícone principal */
@keyframes bounce-subtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px); /* Movimento para cima menor */
    }
}

.animate-bounce-subtle {
    animation: bounce-subtle 2s infinite ease-in-out;
}

/*
   Resolução de especificidade para a cor do texto nos inputs.
   Isso visa garantir que a cor do texto seja sempre escura (primary-base)
   mesmo com estilos de navegadores ou preenchimento automático, que
   muitas vezes sobrescrevem cores.

   Usa !important para garantir a aplicação, o que deve ser usado com moderação,
   mas é aceitável aqui para resolver um problema de especificidade comum.
*/
.custom-input-text {
    color: #2C425C !important; /* Cor primary-base */
    -webkit-text-fill-color: #2C425C !important; /* Para navegadores WebKit (Chrome, Safari) */
    background-color: #FCFCFC !important; /* Assegura o fundo secondary-palette */
}

/* Estilo para o preenchimento automático do Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #FCFCFC inset !important; /* Força o fundo secondary-palette */
    -webkit-text-fill-color: #2C425C !important; /* Força a cor do texto */
    transition: background-color 5000s ease-in-out 0s; /* Hack para evitar a transição de cor de fundo */
}

/* Esconde elementos do Alpine.js antes de serem processados (evita "flicker") */
[x-cloak] {
    display: none !important;
}