/* Экран «Лавина» (.p0-stage--avalanche). Подключается после frontend-demo/styles/presentation0.css.
   Базовые стили — законченный бит 1 «Вдох» (сущности на орбитах), бит 0 —
   селекторы [data-beat="0"]. Лица карточек и сущности — разные слои: на «вдохе»
   куча гаснет целиком, у каждой сущности движение по орбите и один прилёт. */

.p0-avalanche-noise {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(var(--amber-rgb), .16), transparent 60%),
    repeating-linear-gradient(97deg, transparent 0 3.1vw, rgba(var(--amber-rgb), .07) 3.1vw calc(3.1vw + 1px)),
    repeating-linear-gradient(8deg, transparent 0 1.7vh, #ffffff08 1.7vh calc(1.7vh + 1px));
  opacity: 0;
}
.p0-stage--avalanche[data-beat="0"] .p0-avalanche-noise { opacity: 1; animation: p0-avalanche-noise .24s steps(2) infinite; }
@keyframes p0-avalanche-noise { to { transform: translate(1%, -1.5%); } }
.p0-stage--avalanche[data-beat="0"] .p0-avalanche-aurora { opacity: .25; }

/* Шум, счётчики и виньетка гаснут мгновенно — на вспышке «вдоха»: у бита 1
   каждая анимация на счету (орбиты и прилёт сущностей). */

/* --- Счётчики и подпись «вдоха» ------------------------------------------------ */

