/* Entrada das seções e do conteúdo. Só age depois que o script marca os blocos. */

:root {
    --entrada-deslocamento: 1rem;
    --entrada-duracao: 0.7s;
    --entrada-curva: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes entrada-secao {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes entrada-subir {
    from { transform: translateY(var(--entrada-deslocamento)); }
    to { transform: none; }
}

@keyframes entrada-item {
    from {
        opacity: 0;
        transform: translateY(var(--entrada-deslocamento));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    [data-entrada="secao"] {
        opacity: 0;
    }

    [data-entrada="secao"].is-in {
        animation: entrada-secao var(--entrada-duracao) var(--entrada-curva) both;
    }

    [data-entrada="subir"].is-in {
        animation: entrada-subir var(--entrada-duracao) var(--entrada-curva) both;
        animation-delay: var(--entrada-atraso, 0ms);
    }

    [data-entrada="item"] {
        opacity: 0;
        transform: translateY(var(--entrada-deslocamento));
    }

    [data-entrada="item"].is-in {
        animation: entrada-item var(--entrada-duracao) var(--entrada-curva) both;
        animation-delay: var(--entrada-atraso, 0ms);
    }
}

@media (prefers-reduced-motion: reduce), print {
    [data-entrada] {
        opacity: 1;
        transform: none;
        animation: none;
    }
}