/* Animation utilities only */

/* Fade/slide reveals and spin are kept here */
@media (prefers-reduced-motion: no-preference) {
    .fade-in {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .8s ease, transform .8s ease;
    }

    .fade-in.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .reveal-left,
    .reveal-right,
    .reveal-up,
    .reveal-down,
    .reveal-spin {
        opacity: 0;
    }

    .reveal-left {
        transform: translateX(-24px);
        transition: transform .8s ease, opacity .8s ease;
    }

    .reveal-right {
        transform: translateX(24px);
        transition: transform .8s ease, opacity .8s ease;
    }

    .reveal-up {
        transform: translateY(24px);
        transition: transform .8s ease, opacity .8s ease;
    }

    .reveal-down {
        transform: translateY(-24px);
        transition: transform .8s ease, opacity .8s ease;
    }

    .reveal-spin {
        transform: scale(.9) rotate(-180deg);
        transition: transform 1s cubic-bezier(.2, .7, .2, 1), opacity .8s ease;
        transform-origin: center;
    }

    .reveal-left.is-visible,
    .reveal-right.is-visible,
    .reveal-up.is-visible,
    .reveal-down.is-visible,
    .reveal-spin.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* Navbar load animation (component can use this if desired) */
@keyframes fadeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reduced motion: no animations */
@media (prefers-reduced-motion: reduce) {

    .fade-in,
    .reveal-left,
    .reveal-right,
    .reveal-up,
    .reveal-down,
    .reveal-spin {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}