/*
 * totem.css
 * Ajustes de comportamento para tela de toque. Não altera posições, tamanhos,
 * cores ou imagens: apenas transições e respostas ao toque.
 */

/*
 * Transição entre as telas do fluxo.
 * A tela (e sua imagem de fundo) aparece na hora; só o conteúdo faz um fade curto.
 * Assim o fundo nunca "pisca" e nada muda de posição (sem transform).
 */
[data-pagina].d-block > * {
    animation: totem-conteudo-in 0.18s ease-out both;
}

@keyframes totem-conteudo-in {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    [data-pagina].d-block > * {
        animation: none;
    }
}

/* Remove o atraso de 300ms e o zoom por duplo toque em botões, links e campos. */
button,
a,
label,
input,
select,
textarea,
.radio-label,
.botao-avancar,
.botao-voltar {
    touch-action: manipulation;
}

/* Evita seleção de texto e o menu de "copiar/colar" ao segurar o dedo na tela. */
body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

/* Imagens não devem ser "arrastadas" com o dedo. */
img {
    -webkit-user-drag: none;
    user-drag: none;
}