/* Экран приветствия — «момент входа». Чёрный экран, на нём по очереди
   проступают слова, потом кнопка. Ничего больше: ни фона, ни декора.

   Правила сцены:
   • темп размашистый — секунда на слово, а не привычные 0.22s;
   • «материализация» вместо голого fade: blur и сдвиг всегда вместе;
   • после нажатия цвет приходит не вспышкой, а тем, что плеер собирается
     на чёрном по частям — от обложки к оболочке;
   • все тайминги живут здесь, JS их только читает — как closeSheet читает
     transition-duration. */

.welcome {
  /* --text-dur: конец текстовой части, до него тап перематывает сцену вперёд.
     --go-dur: когда слой прячется. --build-dur: когда сборка окончена и плеер
     возвращается в обычный режим. */
  --text-dur: 3.6s;
  --go-dur: 0.5s;
  --build-dur: 4s;

  position: absolute; inset: 0;
  z-index: 80; /* выше тоста (60): приветствие перекрывает всё */
  display: grid; place-items: center;
  background: var(--black);
  overflow: hidden;
}

/* Текст и кнопка живут в одной ячейке сетки — значит в одной точке экрана:
   слова гаснут, и кнопка проступает ровно там же. */
.welcome__line,
.welcome__launch { grid-area: 1 / 1; }

.welcome__line {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 0.26em;
  width: 100%; padding: 0 var(--gutter); margin: 0;
  font-size: clamp(27px, 7.2vw, 54px); font-weight: 800; line-height: 1.06;
  letter-spacing: -0.03em; /* крупный кегль всегда тянет трекинг в минус */
  color: var(--t1); text-align: center;
}

/* Появление и уход — две анимации на элементе. У ухода намеренно нет `from`
   и нет backwards-заливки: до своей задержки он ничего не навязывает, а после
   перебивает появление, потому что стоит в списке позже. */
.welcome__greet {
  animation: welcome-word-in 1.0s var(--ease-cine) 0.3s both,
             welcome-word-out 0.8s var(--ease-cine-in) 3.1s forwards;
}

/* Единственное место, где акцент не про действие, а про «это про тебя»
   (исключение из правила DESIGN §1). Кегль задан множителем от базового —
   пропорция держится сама на всех брейкпоинтах, baseline общий. */
.welcome__name {
  font-size: 1.25em; color: var(--accent);
  animation: welcome-word-in 1s var(--ease-cine) 1.2s both,
             welcome-word-out 0.8s var(--ease-cine-in) 3.1s forwards;
}

.welcome__launch { animation: welcome-play-in 0.9s var(--ease-cine) 3.6s both; }

.welcome__play {
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; border-radius: var(--pill);
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 12px 40px var(--accent-glow);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.welcome__play:active { background: var(--accent-deep); transform: scale(0.94); }

/* ---------- уход слоя ---------- */

.welcome--go { animation: welcome-out var(--go-dur) var(--ease-cine-in) forwards; pointer-events: none; }
.welcome--go .welcome__launch { animation: welcome-play-out var(--go-dur) var(--ease-cine-in) forwards; }

@keyframes welcome-word-in { from { opacity: 0; transform: translateY(14px); filter: blur(14px); } }
@keyframes welcome-word-out { to { opacity: 0; transform: translateY(-14px); filter: blur(14px); } }
@keyframes welcome-play-in { from { opacity: 0; transform: scale(0.8); filter: blur(10px); } }
@keyframes welcome-play-out { to { opacity: 0; transform: scale(0.86); filter: blur(10px); } }
@keyframes welcome-out { to { opacity: 0; } }

/* ---------- сборка плеера ---------- */

/* Плеер обязан стоять на месте, а не выезжать снизу: он собирается по частям.
   Класс вешается синхронно с нажатием, поэтому задержки ниже отсчитываются
   прямо от него. */
#sheet-player.player--intro { transition: none; transform: none; }

/* Кривая здесь намеренно другая: --ease-cine делает замах и выбрасывает блок
   почти мгновенно, из-за чего ступени сборки сливаются в одну. Проявление
   должно идти ровно, как плёнка.

   fill-mode ровно `backwards`, не `both`. У этих кадров задан только `from`,
   поэтому конец анимации и так равен базовому значению — forwards ничего не
   добавляет, зато держит анимацию живой до снятия класса. А пока анимация
   жива, элемент лежит на композитном слое; при снятии класса все шесть слоёв
   схлопывались разом, и весь плеер заметно вздрагивал. С backwards каждый
   элемент сходит со слоя сразу после своего шага, поодиночке и незаметно. */
#sheet-player.player--intro .art { animation: intro-rise 1.2s ease-in-out 0.4s backwards; }
#sheet-player.player--intro .nowplaying { animation: intro-rise 0.8s ease-in-out 1.5s backwards; }
#sheet-player.player--intro .progress,
#sheet-player.player--intro .transport { animation: intro-rise 0.8s ease-in-out 2.0s backwards; }
/* Финал — одним аккордом на 2.5s: цвет плеера, шапка, нижняя панель,
   затемнение и оболочка вокруг приходят вместе. */
#sheet-player.player--intro .sheet__head,
#sheet-player.player--intro .actionbar { animation: intro-fade 0.8s ease-in-out 2.5s backwards; }

/* Фон плеера гасим шторкой, а не прозрачностью: на мобильном его несёт
   отдельный .sheet__bg, а на десктопе — сам .sheet__body с контентом внутри
   (там .sheet__bg объявлен display:none). Гасить карточку целиком нельзя,
   а из background-color в linear-gradient анимацией не перейти. .sheet__body
   покрывает весь экран на мобильном и ровно карточку на десктопе — поэтому
   одно правило работает на обоих брейкпоинтах. */
#sheet-player.player--intro .sheet__body::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--black);
  animation: intro-veil 1.2s ease-in-out 2.5s both;
}
/* Без этого абсолютная шторка (слой позиционированных) закрыла бы и обложку. */
#sheet-player.player--intro .sheet__body > * { position: relative; }

/* Десктопный modal-in здесь НЕ подавляем. Правило `animation: none` на время
   сборки выглядело логично, но в момент снятия класса animation-name менялся
   с none на modal-in — и карточка заново проигрывала зум, то есть дёргалась
   уже после того, как всё собралось. Пусть modal-in отработает один раз при
   открытии: карточка тогда ещё чёрная и пустая, зум на чёрном не виден. */

/* Подложка плеера доезжает до штатной сама: у кадра нет `to`, поэтому она
   приходит к тому, что задано брейкпоинтом (--bg на мобильном, затемнение
   на десктопе), а backwards-заливка держит чистый чёрный до старта. */
#sheet-player.player--intro { animation: intro-scrim 1.5s ease-in-out 2.5s backwards; }

/* Задний интерфейс — в том же аккорде. Целимся в .tabbar/.mini, а не в .dock:
   на десктопе у дока display:contents и своего бокса нет. */
.app--intro .screens,
.app--intro .tabbar,
.app--intro .mini { animation: intro-fade 1.1s ease-in-out 2.5s backwards; }

@keyframes intro-fade { from { opacity: 0; } }
@keyframes intro-rise { from { opacity: 0; transform: scale(0.94); filter: blur(12px); } }
@keyframes intro-scrim { from { background-color: var(--black); } }
@keyframes intro-veil { to { opacity: 0; } }