:root {
    --motion-duration: 1080ms;
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-distance: 58px;
    --motion-shadow: 0 28px 75px rgba(15, 23, 42, 0.18);
}

[data-motion] {
    transform-origin: center center;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

[data-motion].motion-await {
    opacity: 0.001;
    filter: blur(15px);
    transition:
        opacity var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration) var(--motion-ease),
        filter calc(var(--motion-duration) * 0.9) ease;
    transition-delay: var(--motion-delay, 0ms);
}

[data-motion="reveal-up"].motion-await {
    transform: translate3d(0, var(--motion-distance), 0) scale(0.955);
}

[data-motion="reveal-down"].motion-await {
    transform: translate3d(0, calc(var(--motion-distance) * -1), 0) scale(0.955);
}

[data-motion="reveal-left"].motion-await {
    transform: translate3d(calc(var(--motion-distance) * -1), 0, 0) scale(0.955);
}

[data-motion="reveal-right"].motion-await {
    transform: translate3d(var(--motion-distance), 0, 0) scale(0.955);
}

[data-motion="zoom-in"].motion-await {
    transform: translate3d(0, 30px, 0) scale(0.84);
}

[data-motion].motion-await.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

.motion-rich-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.motion-rich-section::before,
.motion-rich-section::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.62;
    filter: blur(12px);
}

.motion-rich-section::before {
    width: 300px;
    height: 300px;
    top: -110px;
    right: clamp(12px, 5vw, 80px);
    background: radial-gradient(circle, rgba(14, 165, 233, 0.30) 0%, rgba(14, 165, 233, 0) 72%);
    animation: motion-orbit 14s ease-in-out infinite;
}

.motion-rich-section::after {
    width: 240px;
    height: 240px;
    bottom: -100px;
    left: clamp(8px, 4vw, 60px);
    background: radial-gradient(circle, rgba(20, 184, 166, 0.24) 0%, rgba(20, 184, 166, 0) 70%);
    animation: motion-orbit 18s ease-in-out infinite reverse;
}

.motion-rich-section > .container {
    position: relative;
    z-index: 1;
}

section.motion-rich-section:nth-of-type(even)::before {
    right: auto;
    left: clamp(-10px, 4vw, 70px);
    background: radial-gradient(circle, rgba(20, 184, 166, 0.28) 0%, rgba(20, 184, 166, 0) 72%);
}

section.motion-rich-section:nth-of-type(even)::after {
    left: auto;
    right: clamp(-10px, 4vw, 70px);
    background: radial-gradient(circle, rgba(59, 130, 246, 0.24) 0%, rgba(59, 130, 246, 0) 70%);
}

.motion-float.is-visible {
    animation: motion-float-y 6s ease-in-out infinite;
    animation-delay: calc(var(--motion-delay, 0ms) + 200ms);
}

.motion-pulse.is-visible {
    animation: motion-breathe 6.8s ease-in-out infinite;
    animation-delay: calc(var(--motion-delay, 0ms) + 240ms);
}

body.motion-enhanced .btn,
body.motion-enhanced .logo a,
body.motion-enhanced .client-logo,
body.motion-enhanced .service-card,
body.motion-enhanced .feature-card,
body.motion-enhanced .capability-card,
body.motion-enhanced .industry-card,
body.motion-enhanced .value-card,
body.motion-enhanced .founder-card,
body.motion-enhanced .contact-card,
body.motion-enhanced .office-details,
body.motion-enhanced .comparison-row,
body.motion-enhanced .form-container {
    transition:
        transform 280ms ease,
        box-shadow 280ms ease,
        border-color 280ms ease,
        background-color 280ms ease;
}

body.motion-enhanced .btn:hover,
body.motion-enhanced .logo a:hover {
    transform: translateY(-4px);
}

body.motion-enhanced .trust-item,
body.motion-enhanced .industry-icon,
body.motion-enhanced .feature-icon,
body.motion-enhanced .capability-icon,
body.motion-enhanced .value-icon,
body.motion-enhanced .contact-icon,
body.motion-enhanced .founder-icon {
    transition: transform 260ms ease;
}

body.motion-enhanced .trust-item:hover,
body.motion-enhanced .industry-card:hover .industry-icon,
body.motion-enhanced .feature-card:hover .feature-icon,
body.motion-enhanced .capability-card:hover .capability-icon,
body.motion-enhanced .value-card:hover .value-icon,
body.motion-enhanced .contact-card:hover .contact-icon,
body.motion-enhanced .founder-card:hover .founder-icon {
    transform: translateY(-8px) scale(1.1);
}

.hero.motion-rich-section::before,
.page-hero.motion-rich-section::before {
    width: min(36vw, 460px);
    height: min(36vw, 460px);
    top: -160px;
    opacity: 0.78;
}

.hero.motion-rich-section::after,
.page-hero.motion-rich-section::after {
    width: min(30vw, 380px);
    height: min(30vw, 380px);
    bottom: -150px;
    opacity: 0.64;
}

@keyframes motion-float-y {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -14px, 0);
    }
}

@keyframes motion-breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.035);
    }
}

@keyframes motion-orbit {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0, 34px, 0) scale(1.16);
    }
}

@media (max-width: 768px) {
    :root {
        --motion-distance: 34px;
    }

    .motion-rich-section::before,
    .motion-rich-section::after {
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    [data-motion],
    [data-motion].motion-await,
    [data-motion].motion-await.is-visible,
    .motion-rich-section::before,
    .motion-rich-section::after,
    .motion-float.is-visible,
    .motion-pulse.is-visible {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
}