/* Выставочная презентация /presentation/<slug>.
   Кадр 16:9 масштабируется единицей --su (1 % ширины кадра), поэтому композиция
   одинакова на 1080p, 4K и ноутбуке; фоновые слои занимают весь viewport.
   Непрерывное движение — только transform и opacity. Финальное состояние
   экрана задаётся базовыми стилями, ранние биты — селекторами [data-beat]:
   при reduced motion (motion.css гасит анимации с !important) виден законченный
   экран. Собственные классы не наследуют компактные .panel, .card, .orbit-node. */

@property --count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.pres {
  --su: min(1vw, 1.77778vh);
  --frame-left: calc(50% - 50 * var(--su));
  --frame-top: calc(50% - 28.125 * var(--su));
  --gold-rgb: 230, 205, 154;
  --lav-rgb: 183, 162, 245;
  --mint-rgb: 126, 225, 200;
  --amber-rgb: 240, 169, 90;
  --red-rgb: 240, 120, 126;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dir: 1;
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
  background: var(--bg);
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}
.pres[data-direction="back"] { --dir: -1; }
.pres[data-idle="true"][data-play-mode="auto"] { cursor: none; }
.pres .star-field { z-index: -1; }
.pres:has(.stage--sphere) .ambient-backdrop__orbit { display: block; opacity: .7; }

.pres-frame,
.stage__frame {
  position: absolute;
  left: var(--frame-left);
  top: var(--frame-top);
  width: calc(100 * var(--su));
  height: calc(56.25 * var(--su));
}
.pres-main { position: absolute; inset: 0; z-index: 1; }

/* --- Слой глубины оболочки ------------------------------------------------- */

