/* =========================================================
   DS Motion / AOS clean animation layer

   Правило слоя:
   - data-aos ставится в PHP/HTML компонента до рендера страницы;
   - JS больше не угадывает и не навешивает анимации;
   - .aos-animate является единственным состоянием раскрытия;
   - ds-motion-ready не меняет видимость элементов.
   ========================================================= */

:root {
    --ds-aos-duration: 650ms;
    --ds-aos-delay: 0ms;
    --ds-aos-easing: cubic-bezier(.22, 1, .36, 1);
    --ds-aos-distance: 42px;
    --ds-aos-small-distance: 18px;
    --ds-line-duration: 650ms;
    --ds-line-delay: 0ms;
    --ds-clip-duration: 1800ms;
    --ds-mask-duration: 900ms;
}

/* =========================================================
   Base AOS protocol
   ========================================================= */

[data-aos] {
    transition-property: opacity, transform, width, height, clip-path, -webkit-clip-path;
    transition-duration: var(--ds-aos-duration);
    transition-delay: 0ms;
    transition-timing-function: var(--ds-aos-easing);
    will-change: opacity, transform;
}

[data-aos].aos-animate {
    transition-delay: var(--ds-aos-delay);
}

/* =========================================================
   Timing helpers
   ========================================================= */

[data-aos-duration="fast"] { --ds-aos-duration: 400ms; }
[data-aos-duration="base"] { --ds-aos-duration: 650ms; }
[data-aos-duration="slow"] { --ds-aos-duration: 900ms; }
[data-aos-duration="long"] { --ds-aos-duration: 1200ms; }

[data-aos-duration="400"] { --ds-aos-duration: 400ms; }
[data-aos-duration="650"] { --ds-aos-duration: 650ms; }
[data-aos-duration="800"] { --ds-aos-duration: 800ms; }
[data-aos-duration="1000"] { --ds-aos-duration: 1000ms; }
[data-aos-duration="1200"] { --ds-aos-duration: 1200ms; }
[data-aos-duration="1500"] { --ds-aos-duration: 1500ms; }
[data-aos-duration="1800"] { --ds-aos-duration: 1800ms; }
[data-aos-duration="2000"] { --ds-aos-duration: 2000ms; }

[data-aos-delay="0"] { --ds-aos-delay: 0ms; }
[data-aos-delay="1"] { --ds-aos-delay: 100ms; }
[data-aos-delay="2"] { --ds-aos-delay: 200ms; }
[data-aos-delay="3"] { --ds-aos-delay: 300ms; }
[data-aos-delay="4"] { --ds-aos-delay: 400ms; }
[data-aos-delay="5"] { --ds-aos-delay: 500ms; }

[data-aos-delay="100"] { --ds-aos-delay: 100ms; }
[data-aos-delay="200"] { --ds-aos-delay: 200ms; }
[data-aos-delay="300"] { --ds-aos-delay: 300ms; }
[data-aos-delay="400"] { --ds-aos-delay: 400ms; }
[data-aos-delay="500"] { --ds-aos-delay: 500ms; }
[data-aos-delay="600"] { --ds-aos-delay: 600ms; }
[data-aos-delay="800"] { --ds-aos-delay: 800ms; }
[data-aos-delay="1000"] { --ds-aos-delay: 1000ms; }

/* =========================================================
   Fade animations
   ========================================================= */

[data-aos="fade"] {
    opacity: 0;
}

[data-aos="fade"].aos-animate {
    opacity: 1;
}

[data-aos="fade-up"] {
    opacity: 0;
    transform: translate3d(0, var(--ds-aos-distance), 0);
}

[data-aos="fade-up"].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

[data-aos="fade-up-small"] {
    opacity: 0;
    transform: translate3d(0, var(--ds-aos-small-distance), 0);
}

[data-aos="fade-up-small"].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

[data-aos="fade-down"] {
    opacity: 0;
    transform: translate3d(0, calc(var(--ds-aos-distance) * -1), 0);
}

[data-aos="fade-down"].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

[data-aos="fade-left"] {
    opacity: 0;
    transform: translate3d(var(--ds-aos-distance), 0, 0);
}

[data-aos="fade-left"].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

[data-aos="fade-right"] {
    opacity: 0;
    transform: translate3d(calc(var(--ds-aos-distance) * -1), 0, 0);
}

