/* =============================================================================
   MISSÃO AMAZONAS – SEM FRONTEIRAS
   Tela de login — baseada no emblema oficial (arara, onça, pôr do sol no rio).
   Tema: Floresta Amazônica ao entardecer.
   Depende das variáveis globais definidas em base.css.
   ============================================================================= */

/* ------------------------------ Container -------------------------------- */
.tela-login {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 4vw, 3rem);
    overflow: hidden;

    /* Impede seleção de texto / cursor de digitação nos textos da tela. */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Exceção: os campos precisam permanecer editáveis e selecionáveis. */
.tela-login input,
.tela-login textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

/* ==================== CENA DE FUNDO: BRASAS + ONÇA ====================== */
.cena {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 95% 85% at 50% 32%,
        #1d0f05 0%, #0d0703 55%, #050302 100%);
}

/* Vídeo da onça cobrindo a tela (tremeluzir sutil do fogo). */
.cena__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
    filter: saturate(1.05) contrast(1.04) brightness(.86);
    animation: onca-tremeluz 5s ease-in-out infinite;
    will-change: filter;
}

/* Escurecimento quente sobre o vídeo (mantém texto e emblema legíveis). */
.cena__escuro {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 3, 1, .60) 0%, rgba(10, 5, 2, .40) 42%, rgba(4, 2, 1, .84) 100%),
        linear-gradient(90deg, rgba(4, 2, 1, .52) 0%, rgba(4, 2, 1, 0) 46%, rgba(4, 2, 1, .42) 100%);
}

/* Brilho quente (luz de fogo) pulsando. */
.cena__brilho {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 55% at 50% 42%, rgba(232, 128, 46, .22) 0%, rgba(232, 128, 46, .06) 44%, rgba(232, 128, 46, 0) 72%),
        radial-gradient(ellipse 85% 55% at 50% 100%, rgba(214, 60, 20, .26) 0%, rgba(214, 60, 20, 0) 60%);
    mix-blend-mode: screen;
    animation: brilho-fogo 7s ease-in-out infinite;
    will-change: opacity, transform;
}

/* Fumaça: manchas escuras desfocadas que derivam lentamente. */
.cena__fumaca {
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(closest-side, rgba(14, 9, 6, .55), rgba(14, 9, 6, 0) 70%) -8% 62% / 62% 62% no-repeat,
        radial-gradient(closest-side, rgba(28, 16, 8, .45), rgba(28, 16, 8, 0) 70%) 108% 28% / 72% 72% no-repeat,
        radial-gradient(closest-side, rgba(8, 6, 4, .55), rgba(8, 6, 4, 0) 70%) 42% 112% / 84% 84% no-repeat;
    filter: blur(12px);
    mix-blend-mode: multiply;
    animation: fumaca 28s ease-in-out infinite alternate;
    will-change: transform;
}

/* Vinheta forte, foco no centro. */
.cena__vinheta {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 72% 70% at 50% 42%,
        rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, .74) 100%);
}

/* Canvas das brasas/faíscas (geradas em JS). */
.brasas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ============================ CONTEÚDO ================================== */
.login-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1080px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 4.5rem);
}

/* ------------------------------- Emblema -------------------------------- */
.emblema-area {
    position: relative;
    flex: 0 1 460px;
    min-width: 0;
    max-width: 100%;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    isolation: isolate;
}

.emblema {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 24px 44px rgba(2, 10, 6, .7))
            drop-shadow(0 0 26px rgba(244, 163, 64, .32));
    animation: flutuar-emblema 8s ease-in-out infinite;
    will-change: transform;
}

/* Halo dourado pulsante atrás do emblema. */
.emblema-halo {
    position: absolute;
    z-index: 1;
    inset: 4%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 163, 64, .5) 0%, rgba(244, 163, 64, .12) 45%, rgba(244, 163, 64, 0) 70%);
    filter: blur(18px);
    animation: pulsar-halo 6s ease-in-out infinite;
}

/* Anel de luz girando ao redor do emblema. */
.emblema-anel {
    position: absolute;
    z-index: 0;
    inset: -3%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(244, 163, 64, 0) 0deg,
        rgba(247, 200, 115, .55) 60deg,
        rgba(244, 163, 64, 0) 130deg,
        rgba(244, 163, 64, 0) 210deg,
        rgba(116, 198, 157, .45) 280deg,
        rgba(244, 163, 64, 0) 340deg);
    filter: blur(10px);
    opacity: .7;
    animation: girar 18s linear infinite;
}

/* ------------------------------ Cartão ---------------------------------- */
.login-card {
    flex: 1 1 380px;
    min-width: 0;
    max-width: 440px;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border-radius: calc(var(--raio) + 6px);
    background: linear-gradient(155deg, rgba(20, 45, 30, .78) 0%, rgba(9, 26, 18, .82) 100%);
    border: 1px solid rgba(247, 200, 115, .28);
    box-shadow:
        var(--sombra-cartao),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    color: var(--creme);
    animation: surgir .8s cubic-bezier(.2, .7, .2, 1) both;
}

.login-card__topo { margin-bottom: 1.6rem; }

.login-card__eyebrow {
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ouro-claro);
    font-weight: 600;
    margin-bottom: .6rem;
}

.login-card__titulo {
    font-family: var(--fonte-titulo);
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--creme);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

.login-card__sub {
    margin-top: .5rem;
    font-size: .95rem;
    color: var(--creme-escuro);
    opacity: .85;
}

/* ------------------------------- Campos --------------------------------- */
.form-login { display: flex; flex-direction: column; gap: 1.1rem; }

