/*
 * VVKVIZ exact background v4
 * Использует ТОЧНО пользовательский файл фон.png (1920×1080).
 * Подключать последним; старые unified-visual-v3.css и hero-fix-v2.css отключить.
 */

:root {
  --vv-exact-background: url("/images/page/site-background.png");
  --vv-ink: #21106d;
  --vv-lavender: #8f72ed;
  --vv-copy: #171465;
  --vv-glass: rgba(255, 255, 255, .52);
  --vv-border: rgba(255, 255, 255, .82);
}

html {
  min-width: 320px;
  min-height: 100%;
  background: #f5efff;
}

body.hero-redesign-enabled {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  overflow-x: hidden;
  color: var(--vv-copy);

  /*
   * Единственная подложка всей страницы — точный пользовательский PNG.
   * Она не прикрепляется отдельно к hero или расписанию.
   * background-attachment: fixed визуально сохраняет один цельный холст при прокрутке.
   */
  background-color: #f5efff !important;
  background-image: var(--vv-exact-background) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  /* Исходное соотношение PNG сохраняется; фон заполняет viewport без деформации. */
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Все крупные блоки показывают один общий фон body. */
.hero-page,
main.container,
.games-section,
.benefits,
.contact-bar,
footer,
.site-footer {
  background-color: transparent !important;
  background-image: none !important;
  border-top: 0 !important;
  box-shadow: none;
}

.hero-page {
  position: relative;
  min-height: clamp(860px, 56.28vw, 941px);
  overflow: hidden;
  isolation: isolate;
}

.hero-stage {
  min-height: calc(clamp(860px, 56.28vw, 941px) - 154px);
}

/* Полностью убрать полосу и любые старые разделители/переходы. */
.hero-page::before,
.hero-page::after,
.hero-stage::before,
.hero-stage::after,
main.container::before,
main.container::after,
.games-section::before,
.games-section::after,
.hero-bottom-wave,
.wave-divider,
.section-divider,
.hero-seam,
.page-transition {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

main.container {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
}

/* Pull the schedule into the unused lower part of the desktop hero. */
@media (min-width: 768px) {
  body.hero-redesign-enabled .hero-page + main.container {
    margin-top: -120px !important;
  }
}

@media (min-width: 1024px) {
  body.hero-redesign-enabled .hero-page + main.container {
    margin-top: -270px !important;
  }
}

@media (min-width: 1600px) {
  body.hero-redesign-enabled .hero-page + main.container {
    margin-top: -300px !important;
  }
}

/* Прозрачные декоративные слои hero. */
.hero-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.hero-music-composite { z-index: 3; opacity: 1; }
.hero-bokeh { z-index: 4; opacity: .68; }
.hero-sparkles { z-index: 6; opacity: .84; }

/* Старые hero-фоны не должны загружаться одновременно. */
.hero-atmosphere {
  display: none !important;
}

.hero-header,
.hero-copy {
  position: relative;
  z-index: 10;
}

.hero-visual { position: relative; z-index: 5; }

.hero-logo-stack {
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 720 / 650;
}

.hero-logo-halo,
.hero-logo-disc {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.hero-logo-halo { z-index: 4; width: 100%; height: 100%; opacity: .92; }

.hero-logo-disc {
  z-index: 5;
  width: clamp(430px, 30.5vw, 510px);
  height: clamp(430px, 30.5vw, 510px);
  filter: drop-shadow(0 18px 38px rgba(116, 77, 190, .18)) drop-shadow(0 0 20px rgba(224, 183, 255, .20));
}

.hero-title { color: var(--vv-ink); }
.hero-subtitle { color: var(--vv-lavender); }

.game-card,
.benefits,
.contact-bar,
.hero-header {
  border: 1px solid var(--vv-border);
  background: var(--vv-glass) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@media (max-width: 1279px) {
  .hero-page { min-height: clamp(800px, 67vw, 860px); }
  .hero-stage { min-height: calc(clamp(800px, 67vw, 860px) - 120px); }
  .hero-music-composite { opacity: .72; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-logo-disc {
    width: min(35vw, 400px);
    height: min(35vw, 400px);
  }
}

@media (max-width: 1023px) {
  .hero-layer { width: 118%; left: -9%; object-position: 58% center; }
  .hero-logo-disc { width: min(40vw, 400px); height: min(40vw, 400px); }
}

@media (max-width: 767px) {
  body.hero-redesign-enabled {
    /* На узком экране сохраняется центр исходного изображения без деформации. */
    background-size: cover !important;
    background-position: center top !important;
  }

  .hero-page,
  .hero-stage { min-height: auto; }
  .hero-music-composite { opacity: .55; }
  .hero-layer { width: 150%; left: -25%; object-position: 68% center; }
  .hero-logo-disc { width: min(78vw, 370px); height: min(78vw, 370px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-disc { animation: none !important; }
}