[data-aos="fade-right"].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

[data-aos="scale-in"] {
    opacity: 0;
    transform: scale(.96);
}

[data-aos="scale-in"].aos-animate {
    opacity: 1;
    transform: scale(1);
}

/* =========================================================
   Lines
   Горизонтальные линии раскрываются через width.
   Вертикальные линии раскрываются через height.
   ========================================================= */

[data-aos="line-x"] {
    width: 0;
    opacity: 1;
    overflow: hidden;
    transition-property: width;
    transition-duration: var(--ds-line-duration);
    transition-delay: 0ms;
    transition-timing-function: var(--ds-aos-easing);
    will-change: width;
}

[data-aos="line-x"].aos-animate {
    width: 100%;
    transition-delay: var(--ds-line-delay);
}

[data-aos="line-y"] {
    height: 0;
    opacity: 1;
    overflow: hidden;
    transition-property: height;
    transition-duration: var(--ds-line-duration);
    transition-delay: 0ms;
    transition-timing-function: var(--ds-aos-easing);
    will-change: height;
}

[data-aos="line-y"].aos-animate {
    height: 100%;
    transition-delay: var(--ds-line-delay);
}

/* =========================================================
   Text clip
   ========================================================= */

[data-aos="text-clip"] {
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition-property: clip-path, -webkit-clip-path;
    transition-duration: var(--ds-clip-duration);
    transition-delay: 0ms;
    transition-timing-function: var(--ds-aos-easing);
    will-change: clip-path;
}

[data-aos="text-clip"].aos-animate {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition-delay: var(--ds-aos-delay);
}

/* =========================================================
   Image mask
   HTML:
   <div class="image-mask" data-aos="image-mask"><img ...></div>
   ========================================================= */

[data-aos="image-mask"] {
    position: relative;
    overflow: hidden;
    opacity: 1;
    transform: translate3d(-100%, 0, 0);
    transition-property: transform;
    transition-duration: var(--ds-mask-duration);
    transition-delay: 0ms;
    transition-timing-function: var(--ds-aos-easing);
    will-change: transform;
}

[data-aos="image-mask"]::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background: #E38B17;
    transform: translate3d(0, 0, 0);
    transition-property: transform;
    transition-duration: var(--ds-mask-duration);
    transition-delay: 120ms;
    transition-timing-function: var(--ds-aos-easing);
    pointer-events: none;
}

[data-aos="image-mask"].aos-animate {
    transform: translate3d(0, 0, 0);
}

[data-aos="image-mask"].aos-animate::before {
    transform: translate3d(100%, 0, 0);
}

.main-about--orange [data-aos="image-mask"]::before {
    background: #E38B17;
}

.main-about--green [data-aos="image-mask"]::before {
    background: #399;
}

/* =========================================================
   Slider / tabs local reveal
   Это локальные состояния, не scroll AOS.
   ========================================================= */

.swiper-slide [data-slide-aos],
.slick-slide [data-slide-aos],
[data-tab-panel] [data-tab-aos] {
    opacity: 0;
    transform: translate3d(0, var(--ds-aos-small-distance), 0);
    transition-property: opacity, transform;
    transition-duration: var(--ds-aos-duration);
    transition-delay: var(--ds-aos-delay);
    transition-timing-function: var(--ds-aos-easing);
}

.swiper-slide-active [data-slide-aos],
.slick-active [data-slide-aos],
.is-active [data-tab-aos],
.active [data-tab-aos] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* =========================================================
   Scroll text controlled by anim-spec-page.js
   ========================================================= */

.section.is--scrollable .colored_txt,
[data-ds-scroll-text] [data-ds-scroll-text-item] {
    opacity: .3;
    transition: opacity 120ms linear;
    will-change: opacity;
}

.section.is--scrollable .colored_txt.is-active,
[data-ds-scroll-text] [data-ds-scroll-text-item].is-active {
    opacity: 1;
}

/* =========================================================
   Hover states controlled by DS Motion subscribers
   ========================================================= */

[data-ds-hover-show],
.download_icon.is--show-on-hover,
.icon_arrow.is--onhover-visible {
    opacity: 0;
    transition: opacity 200ms ease;
}

[data-ds-hover-hide],
.download_icon.is--hero,
.icon_arrow.is--onhover-hidden {
    opacity: 1;
    transition: opacity 200ms ease;
}

