html, body {
    overflow-x: hidden;
}

/* Первый экран и шапка */
body {
    transition: background-position 2s ease-out;
    background-position: center -30px;
}
body.loaded {
    background-position: center 0px;
}

.trapezoid, .page-banner {
    opacity: 0;
    transition: opacity 2s ease-out;
}
body.loaded .trapezoid, body.loaded .page-banner {
    opacity: 1;
}

/* Общие стили для анимаций при прокрутке */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
    will-change: opacity, transform;
}

/* Форма "есть предложение" */
.best-offer {
    opacity: 0;
    transition: opacity 2s ease-out;
}
.best-offer.animated {
    opacity: 1;
}

/* Преимущества - заголовок и карточки */
.advantages-title.animate-on-scroll {
    transform: translateY(-50px);
}
.advantages-title.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.advantages-card.animate-on-scroll {
    transform: translateY(50px);
}
.advantages-card.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Карточка модели */
.model-card {
    position: relative;
    background-image: none !important;
}

.model-card.animate-on-scroll {
    opacity: 1;
    transform: none;
}

.model-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--model-bg);
    background-repeat: no-repeat;
    background-position: 370px -25px;
    background-size: 50%;
    opacity: 0;
    transition: opacity 1.5s ease-out;
    z-index: 0;
    pointer-events: none;
}
@media (max-width: 991.98px) {
    .model-card::before {
        background-position: 70px 125px;
        background-size: 70%;
    }
}
.model-card.animated::before {
    opacity: 1;
}

.model-card .model-image {
    opacity: 0;
    transition: opacity 1.5s ease-out;
    z-index: 1;
}
.model-card.animated .model-image {
    opacity: 1;
}

/* Контент слева (логотип, выгода, преимущества, кнопки) */
.model-left-col {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    z-index: 2;
    position: relative;
}
.model-card.animated .model-left-col {
    opacity: 1;
    transform: translateX(0);
}

/* Контент справа (спецификации и запуск квиза) */
.model-right-col {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    z-index: 2;
    position: relative;
}
.model-card.animated .model-right-col {
    opacity: 1;
    transform: translateX(0);
}

/* Размеры снизу */
.model-sizes {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    z-index: 2;
    position: relative;
}
.model-card.animated .model-sizes {
    opacity: 1;
    transform: translateY(0);
}

/* Галерея снизу */
.model-gallery.animate-on-scroll {
    transform: translateY(40px);
}
.model-gallery.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Автомобили в наличии */
.cis-header.animate-on-scroll {
    transform: translateY(-30px);
}
.cis-header.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.cis-card-slide.animate-on-scroll {
    transform: translateY(50px);
}
.cis-card-slide.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Секции схождения к центру: Выбрать автомобиль (quiz) и Контакты */
.slide-from-left.animate-on-scroll {
    transform: translateX(-60px);
}
.slide-from-left.animate-on-scroll.animated {
    opacity: 1;
    transform: translateX(0);
}

.slide-from-right.animate-on-scroll {
    transform: translateX(60px);
}
.slide-from-right.animate-on-scroll.animated {
    opacity: 1;
    transform: translateX(0);
}