/* V21 — фиксированный фоновый слой на всю страницу. Прокрутка перематывает
   видео по кадрам, шкала растянута на всю высоту документа. */
body.site-cube-page {
  background-color: #02050a;
  background-image: none;
  background-attachment: initial;
}

.site-cube-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #02050a;
  contain: strict;
}

.site-cube-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  /* Подобрано под нейтральный рендер V21: прежний синий был светлее сам по себе. */
  filter: contrast(1.10) brightness(1.12);
  transform: none;
}

/* Чёрный фон впечён в видео, поэтому подменяем его наложением «светлее»:
   оно поднимает только тёмные области, а куб и осколки оставляет как есть.
   Затемнение краёв сохраняется само собой — к краям подъём сходит на нет. */
.site-cube-bg__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  mix-blend-mode: lighten;
  background: radial-gradient(ellipse 130% 95% at 52% 34%,
    #1e2d3c 0%,
    #16232f 34%,
    #0b131b 66%,
    #04080d 100%);
}

.site-cube-page > header,
.site-cube-page > main,
.site-cube-page > footer {
  position: relative;
}

.site-cube-page > main,
.site-cube-page > footer {
  z-index: 1;
}

.site-cube-page > header {
  z-index: 60;
}

/* Анимация видна сквозь страницу, но не в ущерб читаемости. */
.site-cube-page .cine {
  background: transparent;
}

.site-cube-page .cine .cine-bg {
  background: transparent;
}

.site-cube-page .cine .cine-grid {
  z-index: 1;
  opacity: .42;
}

.site-cube-page .cine .cine-scrim {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(3, 6, 10, .95) 0%, rgba(3, 6, 10, .78) 29%, rgba(3, 6, 10, .28) 58%, rgba(3, 6, 10, .08) 100%),
    linear-gradient(180deg, rgba(3, 6, 10, .42), transparent 38%, rgba(3, 6, 10, .62) 100%);
}

.site-cube-page .cine .cine-mid {
  grid-template-columns: minmax(0, 620px) 1fr;
}

.site-cube-page .cine .cine-copy {
  position: relative;
  z-index: 3;
}

.site-cube-page .cine .cine-copy .lead2 {
  color: rgba(238, 246, 250, .82);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .7);
}

/* Текст страницы стоит на устойчивой подложке: за ним не должно читаться
   детализованное видео. Размытие добавляется только там, где оно поддержано. */
.site-cube-page main > section:not(.cine),
.site-cube-page .marq,
.site-cube-page footer {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}

.site-cube-page main > section.alt {
  background: color-mix(in srgb, var(--surface) 93%, transparent);
}

.site-cube-page .marq {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-cube-page main > section:not(.cine),
  .site-cube-page .marq,
  .site-cube-page footer {
    background: color-mix(in srgb, var(--paper) 84%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .site-cube-page main > section.alt {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
  }

  .site-cube-page .marq {
    background: color-mix(in srgb, var(--surface) 85%, transparent);
  }
}

/* В светлой теме тёмный текст лежал на просвечивающем тёмном видео, и контраст
   менялся от кадра к кадру. Подложка делается почти непрозрачной. */
:root[data-theme="light"] .site-cube-page main > section:not(.cine),
:root[data-theme="light"] .site-cube-page .marq,
:root[data-theme="light"] .site-cube-page footer {
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}

:root[data-theme="light"] .site-cube-page main > section.alt,
:root[data-theme="light"] .site-cube-page .marq {
  background: color-mix(in srgb, var(--surface) 97%, transparent);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-cube-page main > section:not(.cine),
  :root:not([data-theme="dark"]) .site-cube-page .marq,
  :root:not([data-theme="dark"]) .site-cube-page footer {
    background: color-mix(in srgb, var(--paper) 96%, transparent);
  }

  :root:not([data-theme="dark"]) .site-cube-page main > section.alt,
  :root:not([data-theme="dark"]) .site-cube-page .marq {
    background: color-mix(in srgb, var(--surface) 97%, transparent);
  }
}

@media (max-width: 980px) {
  .site-cube-bg video {
    object-position: 58% center;
    opacity: .94;
  }

  .site-cube-page .cine .cine-scrim {
    background:
      linear-gradient(90deg, rgba(3, 6, 10, .94), rgba(3, 6, 10, .51) 63%, rgba(3, 6, 10, .2)),
      linear-gradient(180deg, rgba(3, 6, 10, .4), transparent 45%, rgba(3, 6, 10, .72));
  }
}

@media (max-width: 860px) {
  .site-cube-page .cine .cine-mid { grid-template-columns: 1fr; }
  .site-cube-bg video {
    object-position: center;
    opacity: .9;
  }
  .site-cube-page .cine .cine-scrim {
    background: linear-gradient(180deg, rgba(3, 6, 10, .64) 0%, rgba(3, 6, 10, .34) 38%, rgba(3, 6, 10, .78) 100%);
  }
}

/* На телефонах размытие подложки слишком дорого — вместо него более плотный фон. */
@media (max-width: 560px) {
  .site-cube-bg video {
    opacity: .86;
  }
  .site-cube-page .cine .cine-copy .lead2 { color: rgba(238, 246, 250, .86); }
  .site-cube-page main > section:not(.cine),
  .site-cube-page .marq,
  .site-cube-page footer {
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-cube-page main > section.alt,
  .site-cube-page .marq {
    background: color-mix(in srgb, var(--surface) 95%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-cube-bg video { display: none; }
  .site-cube-bg {
    background: #02050a url("cube/cube-v21-poster.jpg") center / cover no-repeat;
  }
}