.is-hover [data-ds-hover-show],
[data-ds-hover]:hover [data-ds-hover-show],
.dl_btn:hover .download_icon.is--show-on-hover,
.row_download:hover .download_icon.is--show-on-hover,
.row_solution-download:hover .download_icon.is--show-on-hover,
.is-hover .icon_arrow.is--onhover-visible {
    opacity: 1;
}

.is-hover [data-ds-hover-hide],
[data-ds-hover]:hover [data-ds-hover-hide],
.dl_btn:hover .download_icon.is--hero,
.row_download:hover .download_icon.is--hero,
.row_solution-download:hover .download_icon.is--hero,
.is-hover .icon_arrow.is--onhover-hidden {
    opacity: 0;
}

@media (min-width: 992px) {
    .ds-hover-service-card .service_bg-wrp {
        opacity: 0;
        transition: opacity 300ms ease;
        will-change: opacity;
    }

    .ds-hover-service-card.is-hover .service_bg-wrp {
        opacity: 1;
    }
}

.ds-hover-download-form .download_icon {
    transition: opacity 200ms ease;
}

.ds-hover-download-form .download_icon.is--form {
    opacity: 1;
}

.ds-hover-download-form .download_icon.is--form.is--telegram,
.ds-hover-download-form .download_icon.is--arrow {
    opacity: 0;
}

.ds-hover-download-form.is-hover .download_icon.is--form {
    opacity: 0;
}

.ds-hover-download-form.is-hover .download_icon.is--form.is--telegram,
.ds-hover-download-form.is-hover .download_icon.is--arrow {
    opacity: 1;
}

/* =========================================================
   Spec utility states
   ========================================================= */

html.ds-motion-lock-scroll,
html.ds-motion-lock-scroll body {
    overflow: hidden;
}

[data-ds-parallax-target],
.ds-parallax-target,
.section_hero-bg.is--about,
.foundrer_img,
.what_img-wrp.is--absolute,
.what_img,
.section_form-background,
.section_form-bg,
.section_form-img.is--consulting-top,
.final_slide-trigger,
.sticky_track,
.final_slide {
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.ds-about-horizontal-native {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ds-about-horizontal-native::-webkit-scrollbar {
    display: none;
}

.ds-about-horizontal-native .row.is--advantages {
    width: max-content;
    transform: none;
}

.ds-about-horizontal-native .horizontal-offset {
    display: none;
}

/* =========================================================
   Slider arrows protocol
   .slider_container = область поиска стрелок, класс ставит ds-motion на найденный родитель.
   .block--with-arrow-slider = row шапки со стрелками.
   .ds_slider-arrow--wrap = единственная absolute-обёртка стрелок.
   .ds_slider-arrow = сама стрелка для поиска JS.
   ========================================================= */

:root {
    --ds-slider-arrow-width: 112px;
    --ds-slider-arrow-gap: 10px;
}

.block--with-arrow-slider,
.block--with-arrow-slider .section_head,
.block--with-arrow-slider .block_head,
.block--with-arrow-slider .row.is--head,
.block--with-arrow-slider .row.is--heading,
.block--with-arrow-slider .row.is--title,
.block--with-arrow-slider .row.is--top {
    position: relative;
    padding-right: var(--ds-slider-arrow-width);
}

.block--with-arrow-slider .ds_slider-arrow--wrap {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-slider-arrow-gap);
}

.block--with-arrow-slider.is--equipment-header .ds_slider-arrow--wrap {
    right: 100px;
}

.block--with-arrow-slider .ds_slider-arrow {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin: 0;
    transform: none;
    flex: none;
    cursor: pointer;
}

.block--with-arrow-slider .ds_slider-arrow.swiper-button-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed;
}

.slider_container .ds_slider-arrow {
    margin: 0 !important;
    transform: none !important;
}

@media screen and (max-width: 767px) {
    .block--with-arrow-slider,
    .block--with-arrow-slider .section_head,
    .block--with-arrow-slider .block_head,
    .block--with-arrow-slider .row.is--head,
    .block--with-arrow-slider .row.is--heading,
    .block--with-arrow-slider .row.is--title,
    .block--with-arrow-slider .row.is--top {
        padding-right: 0;
    }

    .block--with-arrow-slider .ds_slider-arrow--wrap {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 20px;
        justify-content: flex-start;
    }
}