.pres-depth { position: fixed; inset: 0; z-index: 0; pointer-events: none; contain: strict; }
.pres-depth__layer,
.pres-depth__dust {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  fill: #efe4cc;
  transition: scale 350ms cubic-bezier(.5, 0, .9, .4);
}
.pres-depth__layer--0 { opacity: .35; animation: pres-drift 240s linear infinite alternate; translate: calc(var(--px, 0) * -.5%) calc(var(--py, 0) * -.5%); }
.pres-depth__layer--1 { opacity: .45; animation: pres-drift 170s linear infinite alternate-reverse; translate: calc(var(--px, 0) * -1%) calc(var(--py, 0) * -1%); }
.pres-depth__layer--2 { opacity: .55; animation: pres-drift 120s linear infinite alternate; translate: calc(var(--px, 0) * -1.5%) calc(var(--py, 0) * -1.5%); }
.pres-depth__dust circle { fill: #e6cd9a; animation: cs-breathe 7s ease-in-out infinite; }
.pres[data-phase="leaving"] .pres-depth__layer { scale: calc(1 + .9 * var(--dir) * var(--dir)) 1; }
@keyframes pres-drift {
  from { transform: translate3d(-1.5%, -1%, 0); }
  to { transform: translate3d(1.5%, 1%, 0); }
}

/* --- HUD, метка, вуаль, эстафета ------------------------------------------- */

.pres-hud { z-index: 4; pointer-events: none; }
.pres-hud svg { width: 100%; height: 100%; }
.pres-hud__corners { stroke: #d9bd8566; stroke-width: .12; vector-effect: non-scaling-stroke; }
.pres-hud__ticks { stroke: #b9a17155; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pres-hud__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e6cd9a55, #b7a2f544, transparent);
  animation: pres-scan 14s linear infinite;
  opacity: .5;
}
@keyframes pres-scan {
  from { transform: translateY(0); }
  to { transform: translateY(calc(56.25 * var(--su))); }
}
.pres-mark {
  position: absolute;
  z-index: 12;
  top: calc(var(--frame-top) + 1.4 * var(--su));
  right: calc(var(--frame-left) + 3 * var(--su));
}
.pres-mark .demo-mark {
  display: inline-block;
  font-size: max(11px, calc(.85 * var(--su)));
  padding: .25em .9em;
  background: #0b111166;
}
.pres-veil {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 55% 45%, #1b2928d9, #070b0b 78%);
}
.pres-veil__horizon {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e8d1a2cc, #b5aaffaa, transparent);
  box-shadow: 0 0 50px 3px #debe7d50;
  transform: rotate(-9deg) translateY(-60vh);
}
.pres[data-phase="leaving"] .pres-veil { animation: pres-veil-in 350ms ease-in both; }
.pres[data-phase="leaving"] .pres-veil__horizon { animation: pres-horizon-in 350ms ease-in both; }
.pres[data-phase="entering"] .pres-veil { animation: pres-veil-out 900ms var(--ease-out) both; }
.pres[data-phase="entering"] .pres-veil__horizon { animation: pres-horizon-out 900ms var(--ease-out) both; }
@keyframes pres-veil-in { from { opacity: 0; } to { opacity: .85; } }
@keyframes pres-veil-out { from { opacity: .85; } to { opacity: 0; } }
@keyframes pres-horizon-in {
  from { transform: rotate(-9deg) translateY(-60vh); }
  to { transform: rotate(-9deg) translateY(0); }
}
@keyframes pres-horizon-out {
  from { transform: rotate(-9deg) translateY(0); }
  to { transform: rotate(-9deg) translateY(60vh); }
}
/* Эстафета (data-handoff на .pres): общий элемент перелетает FLIP-анимацией
   из прямоугольника уходящего экрана. Вуаль «варпа» слабее, кадры не
   размываются и не сдвигаются целиком: исчезают и появляются части кадра,
   кроме эстафетного элемента (data-handoff-out / data-handoff-live) и его
   контейнера. Трансформации FLIP — на хосте поверхности renderer, не на <svg>. */
.pres[data-handoff][data-phase="leaving"] .pres-veil { animation: pres-veil-in-soft 350ms ease-in both; }
.pres[data-handoff][data-phase="entering"] .pres-veil { animation: pres-veil-out-soft 900ms var(--ease-out) both; }
@keyframes pres-veil-in-soft { from { opacity: 0; } to { opacity: .35; } }
@keyframes pres-veil-out-soft { from { opacity: .35; } to { opacity: 0; } }
.pres[data-handoff] .stage--leaving .stage__frame,
.pres[data-handoff] .stage--entering .stage__frame { animation: none; }
.pres[data-handoff] .stage--leaving .stage__frame > :not([data-handoff-out], :has([data-handoff-out])) {
  animation: stage-part-leave 350ms ease-in both;
}
.pres[data-handoff] .stage--entering .stage__frame > :not([data-handoff-live], :has([data-handoff-live])) {
  animation: stage-part-enter 900ms var(--ease-out) both;
}
@keyframes stage-part-leave { to { opacity: 0; } }
@keyframes stage-part-enter { from { opacity: 0; } }

/* --- Каркас экрана ---------------------------------------------------------- */

.stage { position: absolute; inset: 0; }
.stage__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.stage__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 48%, transparent 55%, #050808b3 100%);
}
.stage__frame { z-index: 1; }
.stage--leaving .stage__frame { animation: stage-leave 350ms cubic-bezier(.5, 0, .9, .4) both; }
.stage--leaving .stage__bg { animation: stage-bg-leave 350ms ease-in both; }
.stage--entering .stage__frame { animation: stage-enter 900ms var(--ease-out) both; }
.stage--entering .stage__bg { animation: stage-bg-enter 900ms var(--ease-out) both; }
@keyframes stage-leave {
  to {
    opacity: 0;
    transform: translateX(calc(var(--dir) * -3 * var(--su))) scale(1.06);
    filter: blur(8px);
  }
}
@keyframes stage-enter {
  from {
    opacity: 0;
    transform: translateX(calc(var(--dir) * 3 * var(--su))) scale(.94);
    filter: blur(6px);
  }
}
@keyframes stage-bg-leave { to { opacity: 0; } }
@keyframes stage-bg-enter { from { opacity: 0; } }

.stage__eyebrow {
  position: absolute;
  z-index: 8;
  left: calc(3 * var(--su));
  top: calc(1.6 * var(--su));
  display: flex;
  align-items: center;
  gap: .7em;
  font: 500 max(10px, calc(.9 * var(--su)))/1.2 var(--mono);
  letter-spacing: .16em;
  color: #dcc699;
  white-space: nowrap;
}
.stage__eyebrow-sep { opacity: .5; }
/* Бейдж честности: «Работает в демо», «Концепт», «Демо · сценарий», «Демо + концепт». */
.stage-badge {
  --badge-rgb: var(--gold-rgb);
  display: inline-flex;
  align-items: center;
  padding: .22em .75em;
  border: 1px solid rgba(var(--badge-rgb), .5);
  border-radius: 999px;
  background: rgba(var(--badge-rgb), .1);
  color: rgb(var(--badge-rgb));
  font: 500 max(10px, calc(.8 * var(--su)))/1.2 var(--mono);
  letter-spacing: .06em;
  white-space: nowrap;
}
.stage-badge[data-badge="demo"] { --badge-rgb: var(--mint-rgb); }
.stage-badge[data-badge="concept"] { --badge-rgb: var(--lav-rgb); }
.stage-badge[data-badge="script"] { --badge-rgb: var(--gold-rgb); }
.stage-badge[data-badge="mixed"] {
  --badge-rgb: var(--mint-rgb);
  border-color: transparent;
  background:
    linear-gradient(#101817, #101817) padding-box,
    linear-gradient(90deg, rgba(var(--mint-rgb), .7), rgba(var(--lav-rgb), .7)) border-box;
}
.stage__eyebrow .stage-badge { margin-left: .4em; }
.stage__signal {
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: #e6cd9a;
  box-shadow: 0 0 10px #e6cd9a;
  animation: cs-breathe 3s ease-in-out infinite;
}
.stage--entering .stage__eyebrow { animation: stage-reveal 1.2s var(--ease-out) .25s both; }
.stage__copy {
  position: absolute;
  z-index: 8;
  left: calc(3 * var(--su));
  bottom: calc(6.4 * var(--su));
  width: calc(80 * var(--su));
  pointer-events: none;
}
.stage__copy h1 {
  margin: 0;
  font-size: max(22px, calc(5 * var(--su)));
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.02;
  color: #f6f2ea;
  outline: none;
  text-shadow: 0 0 calc(3 * var(--su)) #0a0f0f;
}
.stage .stage__copy h1:is(:focus, :focus-visible) { outline: none; box-shadow: none; }
.stage__subtitle {
  margin: calc(.8 * var(--su)) 0 0;
  max-width: calc(72 * var(--su));
  font-size: max(12px, calc(1.85 * var(--su)));
  line-height: 1.32;
  color: #c9d0cd;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.stage--entering h1 { animation: stage-reveal 1.1s var(--ease-out) .15s both; }
@keyframes stage-reveal {
  from { clip-path: inset(0 100% 0 0); opacity: .2; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
.stage-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.stage-aurora {
  position: absolute;
  width: 90vw;
  height: 60vh;
  border-radius: 50%;
  opacity: .55;
  mix-blend-mode: screen;
  animation: cs-aurora 32s ease-in-out infinite alternate;
}
.stage-aurora--gold {
  left: -10%;
  top: -18%;
  background: radial-gradient(ellipse, #86672a55, #7b653822 42%, transparent 68%);
}
.stage-aurora--violet {
  right: -25%;
  bottom: -15%;
  background: radial-gradient(ellipse, #6654cf44, #816a3d18 42%, transparent 68%);
  animation-delay: -16s;
  animation-duration: 38s;
}
/* Счётчик растёт до --target; число доступно отдельным скрытым текстом. */
.stage-count {
  --count: var(--target);
  counter-reset: stage-count var(--count);
  transition: --count 2.4s cubic-bezier(.2, .7, .2, 1);
  font-variant-numeric: tabular-nums;
}
.stage-count::after { content: counter(stage-count); }

/* --- Управление -------------------------------------------------------------- */

.pres-controls {
  position: absolute;
  z-index: 30;
  left: calc(var(--frame-left) + 2.2 * var(--su));
  width: calc(95.6 * var(--su));
  top: calc(var(--frame-top) + 50.6 * var(--su));
  display: flex;
  align-items: center;
  gap: calc(.7 * var(--su));
  padding: calc(.45 * var(--su)) calc(.6 * var(--su));
  border: 1px solid #e6cd9a24;
  border-radius: 999px;
  background: linear-gradient(110deg, #16201fcc, #0c1212b8);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px #f3e6c91a, 0 10px 40px #04070766;
  font-size: max(12px, calc(1 * var(--su)));
  transition: opacity .6s var(--ease);
}
.pres:not([data-screen="start"])[data-idle="true"][data-play-mode="auto"] .pres-controls:not(:focus-within) { opacity: 0; }
.pres-controls__spacer { flex: 1; }
.pres-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: max(32px, calc(2.8 * var(--su)));
  padding: 0 1.1em;
  border: 1px solid rgba(var(--gold-rgb), .28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--gold-rgb), .12), rgba(98, 120, 114, .08));
  color: #eef0ec;
  font: inherit;
  font-weight: 520;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur);
}
.pres-btn:hover,
.pres-btn:focus-visible {
  border-color: rgba(var(--gold-rgb), .7);
  background: linear-gradient(135deg, rgba(var(--gold-rgb), .24), rgba(98, 120, 114, .12));
  box-shadow: 0 0 22px rgba(var(--gold-rgb), .18);
}
.pres-btn:focus-visible,
.pres-menu button:focus-visible { outline: 2px solid #e6cd9acc; outline-offset: 2px; }
.pres-btn--next {
  color: #1c2a29;
  border-color: #efe0c1;
  background: linear-gradient(135deg, #eddbb8, #e0c184);
}
.pres-btn--next:hover,
.pres-btn--next:focus-visible { background: linear-gradient(135deg, #f5ead3, #e8cf9b); }
.pres-btn--auto[aria-pressed="true"] { border-color: rgba(var(--mint-rgb), .55); color: #d9f5ec; }
.pres-btn__icon { display: inline-flex; }
.pres-btn__icon .ui-icon { width: 1.15em; height: 1.15em; }
.pres-btn__icon--back { transform: scaleX(-1); }
.pres-paused {
  font: 500 .8em var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b8e9da;
  animation: cs-breathe 2.4s ease-in-out infinite;
}
.pres-controls .header-action {
  width: max(32px, calc(2.8 * var(--su)));
  height: max(32px, calc(2.8 * var(--su)));
  border-radius: 50%;
}
.pres-controls .header-action .ui-icon { width: 45%; height: 45%; }
/* На «Старте» управление доступно постоянно, включая пролог. */
.pres[data-screen="start"] .pres-controls { opacity: 1; }
.pres-btn__icon--menu {
  flex-direction: column;
  justify-content: center;
  gap: .2em;
  width: 1em;
}
.pres-btn__icon--menu span { display: block; height: 1.5px; border-radius: 1px; background: currentColor; }
/* Индикатор «Глава II · Как знания попадают · 5 / 15» и шкала без подписей:
   деление на экран, экраны вне программы приглушены. */
.pres-progress {
  position: relative;
  flex: 0 1 calc(30 * var(--su));
  min-width: 0;
  display: grid;
  gap: calc(.35 * var(--su));
  padding: 0 .4em;
}
.pres-progress__label {
  overflow: hidden;
  font: 500 .82em/1.2 var(--mono);
  letter-spacing: .06em;
  color: #d9c9a4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pres-progress__ticks { display: flex; gap: 3px; height: 4px; }
.pres-progress__tick {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 2px;
  background: #ffffff1f;
}
.pres-progress__tick[data-in-program="false"] { opacity: .35; }
.pres-progress__tick[data-state="done"] { background: #e6cd9a80; }
.pres-progress__tick[data-state="current"] { background: #e6cd9a33; }
.pres-progress__tick[data-state="current"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #e6cd9a;
  transform-origin: left;
  transform: scaleX(var(--fill, 0));
  transition: transform 600ms var(--ease);
}
.pres-progress__timer {
  position: absolute;
  left: .4em;
  right: .4em;
  bottom: calc(-.45 * var(--su) - 2px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7ee1c8, #e6cd9a);
  transform-origin: left;
  animation: pres-timer linear both;
}
.pres-progress__timer[data-running="false"] { animation-play-state: paused; }
@keyframes pres-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- Меню «Старта» ------------------------------------------------------------
   Положение задаёт styles/presentation/start.css; здесь — вид пунктов. */

.pres-menu {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: calc(.8 * var(--su));
  padding: calc(1.2 * var(--su)) calc(1.3 * var(--su));
  border: 1px solid #e6cd9a2e;
  border-radius: calc(1.2 * var(--su));
  background: linear-gradient(160deg, #16201fd9, #0b1111e6);
  box-shadow: inset 0 1px #f3e6c914, 0 calc(1 * var(--su)) calc(4 * var(--su)) #04070766;
  color: #dfe4e1;
  font-size: max(11px, calc(.95 * var(--su)));
}
.pres-menu__title {
  margin: 0;
  font: 500 .8em var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #cdb98f;
}
.pres-menu__chapters {
  display: grid;
  align-content: start;
  gap: calc(.55 * var(--su));
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: #e6cd9a44 transparent;
}
.pres-menu__chapter-title {
  display: flex;
  align-items: baseline;
  gap: .6em;
  font-size: .78em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b9a57c;
}
.pres-menu__chapter-title b { min-width: 2.4em; font: 600 1em var(--mono); color: #e6cd9a; }
.pres-menu__chapter ul { display: grid; gap: 1px; margin: .2em 0 0; padding: 0; list-style: none; }
.pres-menu__item {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .6em;
  width: 100%;
  padding: .2em .55em;
  border: 1px solid transparent;
  border-radius: .6em;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.pres-menu__item:hover,
.pres-menu__item:focus-visible { border-color: #e6cd9a66; background: #e6cd9a14; }
.pres-menu__num { font: 600 .82em var(--mono); color: #9fada9; }
.pres-menu__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres-menu__time { font: .78em var(--mono); color: #93a09c; }
.pres-menu__item .stage-badge { font-size: .68em; }
.pres-menu__programs { display: flex; flex-wrap: wrap; gap: .5em; }
.pres-menu__program {
  min-height: max(30px, calc(2.4 * var(--su)));
  padding: 0 .75em;
  border: 1px solid rgba(var(--mint-rgb), .4);
  border-radius: 999px;
  background: rgba(var(--mint-rgb), .08);
  color: #d9f5ec;
  font: inherit;
  font-size: .8em;
  cursor: pointer;
}
.pres-menu__program:hover,
.pres-menu__program:focus-visible { border-color: rgba(var(--mint-rgb), .8); background: rgba(var(--mint-rgb), .16); }

/* Узкий и вертикальный экран: композиция кадра не оптимизируется, но
   управление остаётся доступным у нижнего края viewport. */
@media (max-aspect-ratio: 4/3) {
  .pres-controls {
    left: 8px;
    right: 8px;
    width: auto;
    top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 18px;
    font-size: 13px;
  }
  .pres-controls__spacer { display: none; }
  .pres-progress { order: -1; flex-basis: 100%; }
  .pres-mark { top: 8px; right: 8px; }
}
/* Телефон и вертикальный экран: кадр 16:9 занимает узкую полосу, заголовок
   с минимальным размером шрифта не помещается на сцене и уходит под кадр,
   eyebrow переносится. На 4:3 (1024 × 768) под кадром места нет — там
   заголовок остаётся в кадре. */
@media (max-aspect-ratio: 5/4) {
  /* Под кадром нужны место для заголовка с подзаголовком и отдельный отступ
     для панели. На невысоком вертикальном экране центрирование иначе
     уводит текст под кнопки управления. */
  .pres {
    --frame-top: max(0px, min(
      calc(50vh - 28.125 * var(--su)),
      calc(100vh - 56.25 * var(--su) - max(220px, calc(11 * var(--su) + 110px)) - env(safe-area-inset-bottom, 0px))
    ));
  }
  .stage__copy {
    top: calc(56.25 * var(--su) + 12px);
    bottom: auto;
    width: calc(94 * var(--su));
  }
  .stage__subtitle { max-width: none; }
  .stage__eyebrow {
    right: calc(3 * var(--su));
    flex-wrap: wrap;
    row-gap: .35em;
    white-space: normal;
  }
}
@media (pointer: coarse) {
  .pres-btn,
  .pres-menu button,
  .pres-controls .header-action { min-height: 44px; min-width: 44px; }
}
@supports not (backdrop-filter: blur(4px)) {
  .pres-controls { background: #121a1af2; }
}

/* --- Сфера ------------------------------------------------------------------
   Компонент Sphere («Старт», «Лавина», «Сфера», «Возврат», «Финал»).
   Масштаб глубины у элементов на орбите — transform: scale(), не свойство
   scale: оно применяется после offset и сжимало бы саму орбиту. */

.sphere { position: absolute; z-index: 2; pointer-events: none; }
.sphere__tilt {
  position: absolute;
  inset: 0;
  transform: perspective(calc(140 * var(--su))) rotateX(calc(var(--py, 0) * -6deg)) rotateY(calc(var(--px, 0) * 6deg));
  transition: transform .9s var(--ease);
}
.sphere__surface { position: absolute; inset: 0; }
.sphere__surface > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sphere-floor-grid { stroke: #b1976230; stroke-width: .1; }
.sphere-orbit__dash { stroke: #d9c59e40; stroke-width: .12; stroke-dasharray: .5 .9; transition: opacity 1s var(--ease); }
.sphere-orbit__line {
  stroke: #e6cd9a4d;
  stroke-width: .09;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s var(--ease-out) calc(var(--k) * .3s);
}
.sphere-orbit:nth-child(odd of .sphere-orbit) .sphere-orbit__line { stroke: #b7a2f54d; }
.sphere-ticks { stroke: #cab68d77; stroke-width: .1; }
.sphere-dust { fill: #eadbbd; opacity: .5; transform-origin: 0 0; animation: cs-orbit 170s linear infinite; }
.sphere-dust--b { animation-duration: 240s; animation-direction: reverse; opacity: .35; }
.sphere-dust--c { animation-duration: 120s; opacity: .45; }
.sphere-dust--d { animation-duration: 300s; animation-direction: reverse; opacity: .3; }
.sphere-meteor {
  stroke: #f5e8cb;
  stroke-width: .14;
  stroke-linecap: round;
  stroke-dasharray: 10 90;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: sphere-meteor 7.4s linear infinite;
}
@keyframes sphere-meteor {
  0% { stroke-dashoffset: 100; opacity: 0; }
  2% { opacity: .9; }
  12% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.sphere__chips { position: absolute; inset: 0; }
.sphere-chip {
  position: absolute;
  left: 0;
  top: 0;
  offset-rotate: 0deg;
  pointer-events: auto;
  animation-name: sphere-orbit;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* Начало ellipse() — правая точка, движение по часовой стрелке: нижняя
   половина ближе к зрителю (крупнее, поверх ядра), верхняя — дальше.
   Дальняя половина уходит глубже, чем ближняя выступает: подписи заднего
   плана перестают спорить с передним, и кадр получает глубину резкости.
   Дешевле размытия: меняются только scale и opacity. */
@keyframes sphere-orbit {
  0% { offset-distance: 0%; transform: scale(.86); opacity: .86; z-index: 3; }
  25% { transform: scale(1.03); opacity: 1; }
  49.9% { z-index: 3; }
  50% { transform: scale(.86); opacity: .8; z-index: 1; }
  75% { transform: scale(.64); opacity: .3; }
  99.9% { z-index: 1; }
  100% { offset-distance: 100%; transform: scale(.86); opacity: .86; z-index: 3; }
}
.sphere-chip__body {
  --chip-scale: 1;
  display: flex;
  align-items: center;
  gap: calc(.5 * var(--su));
  padding: calc(.3 * var(--su)) calc(.85 * var(--su)) calc(.3 * var(--su)) calc(.3 * var(--su));
  border: 1px solid rgba(var(--entity-rgb), .5);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(var(--entity-rgb), .22), #0e1615d9 58%);
  box-shadow: 0 0 calc(1.2 * var(--su)) rgba(var(--entity-rgb), .16), inset 0 1px #ffffff10;
  white-space: nowrap;
  transform: scale(var(--chip-scale));
  transition: opacity .7s var(--ease), transform .7s var(--ease-out), box-shadow .5s;
}
.sphere-chip[data-shell="0"] .sphere-chip__body { --chip-scale: 1.12; }
.sphere-chip[data-shell="3"] .sphere-chip__body { --chip-scale: .92; }
.sphere-chip:is([data-shell="2"], [data-shell="3"]) small { display: none; }
.sphere-chip__icon {
  display: grid;
  place-items: center;
  width: calc(1.7 * var(--su));
  height: calc(1.7 * var(--su));
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(var(--entity-rgb), .45);
  background: rgba(var(--entity-rgb), .16);
  font-size: calc(.95 * var(--su));
}
.sphere-chip__text { display: grid; line-height: 1.12; }
.sphere-chip b {
  max-width: calc(13 * var(--su));
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(1.02 * var(--su));
  font-weight: 560;
  color: #f3efe6;
}
.sphere-chip small { font-size: calc(.78 * var(--su)); color: #a9b5b1; }
/* Заставка: цветная точка сущности без подписи. */
.sphere-chip__dot {
  display: block;
  width: calc(.7 * var(--su));
  height: calc(.7 * var(--su));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffaf0, rgb(var(--entity-rgb)) 55%);
  box-shadow: 0 0 calc(.9 * var(--su)) rgba(var(--entity-rgb), .95);
}
.sphere-chip[data-shell="0"] .sphere-chip__dot { width: calc(.95 * var(--su)); height: calc(.95 * var(--su)); }
.sphere-chip[data-shell="3"] .sphere-chip__dot { width: calc(.55 * var(--su)); height: calc(.55 * var(--su)); }
/* Точка-иконка сущности в месте покоя: из таких точек собирается экран
   «Сфера», такими же становятся карточки «Лавины». */
.sphere-seeds { position: absolute; inset: 0; }
.sphere-seed {
  position: absolute;
  left: 0;
  top: 0;
  offset-rotate: 0deg;
  display: grid;
  place-items: center;
  width: calc(1.5 * var(--su));
  height: calc(1.5 * var(--su));
  border: 1px solid rgba(var(--entity-rgb), .85);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--entity-rgb), .42), #0e1615eb 72%);
  box-shadow: 0 0 calc(1 * var(--su)) rgba(var(--entity-rgb), .55);
  color: rgb(var(--entity-rgb));
  font-size: calc(.8 * var(--su));
}
.sphere-seed .entity-icon { display: grid; place-items: center; }

.sphere-core {
  position: absolute;
  z-index: 2;
  left: calc(50% - 6.1 * var(--sw));
  top: calc(50% - 6.1 * var(--sw));
  width: calc(12.2 * var(--sw));
  height: calc(12.2 * var(--sw));
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.sphere-core > * { grid-area: 1 / 1; }
.sphere-core__atmo {
  width: 190%;
  height: 190%;
  border-radius: 50%;
  background: radial-gradient(circle, #e6cd9a3d, #7b6538 30%, transparent 64%);
  opacity: .5;
}
.sphere-core__plasma {
  width: 100%;
  height: 100%;
  border-radius: 46%;
  background: conic-gradient(from 45deg, #e6cd9a00, #e6cc9966, #e7ce9d0d, #7ee1c844, #b7a2f555, #e6cd9a00);
  animation: cs-orbit 16s linear infinite;
  opacity: .8;
}
.sphere-core__rings { width: 150%; height: 150%; perspective: calc(40 * var(--su)); display: grid; }
.sphere-core__ringwrap { grid-area: 1 / 1; display: grid; transition: opacity .8s; }
.sphere-core__ring {
  grid-area: 1 / 1;
  border: 1px solid #e9d3a766;
  border-radius: 50%;
  box-shadow: 0 0 12px #e6cd9a22;
  animation: cs-holo-orbit 26s linear infinite;
}
.sphere-core__ringwrap:nth-child(2) .sphere-core__ring { margin: 8%; border-color: #b499ff77; animation-duration: 37s; animation-direction: reverse; }
.sphere-core__ringwrap:nth-child(3) .sphere-core__ring { margin: 18%; border-style: dashed; border-color: #96f0df66; animation-duration: 18s; }
.sphere-core__globe { width: 86%; height: 86%; overflow: visible; }
.sphere-core__disc {
  fill: #121c1bcc;
  stroke: #efe0c199;
  stroke-width: 1;
  filter: drop-shadow(0 0 6px #dab66d88);
}
.sphere-core__id {
  display: grid;
  justify-items: center;
  gap: calc(.15 * var(--sw));
  text-align: center;
  z-index: 1;
}
.sphere-core__avatar {
  display: grid;
  place-items: center;
  width: calc(3.8 * var(--sw));
  height: calc(3.8 * var(--sw));
  border-radius: 50%;
  border: 1px solid #f0e1c488;
  background: #1c2a29d9;
  font-size: calc(1.3 * var(--sw));
  font-weight: 600;
  color: #f3e6c9;
  box-shadow: 0 0 18px #dbb7704d;
}
.sphere-core__id strong { font-size: calc(1.3 * var(--sw)); font-weight: 600; color: #f7f2e8; }
.sphere-core__id small { font-size: calc(.82 * var(--sw)); color: #d6c9b0; white-space: nowrap; }
/* Заставка: ядро без подписи, свечение шире. */
.sphere--splash .sphere-core__atmo { width: 240%; height: 240%; opacity: .75; }
.sphere--splash .sphere-core__disc { fill: #121c1b99; }

.sphere--radar .sphere-chip__body {
  width: calc(.9 * var(--su));
  height: calc(.9 * var(--su));
  padding: 0;
  border: 0;
  background: rgb(var(--entity-rgb));
  box-shadow: 0 0 calc(.8 * var(--su)) rgba(var(--entity-rgb), .8);
  transform: none;
}
.sphere--radar .sphere-chip__icon,
.sphere--radar .sphere-chip__text { display: none; }
.sphere--radar .sphere-core__ringwrap:nth-child(n + 2) { display: none; }
/* Радар: луч вращается в круге, родитель сжимает круг до плоскости орбит. */
.sphere__sweep {
  position: absolute;
  left: 10%;
  top: -30%;
  width: 80%;
  height: 160%;
  transform: scaleY(.5);
  mask-image: radial-gradient(circle, #000 55%, transparent 71%);
}
.sphere__sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #e6cd9a44, transparent 20%);
  animation: cs-orbit 6s linear infinite;
}
/* Перспективный «пол» под сферой (фон экрана, весь viewport). Центр —
   --floor-x / --floor-y. */
.sphere-floor { position: absolute; inset: 0; perspective: 900px; }
.sphere-floor__plane {
  position: absolute;
  left: var(--floor-x, 50%);
  top: var(--floor-y, 70%);
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #e6cd9a1c 0 1px, transparent 1px 5vmax),
    repeating-conic-gradient(from 0deg, #e6cd9a14 0 .35deg, transparent .35deg 15deg);
  mask-image: radial-gradient(circle, #000 18%, transparent 62%);
  transform: rotateX(74deg);
  animation: sphere-floor 240s linear infinite;
}
@keyframes sphere-floor {
  from { transform: rotateX(74deg) rotate(0deg); }
  to { transform: rotateX(74deg) rotate(360deg); }
}
/* Эстафета ядра: корень сферы остаётся на месте (в нём эстафетный элемент),
   поэтому остальные слои сферы гаснут и появляются, как части кадра. */
.pres[data-handoff] .stage--leaving .sphere__tilt:has(> [data-handoff-out]) > :not([data-handoff-out]) {
  animation: stage-part-leave 350ms ease-in both;
}
.pres[data-handoff] .stage--entering .sphere__tilt:has(> [data-handoff-live]) > :not([data-handoff-live]) {
  animation: stage-part-enter 900ms var(--ease-out) both;
}

/* --- Reduced motion ---------------------------------------------------------
   motion.css уже гасит CSS-анимации; здесь убраны вуаль и трансформации
   параллакса. Переход между экранами — WAAPI-затухание 150 мс из оболочки,
   эстафета не запускается. */
html[data-motion="reduced"] .pres-veil { display: none; }
html[data-motion="reduced"] .pres .sphere__tilt,
html[data-motion="reduced"] .pres :is(.pres-depth__layer, .pres-depth__dust) { transform: none !important; translate: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pres-veil { display: none; }
  .pres .sphere__tilt,
  .pres :is(.pres-depth__layer, .pres-depth__dust) { transform: none !important; translate: none !important; }
}