/*
 * ============================================================
 * ENTRADA — CADA COISA ENTRA POR ONDE FAZ SENTIDO
 * ============================================================
 * Autor: Hacker 0 5 90
 *
 * Quatro movimentos, e cada um diz uma coisa diferente:
 *
 *   · o CABEÇALHO desce — vem de cima, que é onde ele vive;
 *   · o CONTEÚDO sobe — a página assenta debaixo do cabeçalho;
 *   · os CARTÕES e os CAMPOS deslizam de lado — entram em fila, um a seguir
 *     ao outro, e a fila lê-se da esquerda para a direita como o texto;
 *   · os POPUPS crescem do centro — não vêm de lado nenhum porque não estão
 *     em lado nenhum: aparecem por cima de tudo, e o zoom diz isso.
 *
 * A CURVA
 * -------
 * `cubic-bezier(0.16, 1, 0.3, 1)` — arranca depressa e assenta devagar. É o
 * movimento de uma coisa com peso a ser pousada, e não o de uma coisa a ser
 * arrastada a velocidade constante. É daqui que vem quase toda a diferença
 * entre uma animação que parece cara e uma que parece um trabalho de escola.
 *
 * A PRIMEIRA VERSÃO ERA SUBTIL DE MAIS
 * ------------------------------------
 * Oito pixéis e 260 milissegundos. Corria — media-se e estava lá — mas num
 * telemóvel, com o conteúdo a chegar aos poucos, ninguém dava por ela. Uma
 * animação que não se vê é tempo de processador gasto a não fazer nada.
 *
 * QUEM PEDE PARA NADA SE MEXER, NÃO VÊ NADA MEXER
 * -----------------------------------------------
 * `prefers-reduced-motion` não é preferência de gosto: há quem tenha enxaqueca
 * vestibular ou perturbações de equilíbrio a quem o movimento faz mal. Aí tudo
 * aparece instantaneamente, no lugar certo.
 */

:root {
    --tp-entrada-curva: cubic-bezier(0.16, 1, 0.3, 1);
    --tp-entrada-passo: 55ms;
}

/* ---------- o cabeçalho desce ---------- */

@keyframes tp-desce {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- o conteúdo sobe ---------- */

@keyframes tp-sobe {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- os cartões e os campos entram de lado ---------- */

@keyframes tp-lado {
    from {
        opacity: 0;
        transform: translateX(-34px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Menor nos campos: um formulário inteiro a varrer trinta e quatro pixéis
   parece uma página a cair, e não um campo a aparecer. */
@keyframes tp-lado-curto {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- os popups crescem ---------- */

@keyframes tp-zoom {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* O fundo escuro por trás do popup não cresce: aparece. Escalá-lo dava a ver
   os cantos da página por baixo. */
@keyframes tp-fundo {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
   AS CLASSES, POSTAS PELO js/animacao-entrada.js
   ============================================================ */

.tp-entra {
    /* `both` guarda o estado inicial antes de a animação arrancar: sem isso o
       elemento pisca no sítio final durante o atraso, e a entrada perde-se.
       O estado final é `transform: none`, que não deixa contexto de
       empilhamento nenhum para trás — importante nos cabeçalhos fixos. */
    animation-duration: 460ms;
    animation-timing-function: var(--tp-entrada-curva);
    animation-fill-mode: both;
    animation-delay: calc(var(--tp-ordem, 0) * var(--tp-entrada-passo));
    /* Só durante a animação: deixar `will-change` para sempre obriga o browser
       a manter uma camada por elemento, e numa lista longa isso come memória. */
    will-change: opacity, transform;
}

.tp-entra.tp-entrou {
    will-change: auto;
}

.tp-entra--desce { animation-name: tp-desce; animation-duration: 420ms; }
.tp-entra--sobe { animation-name: tp-sobe; }
.tp-entra--lado { animation-name: tp-lado; }
.tp-entra--campo { animation-name: tp-lado-curto; animation-duration: 380ms; }

/* Os popups são rápidos: eles aparecem em resposta a um toque, e qualquer
   coisa acima de trezentos milissegundos lê-se como demora. */
.tp-entra--zoom { animation-name: tp-zoom; animation-duration: 280ms; }
.tp-entra--fundo { animation-name: tp-fundo; animation-duration: 220ms; }

/*
 * O que ainda está a entrar não apanha o toque: num cartão a meio do
 * movimento, um dedo mais rápido carrega no que ainda não está onde parece.
 */
.tp-entra:not(.tp-entrou) {
    pointer-events: none;
}

/* ============================================================
   OS POPUPS, ANIMADOS PELO CSS E NÃO PELO JS
   ============================================================
   Estes já existem no DOM e só ganham uma classe quando abrem — o observador
   de elementos novos não os vê nascer, porque eles não nascem. Prende-se a
   animação à classe que os abre, que é o momento que interessa.
   ============================================================ */

.mp-confirmar-fundo.is-aberto,
.tp-permissoes-fundo.is-aberto,
.tp-offline.is-aberto {
    animation: tp-fundo 220ms var(--tp-entrada-curva) both;
}

.mp-confirmar-fundo.is-aberto .mp-confirmar-caixa,
.tp-permissoes-fundo.is-aberto .tp-permissoes-caixa,
.tp-offline.is-aberto .tp-offline-caixa,
.tp-popup-overlay.show .tp-popup-card,
.tp-select-popup.is-aberto .tp-select-popup__dialog {
    animation: tp-zoom 280ms var(--tp-entrada-curva) both;
}

/* As folhas que sobem de baixo mantêm o gesto delas — subir. Fazê-las crescer
   do centro contrariava o sítio de onde vêm. */
.bottom-sheet.open,
.picker-sheet.open,
.ad-bottom-sheet.open,
.kit-folha.open {
    animation: tp-sobe 340ms var(--tp-entrada-curva) both;
}

@media (prefers-reduced-motion: reduce) {
    .tp-entra,
    .mp-confirmar-fundo.is-aberto,
    .mp-confirmar-fundo.is-aberto .mp-confirmar-caixa,
    .tp-permissoes-fundo.is-aberto,
    .tp-permissoes-fundo.is-aberto .tp-permissoes-caixa,
    .tp-offline.is-aberto,
    .tp-offline.is-aberto .tp-offline-caixa,
    .tp-popup-overlay.show .tp-popup-card,
    .tp-select-popup.is-aberto .tp-select-popup__dialog,
    .bottom-sheet.open,
    .picker-sheet.open,
    .ad-bottom-sheet.open,
    .kit-folha.open {
        animation: none;
        opacity: 1;
        transform: none;
        will-change: auto;
    }
    .tp-entra:not(.tp-entrou) {
        pointer-events: auto;
    }
}