/* Motion layer for service pages. Kept separate from the core service layout. */

.sps-service-single__hero::before,
.sps-service-offer h2::after,
.sps-service-cta::before {
    transition:
        width 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
        background-position 420ms ease;
}

.sps-service-single__hero-media,
.sps-service-single__hero-media img,
.sps-service-offer,
.sps-service-offer::after,
.sps-service-offer li,
.sps-service-offer li::before,
.sps-service-cta,
.sps-service-cta::after,
.sps-service-cta .wp-block-button__link {
    transition:
        transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 420ms ease,
        border-color 320ms ease,
        background-color 320ms ease,
        opacity 320ms ease;
}

/* Hero entrance. JS adds the motion classes; without JS the page stays fully visible. */
.sps-motion-ready .sps-service-single__hero-copy h1,
.sps-motion-ready .sps-service-single__excerpt,
.sps-motion-ready .sps-service-single__hero-media {
    opacity: 0;
}

.sps-motion-ready .sps-service-single__hero-copy h1 {
    transform: translateY(28px);
}

.sps-motion-ready .sps-service-single__excerpt {
    transform: translateY(20px);
}

.sps-motion-ready .sps-service-single__hero-media {
    transform: translateX(34px) scale(0.985);
}

.sps-motion-ready.is-ready .sps-service-single__hero-copy h1,
.sps-motion-ready.is-ready .sps-service-single__excerpt,
.sps-motion-ready.is-ready .sps-service-single__hero-media {
    opacity: 1;
    transform: none;
}

.sps-motion-ready.is-ready .sps-service-single__hero-copy h1 {
    transition: opacity 620ms ease 80ms, transform 720ms cubic-bezier(0.2, 0.72, 0.2, 1) 80ms;
}

.sps-motion-ready.is-ready .sps-service-single__excerpt {
    transition: opacity 620ms ease 210ms, transform 720ms cubic-bezier(0.2, 0.72, 0.2, 1) 210ms;
}

.sps-motion-ready.is-ready .sps-service-single__hero-media {
    transition: opacity 760ms ease 160ms, transform 880ms cubic-bezier(0.2, 0.72, 0.2, 1) 160ms, box-shadow 420ms ease;
}

/* Scroll reveals. */
.sps-motion-ready .sps-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 640ms ease var(--sps-reveal-delay, 0ms),
        transform 760ms cubic-bezier(0.2, 0.72, 0.2, 1) var(--sps-reveal-delay, 0ms);
}

.sps-motion-ready .sps-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Decorative motion stays slow and subtle. */
.sps-motion-ready.is-ready .sps-service-single__hero::after {
    animation: sps-service-orbit 11s ease-in-out 900ms infinite alternate;
}

.sps-motion-ready .sps-service-cta::after {
    animation: sps-service-cta-drift 10s ease-in-out infinite alternate;
}

@keyframes sps-service-orbit {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(-24px, -14px, 0) scale(1.035);
    }
}

@keyframes sps-service-cta-drift {
    from {
        transform: translateY(-50%) translateX(0) scale(1);
    }
    to {
        transform: translateY(-50%) translateX(-22px) scale(1.035);
    }
}

@media (hover: hover) and (pointer: fine) {
    .sps-service-single__hero:hover::before {
        width: clamp(138px, 12vw, 220px);
        transform: translateX(10px);
    }

    .sps-service-single__hero-media:hover {
        transform: translateY(-7px);
        box-shadow: 0 42px 96px rgba(16, 40, 60, 0.2);
    }

    .sps-service-single__hero-media:hover img {
        transform: scale(1.035);
    }

    .sps-service-offer:hover {
        transform: translateY(-5px);
        box-shadow: 0 34px 86px rgba(16, 40, 60, 0.12);
    }

    .sps-service-offer:hover::after {
        transform: translate(-18px, 14px) scale(1.06);
    }

    .sps-service-offer h2::after {
        background-size: 220% 100%;
        background-position: 0 50%;
        transform-origin: left center;
    }

    .sps-service-offer:hover h2::after {
        width: 180px;
        background-position: 100% 50%;
        transform: translateX(8px);
    }

    .sps-service-offer li:hover {
        transform: translateY(-6px);
        border-color: rgba(78, 126, 205, 0.28);
        background: #fff;
        box-shadow: 0 18px 36px rgba(16, 40, 60, 0.1);
    }

    .sps-service-offer li:hover::before {
        transform: translateY(-50%) rotate(90deg) scale(1.08);
        color: var(--sps-orange);
    }

    .sps-service-cta:hover {
        transform: translateY(-5px);
        box-shadow: 0 30px 74px rgba(9, 27, 41, 0.18);
    }

    .sps-service-cta:hover::before {
        width: 240px;
        transform: translateX(10px);
    }

    .sps-service-cta .wp-block-button__link:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 42px rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 1023px) {
    .sps-motion-ready .sps-service-single__hero-media {
        transform: translateY(24px) scale(0.99);
    }

    .sps-motion-ready.is-ready .sps-service-single__hero-media {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sps-service-single *,
    .sps-service-single *::before,
    .sps-service-single *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    .sps-motion-ready .sps-service-single__hero-copy h1,
    .sps-motion-ready .sps-service-single__excerpt,
    .sps-motion-ready .sps-service-single__hero-media,
    .sps-motion-ready .sps-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}