/* base transition token */
.x-anim-in {
    transition: opacity 1s ease, transform 1s ease;
}

/* navbar show/hide */
.x-nav {
    will-change: transform, opacity;
    /* можно добавить position:fixed в твоём базовом CSS, если нужно */
}

.x-hide-on-scroll {
    transform: translate3d(0, calc(-1 * (var(--nav-h, 100%) + var(--nav-extra, 12px))), 0) !important;
    opacity: 0 !important;
    transition: transform 300ms ease, opacity 200ms ease;
}

/* hero */
.x-hero,
.x-hero-bg,
.x-hero-badge,
.x-hero-item,
.x-hero-gradient {
    will-change: transform, opacity;
}

.x-hero-gradient {
    opacity: 0;
}

.x-hero-gradient-cycle {
    opacity: 1;
    animation: heroGradientBreath 6s ease-in-out infinite;
}

@keyframes heroGradientBreath {
    0% {
        transform: scale(2);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(2);
    }
}

.x-hero-image {
    transform-style: preserve-3d;
}

/* sticky */
.x-sticky-wrap .sticky-content {
    position: sticky;
    top: 10vh;
}

.x-sticky-heading {
    will-change: transform, opacity;
}

.x-sticky-logo {
    will-change: transform, opacity;
}

/* partners (horizontal marquee) */
.x-partners-lane {
    will-change: transform;
}

.partners-animation-wrapper {
    overflow: hidden;
}

/* testimonials (VERTICAL marquee) */
.x-testimonials-wrapper {
    overflow: hidden;
}

.x-testimonials-lane {
    will-change: transform;
    width: 80%;
    margin: 0 auto;
}

/* lottie */
.lottie-animation-wrapper {
    will-change: transform, opacity;
}

.lottie-animation {
    width: 100%;
    height: 100%;
}

.w-tab-content .w-tab-pane {
    will-change: opacity, transform;
}