/* ---------- живая главная (alive.js): приёмы Suno без нагрузки на устройство ---------- */

/* Аура рисуется на маленьком холсте и растягивается браузером: пятна размытые, растяжение не видно.
   Двигает её alive.js 15 раз в секунду, а не CSS-анимация, которая собирала бы каждый кадр экрана. */
.hero.alive::before { display: none; }
.hero-aura { position: absolute; z-index: -1; inset: 0 0 auto 0; width: 100%; height: 620px; pointer-events: none; }

/* Поле «дышит» тёплым светом по бокам, как у Suno, в цветах нашей ауры. Яркость (--breath) ставит alive.js;
   свой слой (will-change) нужен, чтобы смена яркости не перерисовывала размытую тень */
.hero .prompt::before {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: -7px 0 40px rgba(217, 64, 143, .16), 7px 0 40px rgba(249, 138, 60, .16);
  opacity: var(--breath, .65); will-change: opacity;
}

/* Выбран файл — кнопка «Создать минус» зовёт: три волны света, и дальше спокойно */
.prompt:has(.drop.has-file) .prompt-go { animation: go-call 1.6s ease-out 3; }
@keyframes go-call { from { box-shadow: 0 0 0 0 rgba(240, 81, 106, .55); } to { box-shadow: 0 0 0 14px rgba(240, 81, 106, 0); } }

/* Значок загрузки отзывается на наведение, а когда над полем держат файл — покачивается: «бросайте сюда» */
.drop-icon svg { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.drop:hover .drop-icon svg { transform: translateY(-2px); }
.drop.over .drop-icon svg { animation: drop-bob .8s ease-in-out infinite alternate; }
@keyframes drop-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* обложка светлеет плавно, а не рывком */
.song-card .cover { transition: filter .3s ease-out; }

/* По плашке подписки медленно ходит отсвет — эхо ауры наверху (сдвигает alive.js) */
.pitch { position: relative; isolation: isolate; overflow: hidden; }
.pitch-glow {
  position: absolute; z-index: -1; top: -60%; left: -25%; width: 55%; height: 220%; pointer-events: none; will-change: transform;
  background: radial-gradient(closest-side, rgba(240, 81, 106, .16), transparent);
}

/* ---------- как выглядит песня: вместо «Пока пусто» (слоги и ноты — стили страницы песни) ---------- */
#songs.has-demo > .empty { display: none; }
.demo-song {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: center;
  padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface);
}
.demo-text h3 { margin: 0 0 12px; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.demo-text ul { list-style: none; display: grid; gap: 8px; margin: 0 0 20px; padding: 0; color: var(--muted); font-size: 14px; }
.demo-text li { position: relative; padding-left: 22px; }
.demo-text li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 9px; height: 5px; transform: rotate(-45deg);
  border: solid var(--ok); border-width: 0 0 2px 2px;
}
.demo-stage { display: grid; gap: 6px; min-width: 0; padding: 12px 8px; border-radius: 16px; background: var(--bg); }
.demo-stage .syl { --surface: var(--bg); cursor: default; transition: background-color .15s ease; }
.demo-stage .syl:not(.now):hover { background: transparent; }
.demo-stage .syl .tx, .demo-stage .syl .nt { transition: color .2s ease, box-shadow .2s ease; }
.demo-line {
  position: relative; padding: 8px 64px 8px 10px; border-radius: 12px; transition: background-color .2s ease;
}
.demo-line.active { background: var(--line-active); }
.demo-line .words { gap: 10px 8px; }
.demo-line .line-score { top: 50%; margin-top: -10px; }
.demo-voice {
  display: flex; align-items: center; gap: 8px; margin: 4px 10px 0; min-height: 24px; font-size: 13px; color: var(--muted);
}
.demo-voice:not(.hit):not(.close) > :not(:first-child) { visibility: hidden; }
.demo-voice b { font-weight: 600; }
.demo-voice.hit b { color: var(--hit); }
.demo-voice.close b { color: var(--close); }
@media (max-width: 860px) {
  .demo-song { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .demo-line { padding-right: 56px; }
}
@media (max-width: 700px) {
  .demo-stage .syl .tx { font-size: 16px; }
  .demo-stage .syl { min-width: 2em; }
}

/* При первом открытии блоки проявляются по очереди, а аура разгорается. Только один раз: на страницу, которую
   открывают десятки раз, каждый раз ждать появления было бы утомительно */
#view.enter .hero-aura { animation: aura-in 1.4s ease-out both; }
#view.enter > .hero > :not(.hero-aura), #view.enter > .free-steps > li, #view.enter > #songs, #view.enter > .pitch {
  animation: rise .5s cubic-bezier(.2, .7, .2, 1) both;
}
#view.enter > .hero > :nth-child(3) { animation-delay: 60ms; }
#view.enter > .hero > :nth-child(n+4) { animation-delay: 120ms; }
#view.enter > .free-steps > li:nth-child(1) { animation-delay: 200ms; }
#view.enter > .free-steps > li:nth-child(2) { animation-delay: 250ms; }
#view.enter > .free-steps > li:nth-child(3) { animation-delay: 300ms; }
#view.enter > #songs, #view.enter > .pitch { animation-delay: 340ms; }
@keyframes aura-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .prompt:has(.drop.has-file) .prompt-go, .drop.over .drop-icon svg { animation: none; }
  .drop:hover .drop-icon svg { transform: none; }
  #view.enter .hero-aura, #view.enter > .hero > :not(.hero-aura), #view.enter > .free-steps > li, #view.enter > #songs, #view.enter > .pitch { animation: none; }
}