/* ============================================================
   Pace App — animations.css
   Reveal / fade utilities used by main.js (initRevealAnimations
   and friends) plus Pace-specific keyframes.
   ============================================================ */

/* ---------- Legacy reveal classes still wired in JS ---------- */
.anim-fade-in       { opacity: 0; animation: paceFadeIn 0.6s ease-out forwards; }
.anim-fade-in-3s    { opacity: 0; animation: paceFadeIn 3s   ease-out forwards; }

@keyframes paceFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.anim-reveal,
.anim-reveal-low,
.anim-reveal-opacity,
.anim-reveal-opacity-down,
.scroll-fade-in,
.scroll-fade-in-down {
    opacity: 0;
    transform: translateY(12px);
}
.anim-reveal-opacity,
.anim-reveal-opacity-down { transform: none; }
.anim-reveal.is-visible,
.anim-reveal-low.is-visible,
.anim-reveal-opacity.is-visible,
.anim-reveal-opacity-down.is-visible,
.scroll-fade-in.is-visible,
.scroll-fade-in-down.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .6s ease, transform .6s ease;
}

/* ---------- Pace fade-up utility used in templates ---------- */
.js-fade-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
.js-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Misc ---------- */
.anim-char { display: inline-block; }

/* Respect prefers-reduced-motion: skip transitions and keep visible state. */
@media (prefers-reduced-motion: reduce) {
    .js-fade-up,
    .anim-reveal,
    .anim-reveal-low,
    .anim-reveal-opacity,
    .anim-reveal-opacity-down,
    .scroll-fade-in,
    .scroll-fade-in-down {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .pace-dots span,
    .pace-decision,
    .pace-summary__dot,
    .pace-final__goal {
        animation: none !important;
    }
}