/* V7: логотип главной — обычный PNG, а не CSS-фон.
   Файл: assets/images/logo/hero-logo.png
   Самый простой способ — заменить его своим PNG с тем же именем. */

/* =========================================================
   РОБО-ЦИРК — СМЕННЫЕ ФОНЫ (v6)

   Все переменные ниже УЖЕ указывают на файлы-плейсхолдеры из:
   assets/images/backgrounds/

   Самый простой способ заменить фон:
   1) Возьмите свою картинку.
   2) Назовите её так же, как нужный placeholder, например hero-bg.jpg.
   3) Замените старый файл в assets/images/backgrounds/.
   4) Код менять не нужно.

   Если хотите использовать другое имя файла, просто измените путь ниже.
   ========================================================= */

:root {
  /* Вся страница и крупные разделы */
  --custom-bg-page: url("../assets/images/backgrounds/page-bg.jpg");
  --custom-bg-header: url("../assets/images/backgrounds/header-bg.jpg");
  --custom-bg-hero: url("../assets/images/backgrounds/hero-bg.jpg");
  --custom-bg-about: url("../assets/images/backgrounds/about-bg.jpg");
  --custom-bg-journey: url("../assets/images/backgrounds/journey-bg.jpg");
  --custom-bg-mascots: url("../assets/images/backgrounds/mascots-bg.jpg");
  --custom-bg-booking: url("../assets/images/backgrounds/booking-bg.jpg");
  --custom-bg-footer: url("../assets/images/backgrounds/footer-bg.jpg");

  /* Основные большие блоки */
  --custom-bg-logo: url("../assets/images/backgrounds/logo-bg.jpg");
  --custom-bg-hero-mascot: url("../assets/images/backgrounds/hero-mascot-bg.jpg");
  --custom-bg-map: url("../assets/images/backgrounds/map-bg.jpg");
  --custom-bg-gallery-panel: url("../assets/images/backgrounds/gallery-panel-bg.jpg");
  --custom-bg-booking-form: url("../assets/images/backgrounds/booking-form-bg.jpg");
  --custom-bg-price-ticket: url("../assets/images/backgrounds/price-ticket-bg.jpg");
  --custom-bg-arcade-cabinet: url("../assets/images/backgrounds/arcade-cabinet-bg.jpg");

  /* 4 таблички «О нас» */
  --custom-bg-about-1: url("../assets/images/backgrounds/about-card-1-bg.jpg");
  --custom-bg-about-2: url("../assets/images/backgrounds/about-card-2-bg.jpg");
  --custom-bg-about-3: url("../assets/images/backgrounds/about-card-3-bg.jpg");
  --custom-bg-about-4: url("../assets/images/backgrounds/about-card-4-bg.jpg");
  --custom-bg-about-visual-1: url("../assets/images/backgrounds/about-visual-1-bg.jpg");
  --custom-bg-about-visual-2: url("../assets/images/backgrounds/about-visual-2-bg.jpg");
  --custom-bg-about-visual-3: url("../assets/images/backgrounds/about-visual-3-bg.jpg");
  --custom-bg-about-visual-4: url("../assets/images/backgrounds/about-visual-4-bg.jpg");

  /* 6 карточек труппы */
  --custom-bg-mascot-1: url("../assets/images/backgrounds/mascot-card-1-bg.jpg");
  --custom-bg-mascot-2: url("../assets/images/backgrounds/mascot-card-2-bg.jpg");
  --custom-bg-mascot-3: url("../assets/images/backgrounds/mascot-card-3-bg.jpg");
  --custom-bg-mascot-4: url("../assets/images/backgrounds/mascot-card-4-bg.jpg");
  --custom-bg-mascot-5: url("../assets/images/backgrounds/mascot-card-5-bg.jpg");
  --custom-bg-mascot-6: url("../assets/images/backgrounds/mascot-card-6-bg.jpg");
  --custom-bg-mascot-visual-1: url("../assets/images/backgrounds/mascot-visual-1-bg.jpg");
  --custom-bg-mascot-visual-2: url("../assets/images/backgrounds/mascot-visual-2-bg.jpg");
  --custom-bg-mascot-visual-3: url("../assets/images/backgrounds/mascot-visual-3-bg.jpg");
  --custom-bg-mascot-visual-4: url("../assets/images/backgrounds/mascot-visual-4-bg.jpg");
  --custom-bg-mascot-visual-5: url("../assets/images/backgrounds/mascot-visual-5-bg.jpg");
  --custom-bg-mascot-visual-6: url("../assets/images/backgrounds/mascot-visual-6-bg.jpg");

  /* 6 комнат на карте */
  --custom-bg-room-1: url("../assets/images/backgrounds/room-1-bg.jpg");
  --custom-bg-room-2: url("../assets/images/backgrounds/room-2-bg.jpg");
  --custom-bg-room-3: url("../assets/images/backgrounds/room-3-bg.jpg");
  --custom-bg-room-4: url("../assets/images/backgrounds/room-4-bg.jpg");
  --custom-bg-room-5: url("../assets/images/backgrounds/room-5-bg.jpg");
  --custom-bg-room-6: url("../assets/images/backgrounds/room-6-bg.jpg");

  /* 3 допуслуги в бронировании */
  --custom-bg-addon-1: url("../assets/images/backgrounds/addon-1-bg.jpg");
  --custom-bg-addon-2: url("../assets/images/backgrounds/addon-2-bg.jpg");
  --custom-bg-addon-3: url("../assets/images/backgrounds/addon-3-bg.jpg");

  /* Остальные заметные блоки */
  --custom-bg-duration-box: url("../assets/images/backgrounds/duration-box-bg.jpg");
  --custom-bg-booking-result: url("../assets/images/backgrounds/booking-result-bg.jpg");
  --custom-bg-popup-bubble: url("../assets/images/backgrounds/popup-bubble-bg.jpg");
  --custom-bg-arcade-screen-frame: url("../assets/images/backgrounds/arcade-screen-frame-bg.jpg");

  /* V11: новые страницы и контакты */
  --custom-bg-history: url("../assets/images/backgrounds/history-bg.jpg");
  --custom-bg-events: url("../assets/images/backgrounds/events-bg.jpg");
  --custom-bg-contacts: url("../assets/images/backgrounds/contacts-bg.jpg");
}

