/* html {
    overflow: hidden;
    min-height: 100%;
    height: 100%;
} */

body {
    background: #F1EFF2;
    font-family: "Montserrat", sans-serif;
    font-style: normal;

}

/* === Появление по одному === */
.remark.is-hidden {
    opacity: 0;
    transform: translateY(8px);
}

.remark,
.remark.is-in {
    transition: opacity .3s ease, transform .3s ease;
}

.remark.is-in {
    opacity: 1;
    transform: translateY(0);
}

/* === База === */
.remark {
    will-change: transform;
    transition: transform .35s ease, opacity .35s ease;
}

.remark-card {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .8);
    color: rgba(0, 0, 0, .8);
    padding: 1rem 1.5rem;
    min-height: 4rem;
    display: inline-flex;
    align-items: center;
    font-size: 1.125rem;
    transition: transform .35s ease, opacity .35s ease, color .45s ease;
    isolation: isolate;
    /* <-- [FIX] даём собственный стек слоёв */
}

/* Заливка под контентом */
.remark-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #BF5B5B;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease;
    border-radius: inherit;
    z-index: 0;
    /* <-- под всем */
}

/* Контент всегда поверх обоих псевдо-элементов */
.remark-card>* {
    position: relative;
    z-index: 2;
    /* <-- [FIX] выше ::after */
}

/* Хвост справа (межслойный) */
.remark-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 44px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, .12) 100%);
    opacity: 0;
    transition: opacity .45s ease, background .45s ease;
    pointer-events: none;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    z-index: 1;
    /* <-- между ::before и контентом */
}

/* === Во время заливки === */
.remark-card.is-filling::before {
    transform: scaleX(1);
}

/* белый текст сверху */
.remark-card.is-filling {
    color: #fff;
}

/* заставим дочерние элементы следовать цвету карточки */
.remark-card.is-filling * {
    color: currentColor;
    /* если внутри были утилиты text-*, они не должны перебить */
    fill: currentColor;
    stroke: currentColor;
}

/* хвост светлее, чтобы не забивать белый текст */
.remark-card.is-filling::after {
    opacity: .35;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .35) 100%);
}

/* === После === */
.remark-card.is-done {
    background: rgba(255, 255, 255, .8);
    color: rgba(0, 0, 0, .3);
}

/* уважение reduced motion */
@media (prefers-reduced-motion: reduce) {

    .remark,
    .remark.is-in,
    .remark-card,
    .remark-card::before,
    .remark-card::after {
        transition: none !important;
    }
}


.swiper-slide-thumb-active {
    opacity: 1;
}

@keyframes scroll-x {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* бесконечный скролл: двигаем ленту на половину её длины,
   так как контент продублирован 2 раза подряд */
@media(max-width:640px) {
    @keyframes scroll-x {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-200%);
        }
    }

}


/* уважение reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .marquee {
        animation: none !important;
        transform: none !important;
    }
}

/* стек не обрезаем */

/* контейнер не обрезает стек */
.work-swiper,
.work-swiper .swiper-wrapper {
    overflow: visible;
    width: 400px;
}
@media(max-width:575px){
    
/* контейнер не обрезает стек */
.work-swiper,
.work-swiper .swiper-wrapper {

    width: 300px;
}
}
/* ширина каждой карточки — большая, как на макете */
.work-swiper .swiper-slide {

    pointer-events: none;
}

.work-swiper .swiper-slide-active {
    pointer-events: auto;
}

.work-swiper .card {
    border-radius: 28px;
    background: #fff;
}


/* сам слайд — flex, чтобы контент мог растянуться */
.work-swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    height: auto;
    filter: blur(4px);
}

.work-swiper .swiper-slide-active {
    filter: blur(0px);
    position: relative;
    z-index: 100 !important;
}

/* .swiper-slide-2 {
    transform: translate(-100px, 0);
} */