/*
 * Сплеш Mini App — та сама анімація 10d, що в застосунку.
 *
 * Джерело руху: design_handoff_spilno_v3/splash/splash-animation-spec.md.
 * Вісім кроків на спільній шкалі 880 мс, і кожен тут — окрема анімація зі
 * своїм `animation-delay` (початок кроку) і `animation-duration` (його
 * довжина). Саме тому кроки не звалені в одну стрічку відсотків: у CSS
 * timing-функція одна на анімацію, а спека дає кожному кроку СВОЮ криву.
 *
 * Кольорів тут немає жодного — усі через змінні з tokens.css, які
 * згенерував miniapp/tools/splash.mjs із хендофа. Геометрія (де стоїть лок,
 * скільки пікселів в одиниці) — звідти ж.
 *
 * Кадр 0 має збігатися з тим, що людина бачить у першу мить: поле малює CSS
 * одразу, а знак вставляє класичний `<script src="./icons/splash-inline.js">`
 * ще до першого малювання. Тому білого блимання немає навіть на порожньому
 * кеші.
 */

.sp-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--splash-bg-light);
  overflow: hidden;

  /*
   * Скільки пікселів припадає на одиницю лока. Номінально лок 460px, але на
   * вузькому екрані він зменшується пропорційно, щоб слово не зрізало —
   * рівно те саме правило, що в SplashMetrics.scaleFor застосунку.
   */
  --sp-splash-u: min(
    calc(var(--splash-nominal-width) / var(--splash-lockup-w)),
    calc((100vw - 2 * var(--splash-min-margin)) / var(--splash-ink-width))
  );
}

/* Крок 1: плаский колір → вертикальний градієнт бренду. 0–120 мс, лінійно. */
.sp-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--splash-bg-light), var(--splash-bg-dark));
  opacity: 0;
  animation: sp-splash-field 120ms linear both;
}

/*
 * Темна тема Telegram бере темне поле — те саме `--splash-bg-dark`, яким
 * пофарбований нативний кадр застосунку. Градієнта тут немає навмисно:
 * темне поле вже Є нижнім стопом фірмового градієнта, а другого, темнішого,
 * хендоф не дає — вигадувати колір під екран запуску ми не станемо.
 */
:root[data-theme='dark'] .sp-splash {
  background: var(--splash-bg-dark);
}

:root[data-theme='dark'] .sp-splash::before {
  animation: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .sp-splash {
    background: var(--splash-bg-dark);
  }

  :root:not([data-theme]) .sp-splash::before {
    animation: none;
  }
}

.sp-splash__art {
  position: absolute;
  inset: 0;
}

/*
 * Лок ставиться так, щоб точка спокою його чорнила лягла в центр екрана.
 * На кадрі 0 у центрі має стояти ЗНАК (як у нативному кадрі), тому лок
 * доїжджає туди кроком 7 — див. .sp-splash__lockup.
 */
.sp-splash__svg {
  position: absolute;
  width: calc(var(--splash-lockup-w) * var(--sp-splash-u));
  height: calc(var(--splash-lockup-h) * var(--sp-splash-u));
  left: calc(50% - var(--splash-rest-cx) * var(--sp-splash-u));
  top: calc(50% - var(--splash-rest-cy) * var(--sp-splash-u));
}

/* Крок 7 (та сама крива): лок доїжджає з «знак по центру» в «лок по центру». */
.sp-splash__lockup {
  animation: sp-splash-drift 360ms cubic-bezier(0.3, 0.85, 0.2, 1) 520ms both;
}

/* Крок 7: знак їде ліворуч, 154 → 0 одиниць лока. */
.sp-splash__slide {
  animation: sp-splash-slide 360ms cubic-bezier(0.3, 0.85, 0.2, 1) 520ms both;
}