body {
  background-image:
    var(--custom-bg-page),
    radial-gradient(circle at 1px 1px, rgba(59,35,28,0.08) 1px, transparent 1.2px),
    linear-gradient(90deg, rgba(183,47,47,0.035) 1px, transparent 1px),
    linear-gradient(rgba(183,47,47,0.035) 1px, transparent 1px);
  background-size: cover, 16px 16px, 48px 48px, 48px 48px;
  background-position: center, 0 0, 0 0, 0 0;
  background-attachment: fixed, scroll, scroll, scroll;
}

.site-header {
  background-image:
    var(--custom-bg-header),
    linear-gradient(180deg, rgba(82,57,49,0.98), rgba(52,37,32,0.98));
  background-size: cover;
  background-position: center;
}

.hero {
  background-image:
    var(--custom-bg-hero),
    radial-gradient(circle at 68% 22%, rgba(242,203,103,0.18), transparent 26rem),
    linear-gradient(180deg, #8f4a36 0%, #7b3e31 52%, #5f3028 100%);
  background-size: cover, cover, cover;
  background-position: center;
}

.about { background-image: var(--custom-bg-about); }
.journey { background-image: var(--custom-bg-journey); }
.mascots { background-image: var(--custom-bg-mascots); }
.booking { background-image: var(--custom-bg-booking); }

.about,
.journey,
.mascots,
.booking {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.about-sign:nth-child(1) { background-image: var(--custom-bg-about-1); }
.about-sign:nth-child(2) { background-image: var(--custom-bg-about-2); }
.about-sign:nth-child(3) { background-image: var(--custom-bg-about-3); }
.about-sign:nth-child(4) { background-image: var(--custom-bg-about-4); }

.about-sign {
  background-size: cover;
  background-position: center;
}

.about-sign:nth-child(1) .about-sign__image { background-image: var(--custom-bg-about-visual-1); }
.about-sign:nth-child(2) .about-sign__image { background-image: var(--custom-bg-about-visual-2); }
.about-sign:nth-child(3) .about-sign__image { background-image: var(--custom-bg-about-visual-3); }
.about-sign:nth-child(4) .about-sign__image { background-image: var(--custom-bg-about-visual-4); }
.about-sign__image { background-size: cover; background-position: center; }

.venue-map {
  background-image:
    var(--custom-bg-map),
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.45), transparent 20rem),
    linear-gradient(135deg, #e3bd69, #f2d790);
  background-size: cover;
  background-position: center;
}

.gallery-panel {
  background-image:
    var(--custom-bg-gallery-panel),
    linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03));
  background-size: cover;
  background-position: center;
}

.room:nth-of-type(1) { background-image: var(--custom-bg-room-1); }
.room:nth-of-type(2) { background-image: var(--custom-bg-room-2); }
.room:nth-of-type(3) { background-image: var(--custom-bg-room-3); }
.room:nth-of-type(4) { background-image: var(--custom-bg-room-4); }
.room:nth-of-type(5) { background-image: var(--custom-bg-room-5); }
.room:nth-of-type(6) { background-image: var(--custom-bg-room-6); }
.room { background-size: cover; background-position: center; }

