/*
 * MallSystems reveal system, adapted from CPAS Health.
 *
 * Elements are only hidden after JavaScript enables animations, so content
 * remains available if scripts fail or are disabled. Individual translate and
 * scale properties avoid overwriting transforms used by interactive cards.
 */
.animation-loader {
    --animation-loader: ready;
}

.home-hero.uses-static-background {
    background:
        radial-gradient(circle at 18% 24%, rgb(var(--color-red-glow-rgb) / 0.34), transparent 34rem),
        radial-gradient(circle at 84% 72%, rgb(var(--color-darker-rgb) / 0.24), transparent 30rem),
        var(--color-maroon-950);
}

.reveal-on-scroll {
    --reveal-delay: 0ms;
    --reveal-distance: 34px;
    --reveal-duration: 750ms;
    --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --reveal-x: 0px;
    --reveal-y: var(--reveal-distance);
    --reveal-scale: 1;
}

body.animations-enabled .reveal-on-scroll {
    opacity: 0;
    visibility: visible;
    translate: var(--reveal-x) var(--reveal-y);
    scale: var(--reveal-scale);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: opacity, translate, scale;
}

body.animations-enabled .reveal-on-scroll.reveal-from-left {
    --reveal-x: calc(-1 * var(--reveal-distance));
    --reveal-y: 0px;
}

body.animations-enabled .reveal-on-scroll.reveal-from-right {
    --reveal-x: var(--reveal-distance);
    --reveal-y: 0px;
}

body.animations-enabled .reveal-on-scroll.reveal-scale {
    --reveal-y: 18px;
    --reveal-scale: 0.96;
}

body.animations-enabled .reveal-on-scroll.reveal-scale-up {
    --reveal-y: 42px;
    --reveal-scale: 0.92;
    transform-origin: center bottom;
}

body.animations-enabled .reveal-on-scroll.is-visible {
    animation-name: mallsystems-reveal;
    animation-duration: var(--reveal-duration);
    animation-timing-function: var(--reveal-easing);
    animation-delay: var(--reveal-delay);
    animation-fill-mode: both;
}

@keyframes mallsystems-reveal {
    from {
        opacity: 0;
        translate: var(--reveal-x) var(--reveal-y);
        scale: var(--reveal-scale);
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

body.animations-enabled .reveal-on-scroll.reveal-complete {
    opacity: 1;
    translate: none;
    scale: none;
    will-change: auto;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/*
 * Firefox and Gecko-derived browsers (including Zen) use a smaller composited
 * reveal translation, no reveal scaling, and shorter stagger windows. Card
 * hover interactions use the same full animations as the rest of the site.
 */
@supports (-moz-appearance: none) {
    html.gecko-engine body.animations-enabled .reveal-on-scroll {
        --reveal-duration: 520ms;
        --reveal-distance: 18px;
        --reveal-scale: 1;
        translate: none;
        scale: none;
        transform: translate3d(var(--reveal-x), var(--reveal-y), 0);
        will-change: opacity, transform;
    }

    html.gecko-engine body.animations-enabled .reveal-on-scroll.reveal-scale,
    html.gecko-engine body.animations-enabled .reveal-on-scroll.reveal-scale-up {
        --reveal-y: 18px;
        --reveal-scale: 1;
    }

    html.gecko-engine body.animations-enabled .reveal-on-scroll.is-visible {
        animation-name: mallsystems-reveal-gecko;
    }

    html.gecko-engine body.animations-enabled .reveal-on-scroll.reveal-complete {
        transform: none;
        will-change: auto;
    }

    html.gecko-engine :is(
        .home-hero .hero-logo-emphasis,
        .about-hero-caption,
        .about-hero-visual figcaption
    ) {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    @media (hover: hover) and (pointer: fine) {
        html.gecko-engine .services-section .service-row-card {
            translate: 0 0 !important;
            scale: 1 !important;
            transition: translate 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
                scale 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
                border-color 200ms ease, box-shadow 240ms ease;
        }

        html.gecko-engine .services-section .service-row-card:is(:hover, :focus-visible) {
            border-color: var(--color-accent);
            translate: 0 -4px !important;
            scale: 1.05 !important;
            transform: none !important;
            box-shadow: var(--card-shadow-hover);
        }
    }

    @keyframes mallsystems-reveal-gecko {
        from {
            opacity: 0;
            transform: translate3d(var(--reveal-x), var(--reveal-y), 0);
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}

@supports not (translate: 1px) {
    body.animations-enabled .reveal-on-scroll {
        transform: translate3d(var(--reveal-x), var(--reveal-y), 0)
            scale(var(--reveal-scale));
        will-change: opacity, transform;
    }

    body.animations-enabled .reveal-on-scroll.is-visible {
        animation-name: mallsystems-reveal-legacy;
    }

    body.animations-enabled .reveal-on-scroll.reveal-complete {
        transform: none;
    }

    @keyframes mallsystems-reveal-legacy {
        from {
            opacity: 0;
            transform: translate3d(var(--reveal-x), var(--reveal-y), 0)
                scale(var(--reveal-scale));
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
        }
    }
}

/* Touch layouts expose hover-only content and avoid accidental card motion. */
@media (hover: none), (pointer: coarse) {
    :is(
        .interactive-card,
        .side-interactive-card,
        .services-section .service-row-card,
        .solutions-section .solution-card,
        .process-section .step-card,
        .partner-link,
        .products-page .product-card.interactive-card
    ):is(:hover, :focus-visible) {
        transform: none !important;
    }

    .side-interactive-card .side-card-media img,
    .solutions-section .solution-card-image,
    .partner-link .partner-logo-wrap img {
        transform: none !important;
    }

    .process-section .step-card p,
    .partner-reveal {
        max-height: 16rem;
        margin-top: 0.9rem;
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loader.active {
        animation-delay: 0ms;
    }

    .loader.active .loader-logo {
        opacity: 1;
        transform: none;
        animation: none;
    }

    body.animations-enabled .reveal-on-scroll,
    body.animations-enabled .reveal-on-scroll.is-visible,
    body.animations-enabled .reveal-on-scroll.reveal-complete {
        opacity: 1;
        translate: none;
        scale: none;
        transform: none;
        animation: none;
        will-change: auto;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }
}