/* Scroll motion for the intro site */

.scroll-progress {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    z-index: 40;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-blue-light, #2E68C6), var(--brand-blue, #1C3586));
    transform: scaleX(0);
    transform-origin: var(--progress-origin, right center);
    pointer-events: none;
    will-change: transform;
}

header {
    transition: background-color 0.45s ease, box-shadow 0.45s ease;
}

header.is-scrolled {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 28px rgba(21, 35, 75, 0.1);
    backdrop-filter: saturate(1.15) blur(14px);
}

#home,
#who_we,
#how_work,
#our_service,
#maintenance_types,
#why_choose,
#download_apps,
#stats_counter,
#customer_reviews,
#FAQ,
#connect_us {
    scroll-margin-top: 96px;
}

html.motion-ok [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

html.motion-ok [data-reveal="start"] {
    transform: translate3d(var(--reveal-start-x, 36px), 20px, 0);
}

html.motion-ok [data-reveal="end"] {
    transform: translate3d(var(--reveal-end-x, -36px), 20px, 0);
}

html.motion-ok [data-reveal="scale"] {
    transform: translate3d(0, 18px, 0) scale(0.95);
}

html.motion-ok [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (max-width: 767.98px) {
    html.motion-ok [data-reveal],
    html.motion-ok [data-reveal="start"],
    html.motion-ok [data-reveal="end"] {
        transform: translate3d(0, 18px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-progress {
        display: none;
    }

    html.motion-ok [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}