/*
 * ФОНОВЫЕ ИЗОБРАЖЕНИЯ САЙТА
 * -------------------------
 * Этот файл загружается последним и является понятной точкой настройки фонов.
 * Пути считаются относительно папки static_src/website/css/.
 *
 * ВАЖНО: фон первого экрана конкретного зала сюда не входит. Он загружается
 * через поле Hall.image в Django Admin и подставляется в halls/detail.html.
 */

/* Главный экран главной страницы: static_src/website/img/hero.webp. */
.first-screen {
    background-image:
        linear-gradient(90deg, #00369e 0, rgba(6, 82, 221, 0) 85%),
        var(--hero-background-image, url("../img/hero.webp"));
    background-position: 0 0, 50% 50%;
    background-size: auto, cover;
}

/*
 * На узких экранах фотография сильно обрезается из-за background-size: cover.
 * Плавно панорамируем только слой с фотографией, оставляя градиент неподвижным.
 */
@keyframes hero-mobile-pan {
    0%,
    100% {
        background-position: 0 0, 0% 50%;
    }

    50% {
        background-position: 0 0, 100% 50%;
    }
}

@media (max-width: 767.98px) {
    .first-screen {
        animation: hero-mobile-pan 15s ease-in-out infinite;
        /*
         * В исходном фото вдоль верхней кромки есть чёрный участок.
         * Небольшое увеличение оставляет его за пределами первого экрана.
         */
        background-size: auto, auto 115%;
        background-repeat: no-repeat;
    }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .first-screen {
        animation: none;
        background-position: 0 0, 50% 50%;
    }
}

/* Фон блока преимуществ: static_src/website/img/features/features-section-bg.jpg. */
.features-section {
    background-image: var(--advantages-background-image, url("../img/features/features-section-bg.jpg"));
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Серые секции остаются однотонными, без фоновых логотипов. */
.main-section:nth-of-type(even),
.schedule-section,
.map-section,
.section-contacts,
.main-form-section,
.inner-form-section,
.share-block,
.article-content {
    background-color: #f8f8f8;
    background-image: none;
}

/* Иллюстрации форм остаются самостоятельными элементами, а не водяными знаками. */
.main-form-section__content::after {
    background-image: url("../img/main-form-section-img.png");
    background-repeat: no-repeat;
    background-size: cover;
}

/* Медведь во внутренней компактной форме. */
.inner-form-section::after {
    background-image: url("../img/main-form-section-img.png");
    background-repeat: no-repeat;
    background-size: cover;
}

/* Отзывы специально остаются на чистом белом фоне, без изображения. */
#reviews {
    background-color: #fff;
    background-image: none;
}