.campo { display: flex; flex-direction: column; gap: .45rem; }

.campo label {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--creme-escuro);
}

.campo-wrap { position: relative; display: flex; align-items: center; }

.campo-icone {
    position: absolute;
    left: 14px;
    width: 20px;
    height: 20px;
    fill: var(--ouro-claro);
    opacity: .8;
    pointer-events: none;
}

/* Inputs (recebem a classe .campo-input do formulário). */
.campo-input {
    width: 100%;
    padding: .85rem 1rem .85rem 44px;
    font-family: var(--fonte-corpo);
    font-size: .98rem;
    color: var(--creme);
    background: rgba(6, 20, 13, .55);
    border: 1px solid rgba(247, 200, 115, .22);
    border-radius: 12px;
    transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}

.campo-input::placeholder { color: rgba(231, 220, 196, .45); }

.campo-input:focus {
    outline: none;
    background: rgba(6, 20, 13, .8);
    border-color: var(--ouro);
    box-shadow: 0 0 0 3px rgba(244, 163, 64, .2);
}

/* Espaço para o botão de mostrar senha. */
.campo-wrap:has(.btn-olho) .campo-input { padding-right: 46px; }

.btn-olho {
    position: absolute;
    right: 8px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--creme-escuro);
    cursor: pointer;
    transition: color var(--transicao), background var(--transicao);
}

.btn-olho:hover { color: var(--ouro-claro); background: rgba(247, 200, 115, .12); }
.btn-olho svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: currentColor; }
.btn-olho svg[hidden] { display: none; }

.campo-erro {
    font-size: .8rem;
    color: #ffb4a2;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.campo-erro::before { content: "⚠"; font-size: .9em; }

/* --------------------------- Linha "esqueci" ---------------------------- */
.form-login__linha { display: flex; justify-content: flex-end; margin-top: -.3rem; }

.link-esqueci {
    font-size: .85rem;
    color: var(--ouro-claro);
    text-decoration: none;
    transition: color var(--transicao);
}
.link-esqueci:hover { color: var(--creme); text-decoration: underline; }

/* ----------------------------- Botão entrar ----------------------------- */
.btn-entrar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: .4rem;
    padding: .95rem 1.5rem;
    font-family: var(--fonte-titulo);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #2a1a06;
    background: linear-gradient(135deg, var(--ouro-claro) 0%, var(--ouro) 45%, var(--por-do-sol) 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 12px 26px -8px rgba(232, 128, 46, .6);
    transition: transform var(--transicao), box-shadow var(--transicao), filter var(--transicao);
}

.btn-entrar svg { width: 20px; height: 20px; fill: currentColor; transition: transform var(--transicao); }
.btn-entrar:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(232, 128, 46, .7); filter: brightness(1.05); }
.btn-entrar:hover svg { transform: translateX(4px); }
.btn-entrar:active { transform: translateY(0); }

/* Brilho que atravessa o botão. */
.btn-entrar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    animation: varredura 4.5s ease-in-out infinite;
}

/* ---------------------------- Inscreva-se ------------------------------- */
.form-login__inscreva {
    margin-top: .4rem;
    text-align: center;
    font-size: .9rem;
    color: var(--creme-escuro);
}
.form-login__inscreva a {
    color: var(--ouro-claro);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transicao);
}
.form-login__inscreva a:hover { color: var(--creme); text-decoration: underline; }

/* ============================ ANIMAÇÕES ================================= */
@keyframes brilho-fogo {
    0%, 100% { opacity: .78; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.05); }
}

@keyframes onca-tremeluz {
    0%, 100% { filter: brightness(1) saturate(1.05); }
    40%      { filter: brightness(1.13) saturate(1.12); }
    68%      { filter: brightness(.94) saturate(1); }
}

@keyframes fumaca {
    from { transform: translate3d(-2%, 1%, 0); }
    to   { transform: translate3d(3%, -2%, 0); }
}

@keyframes flutuar-emblema {
    0%, 100% { transform: translateY(0) rotate(-.4deg); }
    50%      { transform: translateY(-14px) rotate(.4deg); }
}

@keyframes pulsar-halo {
    0%, 100% { transform: scale(.96); opacity: .75; }
    50%      { transform: scale(1.06); opacity: 1; }
}

@keyframes girar { to { transform: rotate(360deg); } }

@keyframes surgir {
    from { opacity: 0; transform: translateY(22px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes varredura {
    0%, 100% { left: -60%; }
    45%, 55% { left: 120%; }
}

/* ============================ RESPONSIVO =============================== */
@media (max-width: 880px) {
    .login-wrap { flex-direction: column; gap: clamp(1rem, 4vw, 2rem); }
    .emblema-area { flex: 0 1 auto; width: min(72vw, 340px); }
    .login-card { width: 100%; max-width: 440px; }
}

@media (max-width: 420px) {
    .emblema-area { width: min(66vw, 260px); }
    .login-card { padding: 1.4rem 1.15rem; }
    .login-card__topo { margin-bottom: 1.2rem; }
}

/* Telas baixas: reduz o emblema para o cartão caber sem rolagem excessiva. */
@media (max-height: 720px) and (min-width: 881px) {
    .emblema-area { flex: 0 1 380px; }
}

/* ---------------------- Preferência: menos movimento -------------------- */
@media (prefers-reduced-motion: reduce) {
    .cena__video, .cena__brilho, .cena__fumaca, .emblema, .emblema-halo,
    .emblema-anel, .btn-entrar::after, .login-card {
        animation: none !important;
    }
    .brasas { display: none; }
}