/* Заставка входа: тёмный экран, золотой листопад, вопрос о звуке.

   Заставка всегда тёмная, в обеих температурах. Кремовая страница,
   открывшаяся из тёмной заставки, читается как рассвет; тёмная заставка
   перед тёмной страницей - как продолжение. Обратный порядок (светлая
   заставка перед тёмной главной) бьёт по глазам.

   Листья падают на composited-свойствах (transform и opacity): любое
   другое свойство заставило бы браузер пересчитывать раскладку на каждом
   кадре, и на телефоне листопад пошёл бы рывками именно тогда, когда
   страница и так занята загрузкой. */

/* Раскрытие из круга.

   Нужен растущий ПРОЁМ в заставке, а не растущий круг поверх неё, -
   а вырезать дырку из элемента напрямую CSS не умеет. Делается это
   маской: заставка закрашена радиальным градиентом, у которого центр
   прозрачен, а всё за ним непрозрачно. Растёт прозрачная часть - растёт
   проём, и сквозь него проступает сайт.

   Граница проёма задана двумя стопами вплотную (--hole и чуть дальше):
   один стоп дал бы мягкое размытие вместо чистого края круга.

   Размер проёма меняет JS покадрово, а не переход CSS. Причина: проценты
   внутри градиента переходом не анимируются, для этого свойство надо
   объявлять через @property, и первая попытка на этом и споткнулась -
   класс навешивался, а значение оставалось нулевым. Пересчёт из JS
   не зависит ни от @property, ни от того, умеет ли браузер
   интерполировать пользовательские свойства: подставляется готовое
   число, и это работает везде, где вообще работает маска. */

/* Заставка тёмная при ЛЮБОЙ теме, поэтому токены темы здесь
   переобъявлены тёмным набором - тот же приём, что у героя в media.css,
   и по той же причине. Без этого в кремовой теме кнопка «Войти без
   звука» брала цвет текста темы - тёмно-синий - и стояла невидимой
   на тёмно-синем фоне: тёмное на тёмном, 1.2:1. Свои надписи заставки
   цветов темы не берут (кремовый и золото прописаны прямо), а кнопка -
   общий компонент и берёт. */
.zastavka{position:fixed;inset:0;z-index:120;background:var(--deep);
  --bg:var(--deep);--surface:var(--navy);
  --text:var(--cream);--text-soft:var(--text-muted);--text-dim:var(--slate);
  --line:var(--hair);--accent:var(--gold);--accent-ink:var(--ink);
  color:var(--text);
  display:grid;place-items:center;overflow:hidden;--hole:0%;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,
    transparent var(--hole), #000 calc(var(--hole) + 0.6%));
  mask-image:radial-gradient(circle at 50% 50%,
    transparent var(--hole), #000 calc(var(--hole) + 0.6%));
  transition:opacity var(--dur-3) var(--ease) 200ms,visibility 0s linear 1100ms}
.zastavka.is-open{transition:opacity var(--dur-2) var(--ease) 700ms,visibility 0s linear 1200ms}
.zastavka.is-gone{opacity:0;visibility:hidden;pointer-events:none}
body.zastavka-on{overflow:hidden}

.zastavka-listopad{position:absolute;inset:0;pointer-events:none}
.zastavka-list{position:absolute;top:-18vh;will-change:transform,opacity;
  animation:listopad linear infinite}
@keyframes listopad{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  8%{opacity:.85}
  92%{opacity:.85}
  100%{transform:translate3d(var(--drift,40px),128vh,0) rotate(var(--spin,220deg));
    opacity:0}
}

.zastavka-centre{position:relative;z-index:2;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--gap-3);
  padding:var(--gap-4)}
.zastavka-mark{font-family:var(--disp);font-size:var(--step-2);
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.zastavka-text{font-family:var(--disp);font-size:var(--step-3);
  color:var(--cream);max-width:16ch;line-height:1.24;margin:0;
  text-wrap:balance}
.zastavka-choice{display:flex;flex-direction:column;align-items:center;gap:7px;margin:2px 0 -8px;
  color:var(--cream);font:600 11px/1.3 var(--ui);letter-spacing:.13em;text-transform:uppercase}
.zastavka-choice span{color:var(--gold);font-size:22px;animation:zastavka-point var(--breath) var(--ease-breath) infinite}
.zastavka-actions{display:flex;gap:var(--gap-2);flex-wrap:wrap;
  justify-content:center;margin-top:var(--gap-1)}
.zastavka-actions .btn-gold{position:relative;animation:zastavka-pulse var(--breath) var(--ease-breath) infinite}
.zastavka-actions .btn-gold::after{content:'';position:absolute;inset:-8px;border:1px solid rgba(210,176,106,.38);
  opacity:0;transform:scale(.96);animation:zastavka-ring var(--breath) var(--ease-breath) infinite;pointer-events:none}
.zastavka-note{font-size:var(--step--1);color:var(--text-muted)}
@keyframes zastavka-point{0%,100%{transform:translateY(-2px);opacity:.5}50%{transform:translateY(5px);opacity:1}}
@keyframes zastavka-pulse{0%,100%{box-shadow:0 0 0 rgba(210,176,106,0)}50%{box-shadow:0 12px 42px rgba(210,176,106,.27)}}
@keyframes zastavka-ring{0%,100%{opacity:0;transform:scale(.96)}45%,65%{opacity:1;transform:scale(1.02)}}

@media(max-width:560px){
  .zastavka-centre{width:100%;gap:20px;padding:28px 22px}.zastavka-text{font-size:clamp(42px,13vw,58px);line-height:1.03}
  .zastavka-actions{display:grid;width:100%;max-width:340px;gap:12px}.zastavka-actions .btn{width:100%;padding:17px 20px}
}