:root {
    --x4i-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --x4i-motion-fast: 0.28s;
    --x4i-motion-base: 0.44s;
    --x4i-motion-slow: 0.64s;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body:not(.reduce-motion) .scroll-progress-bar {
    transition: width 0.24s var(--x4i-motion-ease) !important;
}

body:not(.reduce-motion) .section-nav-group-items {
    transition: max-height 0.32s var(--x4i-motion-ease), opacity 0.32s var(--x4i-motion-ease) !important;
}

body:not(.reduce-motion) .navbar,
body:not(.reduce-motion) .modal,
body:not(.reduce-motion) .modal-overlay,
body:not(.reduce-motion) .about-modal,
body:not(.reduce-motion) .about-modal-overlay,
body:not(.reduce-motion) .contact-modal,
body:not(.reduce-motion) .contact-modal-overlay,
body:not(.reduce-motion) .card,
body:not(.reduce-motion) .panel,
body:not(.reduce-motion) .loss-card,
body:not(.reduce-motion) .value-anchor-card,
body:not(.reduce-motion) .applications-carousel .card,
body:not(.reduce-motion) .about-card-vertical,
body:not(.reduce-motion) .section-nav-item,
body:not(.reduce-motion) .section-nav-toggle,
body:not(.reduce-motion) .section-nav-group-meta,
body:not(.reduce-motion) .section-nav-group-chevron,
body:not(.reduce-motion) .btn,
body:not(.reduce-motion) a,
body:not(.reduce-motion) .social-btn {
    transition-duration: var(--x4i-motion-base) !important;
    transition-timing-function: var(--x4i-motion-ease) !important;
}

body:not(.reduce-motion) [data-scroll],
body:not(.reduce-motion) .x4i-rd-reveal,
body:not(.reduce-motion) .revealed {
    transition-duration: var(--x4i-motion-slow) !important;
    transition-timing-function: var(--x4i-motion-ease) !important;
}

body:not(.reduce-motion) .animate__animated {
    animation-duration: 0.62s !important;
    animation-timing-function: var(--x4i-motion-ease) !important;
}

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