.mascot-card:nth-child(1) { background-image: var(--custom-bg-mascot-1); }
.mascot-card:nth-child(2) { background-image: var(--custom-bg-mascot-2); }
.mascot-card:nth-child(3) { background-image: var(--custom-bg-mascot-3); }
.mascot-card:nth-child(4) { background-image: var(--custom-bg-mascot-4); }
.mascot-card:nth-child(5) { background-image: var(--custom-bg-mascot-5); }
.mascot-card:nth-child(6) { background-image: var(--custom-bg-mascot-6); }
.mascot-card { background-size: cover; background-position: center; }

.mascot-card:nth-child(1) .mascot-card__image { background-image: var(--custom-bg-mascot-visual-1), radial-gradient(circle at 50% 30%, rgba(255,255,255,0.66), transparent 28%), repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0 14px, transparent 14px 28px); }
.mascot-card:nth-child(2) .mascot-card__image { background-image: var(--custom-bg-mascot-visual-2), radial-gradient(circle at 50% 30%, rgba(255,255,255,0.66), transparent 28%), repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0 14px, transparent 14px 28px); }
.mascot-card:nth-child(3) .mascot-card__image { background-image: var(--custom-bg-mascot-visual-3), radial-gradient(circle at 50% 30%, rgba(255,255,255,0.66), transparent 28%), repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0 14px, transparent 14px 28px); }
.mascot-card:nth-child(4) .mascot-card__image { background-image: var(--custom-bg-mascot-visual-4), radial-gradient(circle at 50% 30%, rgba(255,255,255,0.66), transparent 28%), repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0 14px, transparent 14px 28px); }
.mascot-card:nth-child(5) .mascot-card__image { background-image: var(--custom-bg-mascot-visual-5), radial-gradient(circle at 50% 30%, rgba(255,255,255,0.66), transparent 28%), repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0 14px, transparent 14px 28px); }
.mascot-card:nth-child(6) .mascot-card__image { background-image: var(--custom-bg-mascot-visual-6), radial-gradient(circle at 50% 30%, rgba(255,255,255,0.66), transparent 28%), repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0 14px, transparent 14px 28px); }
.mascot-card__image { background-size: cover, auto, auto; background-position: center; }

.booking-form {
  background-image: var(--custom-bg-booking-form);
  background-size: cover;
  background-position: center;
}

.price-ticket {
  background-image: var(--custom-bg-price-ticket);
  background-size: cover;
  background-position: center;
}

.addon-card:nth-child(1) { background-image: var(--custom-bg-addon-1); }
.addon-card:nth-child(2) { background-image: var(--custom-bg-addon-2); }
.addon-card:nth-child(3) { background-image: var(--custom-bg-addon-3); }
.addon-card { background-size: cover; background-position: center; }


.duration-box { background-image: var(--custom-bg-duration-box); background-size: cover; background-position: center; }
.booking-result { background-image: var(--custom-bg-booking-result); background-size: cover; background-position: center; }
.peek-mascot__bubble { background-image: var(--custom-bg-popup-bubble); background-size: cover; background-position: center; }
.arcade-screen-frame { background-image: var(--custom-bg-arcade-screen-frame); background-size: cover; background-position: center; }

.arcade-cabinet {
  background-image:
    var(--custom-bg-arcade-cabinet),
    linear-gradient(90deg, rgba(255,255,255,.045), transparent 22%, rgba(255,255,255,.035) 55%, transparent),
    linear-gradient(180deg, var(--red), var(--red-dark));
  background-size: cover;
  background-position: center;
}

.site-footer {
  background-image:
    var(--custom-bg-footer),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 14px, transparent 14px 28px);
  background-size: cover;
  background-position: center;
}


/* V10 note:
   Все фоновые слоты V8 сохранены.
   --custom-bg-about-visual-* и --custom-bg-mascot-visual-* остаются в файле и assets
   для совместимости, но CSS V10 намеренно не отображает их как второй фон.
*/


/* V11 */
.contacts { background-image: var(--custom-bg-contacts); background-size: cover; background-position: center; }
.history-page-hero { background-image: linear-gradient(rgba(98,48,37,.42), rgba(98,48,37,.42)), var(--custom-bg-history); }
.events-page-hero { background-image: linear-gradient(rgba(98,48,37,.42), rgba(98,48,37,.42)), var(--custom-bg-events); }