/* Adapt Sports Academy hero motion to the existing Solutions layouts. */
body:is(.gyms-page, .solution-page) .solutions-hero-motion {
    --sa-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    overflow: hidden;
}
.solutions-hero-motion .hp-typing .hp-l { visibility: hidden; }
.solutions-hero-motion .hp-typing .hp-l.is-on { visibility: visible; }
.solutions-hero-motion .hp-typing .hp-l {
    opacity: 0;
    transition: opacity 120ms linear;
}
.solutions-hero-motion .hp-typing .hp-l.is-on { opacity: 1; }
/* Reserve space above each image and keep cards visible after their entrance. */
body:is(.gyms-page, .solution-page) .solutions-hero-motion .hero-image-container-1 {
    flex-direction: column;
}
body:is(.gyms-page, .solution-page) .solutions-hero-motion .hero-metrics-strip {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    margin-bottom: 24px;
}
body:is(.gyms-page, .solution-page) .solutions-hero-motion .hero-metric-card {
    opacity: 1;
    transition: transform 220ms var(--sa-ease-out), border-color 200ms ease, box-shadow 220ms ease;
}
body:is(.gyms-page, .solution-page) .solutions-hero-motion :is(.btn-hero, .book-demo-btn) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 200ms var(--sa-ease-out), box-shadow 200ms ease;
}
body:is(.gyms-page, .solution-page) .solutions-hero-motion :is(.btn-hero, .book-demo-btn)::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
    opacity: 0;
    transform: translateX(-150%) skewX(-20deg);
    pointer-events: none;
    transition: transform 260ms var(--sa-ease-out), opacity 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
    body:is(.gyms-page, .solution-page) .solutions-hero-motion :is(.btn-hero, .book-demo-btn):hover {
        transform: translateY(-3px);
    }
    body:is(.gyms-page, .solution-page) .solutions-hero-motion :is(.btn-hero, .book-demo-btn):hover::before {
        opacity: 1;
        transform: translateX(350%) skewX(-20deg);
    }
}
@media (prefers-reduced-motion: no-preference) {
    body:is(.gyms-page, .solution-page) .solutions-hero-motion h1 {
        animation: hp-copy-enter var(--hp-enter-duration) var(--sa-ease-out) 50ms backwards;
    }
    body:is(.gyms-page, .solution-page) .solutions-hero-motion .hero-p {
        animation: hp-copy-enter var(--hp-enter-duration) var(--sa-ease-out) 100ms backwards;
    }
    body:is(.gyms-page, .solution-page) .solutions-hero-motion :is(.btn-hero, .book-demo-btn) {
        animation: hp-pointer-enter-left var(--hp-enter-duration) var(--sa-ease-out) 160ms backwards;
    }
    body:is(.gyms-page, .solution-page) .solutions-hero-motion :is(.banner-rating, .gyms-rating-badges) {
        animation: hp-details-enter var(--hp-enter-duration) var(--sa-ease-out) 300ms backwards;
    }
    body:is(.gyms-page, .solution-page) .solutions-hero-motion .hero-image-container-1 > img.design-img {
        animation: hp-dashboard-enter var(--hp-enter-duration) var(--sa-ease-out) 100ms backwards,
            hp-dashboard-float 8s var(--sa-ease-in-out) 1000ms infinite;
    }
    body:is(.gyms-page, .solution-page) .solutions-hero-motion .hero-metric-card {
        animation: hp-pointer-enter-left 700ms var(--sa-ease-out) 300ms backwards;
    }
    body:is(.gyms-page, .solution-page) .solutions-hero-motion .hero-metric-card:nth-child(2) {
        animation-name: hp-pointer-enter-right; animation-delay: 370ms;
    }
    body:is(.gyms-page, .solution-page) .solutions-hero-motion .hero-metric-card:nth-child(3) { animation-delay: 440ms; }
    body:is(.gyms-page, .solution-page) .solutions-hero-motion .hero-metric-card:nth-child(4) {
        animation-name: hp-pointer-enter-right; animation-delay: 510ms;
    }
    @media (max-width: 991px) {
        body:is(.gyms-page, .solution-page) .solutions-hero-motion .hp-motion-observed:not(.hp-motion-visible),
        body:is(.gyms-page, .solution-page) .solutions-hero-motion .hp-chips-observed:not(.hp-chips-visible) > img.design-img {
            animation: none;
            opacity: 0;
        }
    }
}
@media (prefers-reduced-motion: reduce) {
    body:is(.gyms-page, .solution-page) .solutions-hero-motion :is(h1, .hero-p, .btn-hero, .book-demo-btn, .banner-rating, .gyms-rating-badges, .hero-metric-card, img.design-img) {
        animation: none;
        opacity: 1;
        transform: none;
        translate: none;
    }
    body:is(.gyms-page, .solution-page) .solutions-hero-motion :is(.btn-hero, .book-demo-btn)::before { display: none; }
}