/* ===== Spacemotion · загрузка, VPN-подсказка, подсказки тапа — общая для кино и рекламы · v006 (08.11.2026)
   v006: из кино v005; общий блок .sm-vpn-hint (свой шрифт, не зависит от классов кино pz-); места тап-подсказок — переменные
         --sm-tap-next-x/y, --sm-tap-prev-x/y (по умолчанию — как в кино). Карточки регламента .pz-cards — только кино.
   v005: убран чёрный слой html::after (в Safari 18.6 оставался поверх сайта)
   v003: логотип загрузочного экрана сайта — слева внизу, перед фразой; размер — по строке фразы
   v002: логотип на холсте с прозрачностью (без режима наложения и чёрного квадрата), втрое меньше
   Загрузка: чёрный экран с первой отрисовки (html::after), поверх — анимация логотипа (видео внутри JS).
   В редакторе заставки нет (просмотр: ?sm=loader). Если JS не сработал, экран сам уходит через 7 с. В печать ничего из этого не попадает. ===== */

@media screen {
  /* v005: чёрный слой html::after до запуска JS убран — Safari 18.6 не снимал его после загрузки (селектор с has
     не пересчитывался), и сайт оставался чёрным. Старт на сайте закрывает загрузочный экран сайта (html.sm-loading). */

  .sm-loader {
    position: fixed; inset: 0; z-index: 2147482995; background: #0A0A0A;
    display: grid; place-items: center; pointer-events: none;
    transition: opacity .5s cubic-bezier(.2,.7,.2,1);
  }
  .sm-loader.out { opacity: 0; }
  .sm-loader .sm-logo { width: min(11.4vmin, 114px); height: auto; aspect-ratio: 1 / 1; display: block; }
}
/* клиентский пакет: логотип в центре загрузочного экрана сайта (.sm-ld), поверх рендера обложки */
.sm-logo-src { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.sm-ld-left { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(10px, .83vw, 16px); align-items: center; }
.sm-ld-left > .sm-ld-k { grid-column: 1 / -1; }
.sm-ld-left > .sm-ld-k img { display: none; }   /* знак уже стоит ниже — анимацией */
.sm-ld-logo { grid-column: 1; grid-row: 2; display: block; width: clamp(26px, 2.1vw, 40px); height: auto; aspect-ratio: 1 / 1; pointer-events: none; }
.sm-ld-left > .sm-ld-p { grid-column: 2; grid-row: 2; }
@media print { .sm-loader, .pz-vpn, .sm-vpn-hint, .sm-tap { display: none !important; } }

/* ---- подсказка «включите кое-что» на обложке: только если видео не стартовало ---- */
.pz-vpn, .sm-vpn-hint {
  text-align: center; background: rgba(10,10,10,.72); padding: 28px 36px 26px;
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; z-index: 6;
}
.pz-vpn .pz-t { color: #fff; }
.pz-vpn .pz-l { margin-top: 18px; color: rgba(255,255,255,.72); }
html.sm-vpn :is(.pz-vpn, .sm-vpn-hint) { opacity: 1; visibility: visible; }
body.is-editing :is(.pz-vpn, .sm-vpn-hint) { opacity: .6; visibility: visible; }
.sm-vpn-hint .t { font: 400 22px/1.32 var(--font-text); color: #fff; margin: 0; text-box: trim-both cap alphabetic; }
.sm-vpn-hint .l { font: 500 16px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); margin: 18px 0 0; text-box: trim-both cap alphabetic; }

/* ---- подсказки тапа на телефоне (слайды 1 и 2) ---- */
.sm-tap {
  position: absolute; z-index: 40; top: 540px; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; pointer-events: none;
}
.sm-tap.next { left: var(--sm-tap-next-x, 1680px); top: var(--sm-tap-next-y, 540px); }
.sm-tap.prev { left: var(--sm-tap-prev-x, 240px); top: var(--sm-tap-prev-y, 610px); } /* на «Фильмографии» — в пустой полосе между цифрами и титрами, внутри левой четверти (зона «назад») */
.sm-tap .dot { position: relative; width: 120px; height: 120px; }
.sm-tap .dot::before, .sm-tap .dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
}
.sm-tap .dot::before { background: #FC4700; transform: scale(.36); }
.sm-tap .dot::after { border: 4px solid #FC4700; animation: smTapRing 1.6s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes smTapRing { 0% { transform: scale(.36); opacity: 1; } 70%, 100% { transform: scale(1); opacity: 0; } }
.sm-tap .tx {
  font: 500 32px/1.2 var(--font-text); color: #fff; background: rgba(10,10,10,.72);
  padding: 16px 22px 15px; white-space: nowrap; margin: 0;
}
html.sm-taps.sm-taps-on body.is-presenting .frame.is-current .sm-tap.next { opacity: 1; visibility: visible; }
html.sm-taps.sm-tap1-done .sm-tap.next { opacity: 0 !important; visibility: hidden !important; }
html.sm-taps.sm-tap1-done:not(.sm-tap2-done) body.is-presenting .frame.is-current .sm-tap.prev { opacity: 1; visibility: visible; }

/* ---- регламент: карточки как в рекламной, на светлом ---- */
.pz-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pz-cards .node {
  position: relative; border: 2px solid var(--line); padding: 28px 28px 30px;
  display: flex; flex-direction: column; min-width: 0;
  transition: background-color .28s cubic-bezier(.2,.7,.2,1), border-color .28s, color .28s;
}
.pz-cards .node .n { font: 500 16px/1 var(--font-mono); letter-spacing: .06em; color: var(--muted); margin: 0; text-box: trim-both cap alphabetic; }
.pz-cards .node .pz-m { margin-top: 36px; }
.pz-cards .node .pz-s { margin-top: auto; padding-top: 20px; }
.pz-cards .node.safe, .pz-cards .node:hover { background: var(--red); border-color: var(--red); color: #fff; }
.pz-cards .node.safe .n, .pz-cards .node.safe .pz-s,
.pz-cards .node:hover .n, .pz-cards .node:hover .pz-s { color: rgba(255,255,255,.85); }