/* Estilos das páginas de acesso dos estúdios (entrar.html e cadastro.html). */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

body.pagina-acesso { animation: none; }

.brilho-acesso {
    background:
        radial-gradient(50% 40% at 50% 0%, rgb(179 21 42 / 0.20), transparent 70%),
        radial-gradient(30% 30% at 90% 100%, rgb(239 68 88 / 0.06), transparent 70%);
}

@keyframes acesso-entrar {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
.entrada-acesso { animation: acesso-entrar 600ms var(--ease-out) both; }

/* Troca entre o formulário e a mensagem de situação */
.surgir { animation: acesso-entrar 400ms var(--ease-out) both; }

.campo {
    width: 100%;
    background: #0a0a0a;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #fff;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.campo::placeholder { color: #6b7280; }
.campo:focus { outline: none; border-color: #b3152a; box-shadow: 0 0 0 3px rgb(179 21 42 / 0.2); }
.campo[aria-invalid="true"] { border-color: rgb(248 113 113 / 0.7); }
.pl-10.campo { padding-left: 2.5rem; }
.pr-11.campo { padding-right: 2.75rem; }
select.campo { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9ca3af 50%), linear-gradient(135deg, #9ca3af 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.25rem; }

.botao-acesso { transition: transform 160ms var(--ease-out), background-color 200ms ease, opacity 200ms ease; }
.botao-acesso:active { transform: scale(0.98); }
.botao-acesso:disabled { opacity: 0.6; cursor: wait; }

@media (prefers-reduced-motion: reduce) {
    .entrada-acesso, .surgir { animation: none; }
}