/*
 * Крок 5: кернінг розходиться й сходиться, 300–540 мс, easeInOutQuart.
 * Пік — посеред відрізка, кінці на нулі: інакше на 300-й мілісекунді знак
 * стрибнув би з того місця, де його малює нативний кадр.
 */
.sp-splash__pair--left {
  animation: sp-splash-kerf-left 240ms cubic-bezier(0.77, 0, 0.175, 1) 300ms both;
}

.sp-splash__pair--right {
  animation: sp-splash-kerf-right 240ms cubic-bezier(0.77, 0, 0.175, 1) 300ms both;
}

/* Крок 2: планка падає −46 → 0 без перельоту. Крок 4: гасне 330–430 мс. */
.sp-splash__bar {
  animation:
    sp-splash-bar-drop 150ms cubic-bezier(0.215, 0.61, 0.355, 1) both,
    sp-splash-bar-fade 430ms linear both;
}

/* Крок 6: смуга світла йде по знаку, 180–800 мс. */
.sp-splash__shine {
  animation: sp-splash-shine 620ms cubic-bezier(0.36, 0.06, 0.32, 0.98) 180ms both;
}

.sp-splash__shine-clip {
  opacity: 0;
  animation: sp-splash-shine-fade 620ms linear 180ms both;
}

/* Крок 8: слово виїжджає з-під знака. Три шари — три різні криві. */
.sp-splash__word {
  animation: sp-splash-word 360ms cubic-bezier(0.24, 0.86, 0.24, 1) 520ms both;
}

.sp-splash__reveal {
  transform-box: fill-box;
  transform-origin: left center;
  animation: sp-splash-reveal 360ms cubic-bezier(0.24, 0.86, 0.24, 1) 520ms both;
}

.sp-splash__word-ink {
  opacity: 0;
  animation: sp-splash-word-fade 108ms linear 520ms both;
}

/* Сплеш іде з екрана перехресним згасанням — 120 мс, як просить спека. */
.sp-splash--gone {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms linear;
}

@keyframes sp-splash-field {
  to { opacity: 1; }
}

@keyframes sp-splash-drift {
  from { transform: translateX(calc(var(--splash-drift) * -1px)); }
  to { transform: translateX(0); }
}

@keyframes sp-splash-slide {
  from { transform: translateX(154px); }
  to { transform: translateX(0); }
}

@keyframes sp-splash-kerf-left {
  from { transform: translateX(0); }
  50% { transform: translateX(3.4px); }
  to { transform: translateX(0); }
}

@keyframes sp-splash-kerf-right {
  from { transform: translateX(0); }
  50% { transform: translateX(-3.4px); }
  to { transform: translateX(0); }
}

@keyframes sp-splash-bar-drop {
  from { transform: translateY(-46px); }
  to { transform: translateY(0); }
}

/*
 * 11.628% — це 50 мс від 430 («проявляється за першу третину свого
 * відрізка»), 76.744% — 330 мс, мить, коли планка починає гаснути.
 */
@keyframes sp-splash-bar-fade {
  0% { opacity: 0; }
  11.628% { opacity: 1; }
  76.744% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sp-splash-shine {
  from { transform: translateX(45px); }
  to { transform: translateX(240px); }
}

@keyframes sp-splash-shine-fade {
  0% { opacity: 0; }
  7% { opacity: 1; }
  93% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sp-splash-word {
  from { transform: translateX(-48px); }
  to { transform: translateX(calc(var(--splash-word-rest) * 1px)); }
}

@keyframes sp-splash-reveal {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes sp-splash-word-fade {
  to { opacity: 1; }
}

/*
 * Зменшений рух — це кінцевий стан на нульовій мілісекунді, а не швидша
 * анімація (розділ «Reduced motion» спеки). Нульова тривалість із
 * `fill: both` лишає рівно те, що в `to`.
 */
@media (prefers-reduced-motion: reduce) {
  .sp-splash *,
  .sp-splash::before {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }

  .sp-splash--gone {
    transition-duration: 0s;
  }
}