@media only screen and (min-width: 1200px) {
   /*.section-our-project__tabs .mob-slide-200 .swiper-slide {*/
   /*    width: 18vw !important;*/
   /* }*/
   .section-our-project__tabs .mob-slide-200 .p-card img {
        height: 100%!important;
    }
   .section-our-project__tabs .mob-slide-200 .p-card__image {
        height: 35.6vw!important;
    }
}
.tab-content .swiper {
    overflow: visible;
}

/* === Entrance Animation === */

.section-our-project.sa-init .sa-anim {
    opacity: 0;
    transform: translateY(2.5rem);
    transition:
        opacity 1s ease-out,
        transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.section-our-project.sa-init.sa-loaded .sa-anim {
    opacity: 1;
    transform: translateY(0);
}

.section-our-project.sa-init.sa-loaded .sa-anim.section-our-project__title {
    transition-delay: 0.1s;
}

.section-our-project.sa-init.sa-loaded .sa-anim.tab-nav-block {
    transition-delay: 0.25s;
}

.section-our-project.sa-init.sa-loaded .sa-anim.section-our-project__tabs {
    transition-delay: 0.4s;
}

@media only screen and (max-width: 991px) {
    .section-our-project.sa-init .sa-anim {
        transform: translateY(1rem);
        transition:
            opacity 0.6s ease-out,
            transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .section-our-project.sa-init.sa-loaded .sa-anim.section-our-project__title {
        transition-delay: 0.03s;
    }

    .section-our-project.sa-init.sa-loaded .sa-anim.tab-nav-block {
        transition-delay: 0.08s;
    }

    .section-our-project.sa-init.sa-loaded .sa-anim.section-our-project__tabs {
        transition-delay: 0.12s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-our-project .sa-anim {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* QA fix: skeleton-placeholder для карточек портфолио пока фото не загрузилось */
/* GPU-composited: анимируем transform псевдоэлемента, а не background-position */
@keyframes p-skel-pulse {
    0%   { transform: translate3d(-100%, 0, 0); }
    100% { transform: translate3d(100%, 0, 0); }
}

.p-card__image.is-loading {
    position: relative;
    background: #e8e8e8;
    overflow: hidden;
}
.p-card__image.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(232, 232, 232, 0) 0%,
        rgba(244, 244, 244, 1) 50%,
        rgba(232, 232, 232, 0) 100%
    );
    transform: translate3d(-100%, 0, 0);
    will-change: transform;
    animation: p-skel-pulse 1.4s ease-in-out infinite;
    pointer-events: none;
}

/* Скрываем picture/img пока идёт загрузка */
/*.p-card__image.is-loading picture,*/
/*.p-card__image.is-loading img {*/
/*    opacity: 0;*/
/*}*/

/* Плавное появление после загрузки */
.p-card__image picture,
.p-card__image img {
    transition: opacity 0.35s ease;
}

.section-our-project__tabs .p-card__image img {
    height: 100%;
}

/* Не мигаем при prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .p-card__image.is-loading::after {
        animation: none;
        display: none;
    }
    .p-card__image picture,
    .p-card__image img {
        transition: none;
    }
}
