/*
 * Altéria — revelações ao scroll
 *
 * Tudo está prefixado com `html.js` de propósito: sem JavaScript
 * a classe nunca é adicionada e o conteúdo permanece visível.
 */

html.js [data-animation] {
    opacity: 0;
    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

html.js [data-animation="fade-up"] {
    transform: translateY(var(--reveal-distance));
}

html.js [data-animation="fade-down"] {
    transform: translateY(calc(var(--reveal-distance) * -1));
}

html.js [data-animation="fade-left"] {
    transform: translateX(var(--reveal-distance));
}

html.js [data-animation="fade-right"] {
    transform: translateX(calc(var(--reveal-distance) * -1));
}

html.js [data-animation="scale"] {
    transform: scale(0.97);
}

html.js [data-animation].is-visible {
    opacity: 1;
    transform: none;
}

/*
 * Aplicado pelo JS no fim da transição: elimina o delay residual
 * (que atrasava os hovers) e liberta a camada GPU.
 */
html.js [data-animation].is-revealed {
    transition-delay: 0s;
    will-change: auto;
}

/* Escalonamento — 70ms entre elementos, não 120ms */
html.js [data-animation-delay="100"] { --reveal-delay: calc(var(--reveal-stagger) * 1); }
html.js [data-animation-delay="200"] { --reveal-delay: calc(var(--reveal-stagger) * 2); }
html.js [data-animation-delay="300"] { --reveal-delay: calc(var(--reveal-stagger) * 3); }
html.js [data-animation-delay="400"] { --reveal-delay: calc(var(--reveal-stagger) * 4); }
html.js [data-animation-delay="500"] { --reveal-delay: calc(var(--reveal-stagger) * 5); }

/*
 * Variante "linha": cresce em largura em vez de deslizar.
 * Uma linha de 38px a viajar 24px na horizontal fica estranha.
 */
html.js [data-animation="line"] {
    width: 0;
    opacity: 1;
    transition: width var(--reveal-duration) var(--reveal-ease);
    transition-delay: var(--reveal-delay, 0ms);
}

html.js [data-animation="line"].is-visible {
    width: var(--line-width, 38px);
}

/*
 * Durante scroll programático (clique numa âncora), as revelações
 * que a página atravessa em voo aparecem de imediato em vez de
 * animarem a meio caminho.
 */
html[data-scrolling] [data-animation] {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {

    html.js [data-animation] {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }

    html.js [data-animation="line"] {
        width: var(--line-width, 38px);
        transition: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}