/* Экран «Сфера» (.p0-stage--sphere). Подключается после frontend-demo/styles/presentation0.css.
   Вход «из точек»: на бите 0 сущности стоят точками-иконками в местах
   покоя (туда же прилетают точки «Лавины»), на бите 1 разворачиваются
   в подписанные чипы. Внешняя орбита — отдельный элемент эстафеты. */

.p0-sphere-pulses { z-index: 5; }
.p0-sphere-pulse-guide { stroke: #e6cd9a33; stroke-width: .08; stroke-dasharray: .4 .5; }
.p0-sphere-pulse { stroke-width: .2; }
.p0-sphere-outer {
  position: absolute;
  z-index: 1;
  border: 1px solid #e6cd9a3d;
  border-radius: 50%;
  box-shadow: 0 0 calc(1.2 * var(--su)) #e6cd9a1f, inset 0 0 calc(1.2 * var(--su)) #e6cd9a14;
  pointer-events: none;
  transition: border-color 1.2s var(--ease), box-shadow 1.2s var(--ease);
}
.p0-stage--sphere[data-beat="3"] .p0-sphere-outer {
  border-color: #e6cd9a8c;
  box-shadow: 0 0 calc(2 * var(--su)) #e6cd9a40, inset 0 0 calc(1.6 * var(--su)) #e6cd9a24;
  animation: cs-breathe 5s ease-in-out infinite;
}
.p0-sphere-callouts { position: absolute; z-index: 6; left: calc(71 * var(--su)); top: calc(8.6 * var(--su)); width: calc(25 * var(--su)); }
.p0-sphere-callout {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  display: grid;
  gap: calc(.35 * var(--su));
  padding: calc(1 * var(--su)) calc(1.2 * var(--su));
  border: 1px solid rgba(var(--entity-rgb), .55);
  border-left-width: 3px;
  border-radius: calc(.9 * var(--su));
  background: linear-gradient(120deg, rgba(var(--entity-rgb), .16), #101817ee 60%);
  box-shadow: 0 0 calc(3 * var(--su)) rgba(var(--entity-rgb), .15);
  opacity: 0;
}
.p0-sphere-callout__eyebrow { display: flex; align-items: center; gap: .8em; font: 500 calc(.8 * var(--su)) var(--mono); letter-spacing: .16em; color: #d9c49a; }
.p0-sphere-callout__eyebrow .p0-stage-badge { font-size: .9em; letter-spacing: .04em; }
.p0-sphere-callout strong { display: flex; gap: .45em; align-items: center; font-size: calc(1.45 * var(--su)); font-weight: 580; }
.p0-sphere-callout__note { font-size: calc(1.15 * var(--su)); color: #c4ccc9; }
.p0-sphere-legend {
  position: absolute;
  z-index: 7;
  left: calc(3 * var(--su));
  right: calc(3 * var(--su));
  top: calc(3.9 * var(--su));
  display: flex;
  flex-wrap: wrap;
  gap: calc(.45 * var(--su)) calc(1.4 * var(--su));
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 max(9px, calc(.78 * var(--su))) var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #cfd6d2;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.p0-sphere-legend li { display: inline-flex; align-items: center; gap: .5em; }
.p0-sphere-legend .entity-icon { font-size: 1.3em; }
.p0-sphere-legend__concept { color: rgb(var(--lav-rgb)); }
.p0-sphere-legend li.p0-sphere-legend__note {
  padding: .1em .7em;
  border: 1px solid rgba(var(--lav-rgb), .45);
  border-radius: 999px;
  color: rgb(var(--lav-rgb));
  text-transform: none;
  letter-spacing: .04em;
}
.p0-sphere-shells {
  position: absolute;
  z-index: 3;
  right: calc(3 * var(--su));
  bottom: calc(10.5 * var(--su));
  display: grid;
  justify-items: end;
  gap: calc(.2 * var(--su));
  margin: 0;
  font: 500 calc(.8 * var(--su)) var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9aa7a3;
}
.p0-sphere-shells span::before { content: "◌ "; color: #e6cd9a; }

/* --- Бит 0 «Зажигание»: точки в местах покоя, орбиты прорисовываются ---------- */

.p0-stage--sphere .p0-sphere-seeds { opacity: 0; transition: opacity .9s var(--ease) .4s; }
.p0-stage--sphere[data-beat="0"] .p0-sphere-seeds { opacity: 1; transition: none; }
.p0-stage--sphere[data-beat="0"] .p0-sphere-core { animation: p0-sphere-ignite 1.6s var(--ease-out) both; }
@keyframes p0-sphere-ignite {
  0% { scale: .7; filter: brightness(2.6); }
  55% { scale: 1.08; filter: brightness(1.6); }
  100% { scale: 1; filter: none; }
}
.p0-stage--sphere[data-beat="0"] .p0-sphere-core__ringwrap { animation: p0-sphere-ring-in .9s var(--ease-out) calc(.5s + var(--k) * .35s) both; }
@keyframes p0-sphere-ring-in { from { opacity: 0; scale: .4; } }
.p0-stage--sphere[data-beat="0"] .p0-sphere-orbit__line { animation: p0-sphere-orbit-draw 1.6s var(--ease-out) calc(var(--k) * .25s) both; }
@keyframes p0-sphere-orbit-draw { from { stroke-dashoffset: 100; } }
.p0-stage--sphere .p0-sphere-ticks,
.p0-stage--sphere .p0-sphere-dust { transition: opacity 1.4s var(--ease) .6s; }
.p0-stage--sphere[data-beat="0"] .p0-sphere-ticks,
.p0-stage--sphere[data-beat="0"] .p0-sphere-dust { opacity: 0; }
.p0-stage--sphere[data-beat="0"] .p0-sphere-chip { animation-play-state: paused; }
/* Бит 1 «Материализация»: только прозрачность, чтобы не удваивать анимации. */
.p0-stage--sphere[data-beat="0"] .p0-sphere-chip__body { opacity: 0; transition: none; }
.p0-stage--sphere[data-beat="1"] .p0-sphere-chip__body { transition: opacity .7s var(--ease) calc(var(--i) * 50ms), box-shadow .5s; }
.p0-stage--sphere:is([data-beat="0"], [data-beat="1"]) .p0-sphere-legend,
.p0-stage--sphere:is([data-beat="0"], [data-beat="1"]) .p0-sphere-shells { opacity: 0; transform: translateY(calc(1 * var(--su))); }
.p0-stage--sphere:is([data-beat="0"], [data-beat="1"], [data-beat="2"]) .p0-stage__subtitle { opacity: 0; transform: translateY(calc(1 * var(--su))); }

/* --- Бит 2 «Фокус»: четыре остановки по 3 с -------------------------------------- */

.p0-stage--sphere[data-beat="2"] .p0-sphere-chip:not([data-focus]) .p0-sphere-chip__body { opacity: .38; }
.p0-stage--sphere[data-beat="2"] .p0-sphere-chip[data-focus] .p0-sphere-chip__body { animation: p0-sphere-focus 3s var(--ease) calc(var(--k) * 3s) both; }
.p0-stage--sphere[data-beat="2"] .p0-sphere-chip[data-focus="3"] .p0-sphere-chip__body { animation-name: p0-sphere-focus-last; }
@keyframes p0-sphere-focus {
  0%, 100% { opacity: .38; box-shadow: none; }
  10%, 85% { opacity: 1; transform: scale(1.35); box-shadow: 0 0 0 2px rgba(var(--entity-rgb), .8), 0 0 calc(4 * var(--su)) rgba(var(--entity-rgb), .7); }
}
@keyframes p0-sphere-focus-last {
  0% { opacity: .38; }
  10%, 100% { opacity: 1; transform: scale(1.35); box-shadow: 0 0 0 2px rgba(var(--entity-rgb), .8), 0 0 calc(4 * var(--su)) rgba(var(--entity-rgb), .7); }
}
.p0-stage--sphere[data-beat="2"] .p0-sphere-callout { animation: p0-sphere-callout 3s var(--ease-out) calc(var(--k) * 3s) both; }
.p0-stage--sphere[data-beat="2"] .p0-sphere-callout:last-child { animation-name: p0-sphere-callout-last; }
@keyframes p0-sphere-callout {
  0% { opacity: 0; transform: translateY(calc(1.5 * var(--su))); }
  12%, 86% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(calc(-1 * var(--su))); }
}
@keyframes p0-sphere-callout-last {
  0% { opacity: 0; transform: translateY(calc(1.5 * var(--su))); }
  12%, 100% { opacity: 1; transform: none; }
}
.p0-sphere-pulses path { opacity: 0; transition: opacity .6s; }
.p0-stage--sphere[data-beat="2"] .p0-sphere-pulses path { opacity: 1; }

/* --- Бит 3 «Дыхание» --------------------------------------------------------------- */

.p0-stage--sphere[data-beat="3"] .p0-sphere-core__plasma { animation-duration: 10s; }
.p0-stage--sphere[data-beat="3"] .p0-sphere-core__atmo { animation: cs-breathe 5s ease-in-out infinite; }