.p0-avalanche-counters {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: calc(3.8 * var(--su));
  display: flex;
  justify-content: center;
  gap: calc(3 * var(--su));
  font-size: calc(1.3 * var(--su));
  color: #f7dcc0;
  opacity: 0;
}
.p0-avalanche-counter { display: inline-flex; align-items: center; gap: .4em; padding: .25em .9em; border-radius: 999px; border: 1px solid rgba(var(--red-rgb), .5); background: #1a1111d9; }
.p0-avalanche-counter .ui-icon { width: 1.2em; height: 1.2em; color: rgb(var(--amber-rgb)); }
.p0-avalanche-counter b { font-size: 1.3em; color: #fff0de; }
.p0-avalanche-counter .p0-stage-count { transition-duration: 3.5s; }
.p0-stage--avalanche[data-beat="0"] .p0-avalanche-counters { opacity: 1; }
.p0-stage--avalanche:not([data-beat="0"]) .p0-avalanche-counter .p0-stage-count { transition: none; }
.p0-avalanche-inhale {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: calc(3.6 * var(--su));
  margin: 0;
  text-align: center;
  font: 500 calc(1.1 * var(--su)) var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #eedcb4;
  transition: opacity .9s var(--ease) 2.6s;
}
.p0-stage--avalanche[data-beat="0"] .p0-avalanche-inhale { opacity: 0; transition: none; }

/* --- Куча карточек -------------------------------------------------------------- */

.p0-avalanche-pile {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  contain: layout paint;
  opacity: 0;
  transition: opacity .5s var(--ease) .75s;
  animation: p0-avalanche-freeze .9s ease-out both;
}
@keyframes p0-avalanche-freeze { 0%, 70% { filter: saturate(.1) brightness(.8); } 100% { filter: none; } }
.p0-stage--avalanche[data-beat="0"] .p0-avalanche-pile {
  opacity: 1;
  transition: none;
  animation: p0-avalanche-shake .14s steps(2) infinite;
}
@keyframes p0-avalanche-shake {
  0% { transform: translate(calc(.12 * var(--su)), calc(-.1 * var(--su))); }
  100% { transform: translate(calc(-.12 * var(--su)), calc(.1 * var(--su))); }
}
.p0-avalanche-card {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(11.5 * var(--su));
  height: calc(2.5 * var(--su));
  display: flex;
  align-items: center;
  gap: .5em;
  padding: 0 .65em;
  border-radius: calc(.6 * var(--su));
  border: 1px solid rgba(var(--card-rgb), .6);
  background: linear-gradient(120deg, rgba(var(--card-rgb), .26), #141414f0 70%);
  color: #fbf1e3;
  font-size: calc(.95 * var(--su));
  white-space: nowrap;
  box-shadow: 0 calc(.4 * var(--su)) calc(1.2 * var(--su)) #00000066;
  transform: translate(calc(var(--x) * var(--su)), calc(var(--y) * var(--su))) rotate(var(--r));
}
.p0-avalanche-card[data-tone="0"] { --card-rgb: var(--gold-rgb); }
.p0-avalanche-card[data-tone="1"] { --card-rgb: var(--amber-rgb); }
.p0-avalanche-card[data-tone="2"] { --card-rgb: var(--red-rgb); }
.p0-avalanche-card .ui-icon { width: 1.3em; height: 1.3em; flex: none; color: rgb(var(--card-rgb)); }
.p0-avalanche-card__text { display: grid; min-width: 0; line-height: 1.12; }
.p0-avalanche-card__text > * { overflow: hidden; text-overflow: ellipsis; }
.p0-avalanche-card__text small {
  font: 500 .72em var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(var(--card-rgb), .95);
}
.p0-stage--avalanche[data-beat="0"] .p0-avalanche-card:not([data-landed]) {
  animation: p0-avalanche-fall var(--fdur) cubic-bezier(.35, .1, .5, 1) var(--fd) both;
}
@keyframes p0-avalanche-fall {
  from { transform: translate(calc(var(--x) * var(--su)), calc((var(--y) - 60) * var(--su))) rotate(calc(var(--r) * -2)); }
  80% { transform: translate(calc(var(--x) * var(--su)), calc((var(--y) + .6) * var(--su))) rotate(var(--r)); }
}
/* Без движения: неподвижный приглушённый коллаж за сферой с точками. */
.p0-stage--avalanche[data-reduced="true"] .p0-avalanche-pile { opacity: .16; animation: none; }

/* --- Сущности: из карточки — через ядро — на вращающуюся орбиту ------------------
   Внешний элемент движется по орбите (offset-path, ключевые кадры p0-sphere-orbit)
   с фазой, при которой к концу «вдоха» стоит в месте покоя экрана «Сфера».
   Внутренний прилетает к нему из своей карточки: ядро сначала втягивает
   сигнал, затем отпускает его на орбиту — цель движется, путь выходит дугой.
   На бите 0 слой скрыт (display: none), поэтому вращение начинается ровно
   с «вдохом». Без движения сущности стоят в местах покоя (инлайн-стиль). */

.p0-avalanche-orbiters { position: absolute; inset: 0; }
.p0-stage--avalanche[data-beat="0"] .p0-avalanche-orbiters { display: none; }
.p0-avalanche-orbiter {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  offset-rotate: 0deg;
  animation-name: p0-sphere-orbit;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.p0-avalanche-orbiter .p0-avalanche-dot { position: relative; offset-path: none; }
.p0-avalanche-orbiter[data-shell="0"] .p0-avalanche-dot { width: calc(1.7 * var(--su)); height: calc(1.7 * var(--su)); }
.p0-avalanche-orbiter[data-shell="3"] .p0-avalanche-dot { width: calc(1.25 * var(--su)); height: calc(1.25 * var(--su)); }
.p0-stage--avalanche[data-beat="1"] .p0-avalanche-dot {
  animation: p0-avalanche-capture var(--fdur) cubic-bezier(.45, 0, .2, 1) var(--fd) backwards;
}
@keyframes p0-avalanche-capture {
  0% { transform: translate(calc(var(--x0) * var(--su)), calc(var(--y0) * var(--su))) scale(.6); opacity: 0; }
  6% { opacity: 1; }
  45% { transform: translate(calc(var(--x1) * var(--su)), calc(var(--y1) * var(--su))) scale(.45); }
  100% { transform: none; opacity: 1; }
}

/* --- Вращение орбит ---------------------------------------------------------------
   По линии каждой орбиты бегут два светлых штриха, пунктир ползёт в ту же
   сторону — по часовой у орбит 1 и 3, против — у 2 и 4, как сущности. */

.p0-stage--avalanche .p0-sphere-orbit__line {
  stroke: #e6cd9aa6;
  stroke-width: .16;
  stroke-dasharray: 16 34;
  transition: none;
  animation: p0-avalanche-orbit-flow calc(12s + var(--k) * 5s) linear infinite;
}
.p0-stage--avalanche .p0-sphere-orbit:nth-child(odd of .p0-sphere-orbit) .p0-sphere-orbit__line { stroke: #b7a2f5a6; }
.p0-stage--avalanche .p0-sphere-orbit__dash { animation: p0-avalanche-dash 5s linear infinite; }
.p0-stage--avalanche .p0-sphere-orbit:nth-child(even of .p0-sphere-orbit) :is(.p0-sphere-orbit__line, .p0-sphere-orbit__dash) {
  animation-direction: reverse;
}
@keyframes p0-avalanche-orbit-flow { to { stroke-dashoffset: -100; } }
@keyframes p0-avalanche-dash { to { stroke-dashoffset: -2.8; } }

/* --- Виньетка, ударная волна, сфера ---------------------------------------------- */

.p0-avalanche-vignette {
  position: absolute;
  inset: calc(-5 * var(--su));
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(var(--red-rgb), .38) 100%);
  opacity: 0;
}
/* 72 удара в минуту: период 0,833 с. */
.p0-stage--avalanche[data-beat="0"] .p0-avalanche-vignette { animation: p0-avalanche-heart .833s ease-in-out infinite; }
@keyframes p0-avalanche-heart { 0%, 100% { opacity: .35; } 15% { opacity: 1; } 30% { opacity: .5; } 45% { opacity: .85; } }
.p0-avalanche-shock {
  position: absolute;
  z-index: 6;
  left: calc(45 * var(--su));
  top: calc(19.5 * var(--su));
  width: calc(10 * var(--su));
  height: calc(10 * var(--su));
  border-radius: 50%;
  border: 2px solid #f5e6c4;
  box-shadow: 0 0 calc(3 * var(--su)) #e6cd9a, inset 0 0 calc(2 * var(--su)) #e6cd9a88;
  opacity: 0;
  pointer-events: none;
}
.p0-stage--avalanche[data-beat="1"] .p0-avalanche-shock { animation: p0-avalanche-shock .9s var(--ease-out) .1s both; }
@keyframes p0-avalanche-shock { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(14); } }

/* Сфера лавины — та же геометрия, что на экране «Сфера» (SPHERE_MAIN):
   её собственные точки скрыты, вместо них — сущности из карточек. */
.p0-stage--avalanche .p0-sphere { z-index: 5; }
.p0-stage--avalanche[data-beat="0"] .p0-sphere { z-index: 3; }
.p0-stage--avalanche .p0-sphere__chips,
.p0-stage--avalanche .p0-sphere-meteors { display: none; }
/* Орбиты, шкала, пыль и пол загораются одним слоем сразу после вспышки:
   сущностям уже есть куда встать. */
.p0-stage--avalanche .p0-sphere__surface { transition: opacity 1s var(--ease) .5s; }
.p0-stage--avalanche[data-beat="0"] .p0-sphere__surface { opacity: 0; transition: none; }
/* На бите 0 сферу закрывают карточки: её пыль и ядро стоят, бюджет 200
   анимаций остаётся падениям. На «вдохе» сфера оживает; полярное сияние
   фона не движется на обоих битах. */
.p0-stage--avalanche[data-beat="0"] :is(.p0-sphere-dust, .p0-sphere-core__plasma, .p0-sphere-core__ring, .holo-constellation circle, .holo-longitude),
.p0-stage--avalanche .p0-stage-aurora {
  animation-play-state: paused;
}
.p0-stage--avalanche[data-beat="0"] .p0-sphere-core { animation: p0-avalanche-flicker 1.9s steps(1) infinite; opacity: .55; filter: grayscale(.7); }
@keyframes p0-avalanche-flicker { 0%, 100% { opacity: .55; } 20% { opacity: .2; } 24% { opacity: .6; } 60% { opacity: .35; } }
.p0-stage--avalanche[data-beat="1"] .p0-sphere-core { animation: p0-avalanche-flash 1.2s var(--ease-out) both; }
@keyframes p0-avalanche-flash { 0% { filter: brightness(3); scale: 1.4; } 100% { filter: none; scale: 1; } }