/* Progressive motion enhancement. Content stays visible when JavaScript is off. */
@media (prefers-reduced-motion: no-preference) {
    html.motion-ready .motion-reveal {
        opacity: 0;
        transform: translateY(30px);
        transition:
            opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--motion-delay, 0ms);
        will-change: opacity, transform;
    }

    html.motion-ready .motion-reveal.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    html.motion-ready .motion-stagger-item {
        transform: translateY(26px) scale(0.98);
    }

    html.motion-ready .motion-stagger-item.is-visible {
        transform: translate3d(0, 0, 0) scale(1);
    }

    html.motion-ready .motion-reveal.motion-from-left {
        transform: translateX(-54px);
    }

    html.motion-ready .motion-reveal.motion-from-right {
        transform: translateX(54px);
    }

    html.motion-ready .motion-reveal.motion-from-left.is-visible,
    html.motion-ready .motion-reveal.motion-from-right.is-visible {
        transform: translate3d(0, 0, 0);
    }

    html.motion-ready .motion-hero-item {
        opacity: 0;
        transform: translateY(24px);
        transition:
            opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--motion-delay, 0ms);
    }

    html.motion-ready.motion-loaded .motion-hero-item {
        opacity: 1;
        transform: translateY(0);
    }

    html.motion-ready .motion-hero-image {
        filter: saturate(0.82) brightness(0.88);
        transform: scale(1.055);
        transition:
            filter 1400ms ease,
            transform 1800ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    html.motion-ready.motion-loaded .motion-hero-image {
        filter: saturate(1) brightness(1);
        transform: scale(1);
    }

    html.motion-ready .motion-navigation-item {
        opacity: 0;
        transform: translateY(-10px);
        transition:
            opacity 480ms ease,
            transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
            color 150ms ease;
        transition-delay: var(--motion-delay, 0ms);
    }

    html.motion-ready.motion-loaded .motion-navigation-item {
        opacity: 1;
        transform: translateY(0);
    }

    html.motion-ready .service-detail-content.motion-reveal > .motion-sequence-item {
        opacity: 0;
        transform: translateY(14px);
        transition:
            opacity 520ms ease,
            transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--motion-copy-delay, 0ms);
    }

    html.motion-ready .service-detail-content.motion-reveal.is-visible > .motion-sequence-item {
        opacity: 1;
        transform: translateY(0);
    }

    html.motion-ready .service-detail-content .motion-list-item {
        opacity: 0;
        transform: translateY(10px);
        transition:
            opacity 420ms ease var(--motion-list-delay, 0ms),
            transform 420ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-list-delay, 0ms),
            border-color 220ms ease,
            box-shadow 220ms ease;
    }

    html.motion-ready .service-detail-content.is-visible .motion-list-item {
        opacity: 1;
        transform: translateY(0);
    }

    html.motion-ready .value-options.motion-reveal > .motion-value-item {
        opacity: 0;
        transform: translateY(12px);
        transition:
            opacity 480ms ease,
            transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--motion-value-delay, 0ms);
    }

    html.motion-ready .value-options.motion-reveal.is-visible > .motion-value-item {
        opacity: 1;
        transform: translateY(0);
    }

    html.motion-ready .service-detail-image img {
        transform: scale(1.055);
        transition: transform 1300ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    html.motion-ready .service-detail-image.is-visible img {
        transform: scale(1);
    }

    .button {
        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    .button::before {
        position: absolute;
        z-index: 1;
        top: -80%;
        left: -45%;
        width: 28%;
        height: 260%;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.28),
            transparent
        );
        content: "";
        pointer-events: none;
        transform: rotate(18deg) translateX(-240%);
        transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .button:hover::before,
    .button:focus-visible::before {
        transform: rotate(18deg) translateX(720%);
    }

    .specialty-card,
    .intro-equipment-grid > div,
    .service-list > li {
        transition:
            border-color 220ms ease,
            box-shadow 220ms ease,
            transform 220ms ease;
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .specialty-card.motion-reveal.is-visible:hover {
        border-color: rgba(228, 186, 98, 0.58);
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
        transform: translateY(-7px);
        transition-delay: 0ms;
    }

    .intro-equipment-grid > .motion-reveal.is-visible:hover,
    .service-list > .motion-list-item:hover {
        border-color: var(--gold);
        box-shadow: 0 12px 24px rgba(17, 19, 18, 0.09);
        transform: translateY(-3px);
        transition-delay: 0ms;
    }

    .service-detail-image.is-visible:hover img {
        transform: scale(1.025);
    }
}

@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
    html.motion-ready .motion-reveal.motion-from-left,
    html.motion-ready .motion-reveal.motion-from-right {
        transform: translateY(30px);
    }

    html.motion-ready .motion-reveal.motion-from-left.is-visible,
    html.motion-ready .motion-reveal.motion-from-right.is-visible {
        transform: translate3d(0, 0, 0);
    }
}