/* Заставка (views/splash.js): знак Астры на canvas → эмблема с дугой прогресса → форма входа или приложение.
 * Своего фона у сцены нет — под ней небо приложения (.sky в app.css); пока она на экране, шапка, экраны и меню
 * скрыты через visibility (вёрстка не сдвигается). Шрифты — Jura (заголовки, эмблема), Comfortaa (кнопка),
 * Noto Serif SC (только 木火土金水) — подключены в index.html тем же способом, что и остальные шрифты приложения. */
:root {
  --sp-line: #a6ece9;
  --sp-line-dim: rgba(166, 236, 233, .35);
  --sp-glow: rgba(47, 183, 176, .55);
  --sp-text: #eaf7f7;
  --sp-muted: #8fb3b8;
  --sp-head: "Jura", "Segoe UI", Arial, sans-serif;
  --sp-btn: "Comfortaa", "Segoe UI", Arial, sans-serif;
  --sp-aurora: linear-gradient(110deg, #8ee8f0, #2fb7b0 35%, #7b6cf0 70%, #8ee8f0);
  /* вырез экрана и шапка Telegram (Bot API 8.0 сам ставит --tg-*-safe-area-inset-*; вне Telegram их нет) */
  --sp-safe-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --sp-safe-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
}

.splash { display: none; }
body.is-splash .splash, body.is-splash-leaving .splash {
  display: block; position: fixed; inset: 0; z-index: 40; overflow: hidden;
  color: var(--sp-text); font-family: var(--sp-head); transition: opacity .6s ease;
  -webkit-user-select: none; user-select: none;
}
.splash.is-fading { opacity: 0; pointer-events: none; }

/* приложение под сценой: скрыто, но на своих местах; на выходе — мягко проявляется */
body.is-splash .top, body.is-splash .views, body.is-splash .nav { visibility: hidden; }
body.is-splash-leaving .top, body.is-splash-leaving .views, body.is-splash-leaving .nav { animation: splashAppIn .8s ease both; }
@keyframes splashAppIn { from { opacity: 0; } }
/* колесо неба на заставке — по центру за эмблемой, тише; на выходе плавно уезжает на место приложения */
body.is-splash .sky__wheel { --wheel: min(150vmin, 980px); top: calc(50% - var(--wheel) / 2); opacity: .16; }
body.is-splash-leaving .sky__wheel {
  transition: opacity 1.2s ease, filter 1.2s ease, top 1.2s cubic-bezier(.6,0,.2,1), width 1.2s cubic-bezier(.6,0,.2,1),
              margin-left 1.2s cubic-bezier(.6,0,.2,1);
}

.splash__sign { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.splash__stage {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  padding: calc(var(--sp-safe-top) + 16px) 16px calc(var(--sp-safe-bottom) + 64px);
}

/* ── эмблема ─────────────────────────────────────────────────── */
.splash__emblem {
  position: relative; flex: none; aspect-ratio: 1;
  width: max(150px, min(78vmin, 520px, calc(100vh - 240px)));
  opacity: 0; transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.6,0,.2,1);
  will-change: transform, opacity;
}
.splash__emblem svg { display: block; width: 100%; height: 100%; overflow: visible; }
.splash__halo {
  position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle, var(--sp-glow), transparent 70%); filter: blur(10px);
  animation: splashBreathe 5s ease-in-out infinite;
}
@keyframes splashBreathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
.splash__ring { fill: none; stroke: var(--sp-line); stroke-width: .9; stroke-linecap: round; }
.splash__ring--dim { stroke: var(--sp-line-dim); }
@keyframes splashDraw { to { stroke-dashoffset: 0; } }
.splash__spin-cw { transform-origin: 0 0; animation: splashSpin 80s linear infinite; }
.splash__spin-ccw { transform-origin: 0 0; animation: splashSpin 120s linear infinite reverse; }
@keyframes splashSpin { to { transform: rotate(360deg); } }
.splash__glyph-g { transform-box: fill-box; transform-origin: center; }
.splash__glyph {
  transform-box: fill-box; transform-origin: center; fill: var(--sp-line); font-size: 17px;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols", "Apple Symbols", var(--sp-head);
  text-anchor: middle; dominant-baseline: central; opacity: .9; filter: drop-shadow(0 0 4px rgba(166,236,233,.6));
}
@keyframes splashPop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: .9; transform: scale(1); } }
.splash__cline { stroke: var(--sp-line-dim); stroke-width: .7; fill: none; }
.splash__cstar { fill: #fff; opacity: .7; }
@keyframes splashTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.splash__spark { fill: #fff; filter: drop-shadow(0 0 6px var(--sp-line)); }
.splash__progress {
  fill: none; stroke: url(#splashProg); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1231.5; stroke-dashoffset: 1231.5; filter: drop-shadow(0 0 6px var(--sp-line));
}
.splash__el {
  font-family: "Noto Serif SC", serif; font-weight: 300; font-size: 11px; letter-spacing: 6px; fill: var(--sp-line);
  text-anchor: middle;
}
.splash__name {
  font-family: var(--sp-head); font-weight: 300; font-size: 21px; letter-spacing: 6px; fill: #effcfb; text-anchor: middle;
  filter: drop-shadow(0 0 6px rgba(166,236,233,.5));
}
/* Движение (правило проекта, tests/test_webapp_motion.py): всё, что стартует прозрачным и проявляется анимацией, —
 * только здесь; без анимаций эмблема сразу в конечном виде. */
@media (prefers-reduced-motion: no-preference) {
  .splash__draw {
    stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
    animation: splashDraw 1.8s cubic-bezier(.6,0,.2,1) forwards; animation-delay: var(--d, 0s);
  }
  .splash__glyph { opacity: 0; animation: splashPop .6s ease forwards; }
  .splash__cline { stroke-dasharray: 40; stroke-dashoffset: 40; animation: splashDraw 1s ease forwards; }
  .splash__cstar { opacity: 0; animation: splashTwinkle 3s ease-in-out infinite; }
  .splash__spark { animation: splashTwinkle 2.4s ease-in-out infinite; }
  .splash__el { opacity: 0; animation: splashFade 1.4s ease forwards; }
  .splash__name { opacity: 0; animation: splashFade 1.6s ease forwards; }
  .splash__skip { opacity: 0; animation: splashFade .8s ease 1.2s both; }
  /* короткий вариант и «Пропустить»: та же отрисовка, но быстрее */
  .splash.is-quick .splash__emblem { transition: opacity .45s ease, transform 1.4s cubic-bezier(.6,0,.2,1); }
  .splash.is-quick .splash__draw { animation-duration: .7s; }
  .splash.is-quick .splash__cline { animation-duration: .5s; }
  .splash.is-quick .splash__name, .splash.is-quick .splash__el { animation-duration: .6s; }
}
@keyframes splashFade { to { opacity: 1; } }

/* ── прогресс и фразы ────────────────────────────────────────── */
.splash__status {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 64px;
  opacity: 0; transition: opacity 1.2s ease;
}
.splash__pct { font-size: 14px; letter-spacing: .3em; color: var(--sp-line); font-variant-numeric: tabular-nums; min-height: 1.2em; }
.splash__msg { font-size: 15px; letter-spacing: .08em; color: var(--sp-muted); text-align: center; min-height: 1.4em; transition: opacity .3s; }
.splash__msg.is-swap { opacity: 0; }
.splash.is-emblem .splash__emblem { opacity: 1; }
.splash--full.is-emblem .splash__status, .splash--static .splash__status, .splash.is-slow .splash__status { opacity: 1; }

/* ── развязка ────────────────────────────────────────────────── */
.splash.is-form .splash__emblem { transform: translateY(var(--up-y, -30vh)) scale(var(--up-s, .3)); }
.splash.is-form .splash__status { opacity: 0; transition-duration: .4s; }
.splash.is-exit .splash__emblem { animation: splashOut 1.1s cubic-bezier(.6,0,.2,1) forwards; }
.splash.is-exit .splash__status { opacity: 0; transition-duration: .3s; }
.splash.is-form.is-exit .splash__emblem { animation: none; opacity: 0; filter: blur(6px); transition: opacity .9s ease, filter .9s ease; }
@keyframes splashOut { 40% { transform: scale(1.04); } 100% { transform: scale(1.6); opacity: 0; filter: blur(6px); } }

/* форма входа (views/login.js монтирует .login.login--scene сюда) */
.splash__login {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; justify-content: center; align-items: flex-start;
  padding: var(--form-top, 30vh) 16px calc(var(--sp-safe-bottom) + 20px);
  visibility: hidden; opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
  -webkit-user-select: text; user-select: text;
}
.splash.is-form .splash__login {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 1s ease .5s, transform 1s cubic-bezier(.2,.8,.2,1) .5s, visibility 0s;
}
.splash.is-exit .splash__login { opacity: 0; transition: opacity .3s ease; }

/* «Пропустить» */
.splash__skip {
  position: absolute; left: 50%; bottom: calc(var(--sp-safe-bottom) + 18px); transform: translateX(-50%);
  min-height: 40px; padding: 9px 18px; border-radius: 20px; cursor: pointer;
  font: 700 13px var(--sp-btn); letter-spacing: .02em; color: var(--sp-line);
  background: rgba(2, 12, 24, .55); border: 1px solid var(--sp-line-dim);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.splash__skip[hidden] { display: none; }
.splash__skip:focus-visible { outline: 2px solid var(--sp-line); outline-offset: 3px; }

/* вкладка скрыта — всё стоит */
.splash.is-paused *, .splash.is-paused *::before, .splash.is-paused *::after { animation-play-state: paused !important; }

/* «уменьшить движение» (splash.js: вариант static): статичная эмблема в конечном виде, без переходов */
.splash--static *, .splash--static *::before, .splash--static *::after { animation: none !important; transition: none !important; }
.splash--static .splash__halo { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .splash *, .splash *::before, .splash *::after { animation: none !important; transition: none !important; }
  body.is-splash-leaving .top, body.is-splash-leaving .views, body.is-splash-leaving .nav { animation: none; }
}

@media (max-height: 560px) {
  .splash__stage { gap: 14px; padding-bottom: calc(var(--sp-safe-bottom) + 56px); }
  .splash__status { min-height: 52px; }
}
/* совсем низкое окно (телефон боком): без фразы — только проценты */
@media (max-height: 380px) {
  .splash__emblem { width: max(120px, min(78vmin, calc(100vh - 150px))); }
  .splash__status { min-height: 0; }
  .splash__msg { display: none; }
}