/* Выставочная постановка поверх базовой раскладки exhibition.css:
   лицо никогда не уходит за другие предметы, объекты сцен влетают,
   вспыхивают при получении сигнала и меняются местами по тактам.
   Все циклы останавливаются паузой, скрытой вкладкой и reduced motion. */

/* --- «Профиль»: лицо в центре и поверх, карточки по сторонам. */
.ex-profile__face { inset: -8% 14% 16%; z-index: 2; }
.ex-profile__cards { inset: 2% 0 28%; z-index: 1; }
.ex-profile__card { width: 26%; }
.ex-profile__card:nth-child(n+3) { top: 56%; }
.ex-profile__port[data-side="left"] { left: 37.5%; top: 26%; }
.ex-profile__port[data-side="right"] { left: 62.5%; top: 26%; }
.ex-profile__port[data-side="chin"] { left: 50%; top: 72%; }
.ex-profile__hypothesis { z-index: 3; }
.ex-profile__card { transition: transform 900ms cubic-bezier(.16, 1, .3, 1), border-color .6s, box-shadow .6s; }
.ex-stage--profile[data-beat="0"] .ex-profile__card:nth-child(odd) { transform: translateX(-10%); }
.ex-stage--profile[data-beat="0"] .ex-profile__card:nth-child(even) { transform: translateX(10%); }

/* --- Кометы по проводам (presentation.mjs) и отклик получателя. */
.ex-sparks {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 6;
}
[data-sparks="on"] :is(.ex-flow__packet, .ex-flow__trail, .ex-flow__arrival) { opacity: 0 !important; }
[data-sparks="on"] .ex-flow__wire { opacity: .32; }
[data-hit="a"] { animation: ex-hit-a .9s cubic-bezier(.2, .7, .3, 1); }
[data-hit="b"] { animation: ex-hit-b .9s cubic-bezier(.2, .7, .3, 1); }
@keyframes ex-hit-a {
  0% { filter: brightness(1); scale: 1; }
  18% { filter: brightness(1.45) drop-shadow(0 0 14px var(--flow-color, #e4cf9c)); scale: 1.025; }
  100% { filter: brightness(1); scale: 1; }
}
@keyframes ex-hit-b {
  0% { filter: brightness(1); scale: 1; }
  18% { filter: brightness(1.45) drop-shadow(0 0 14px var(--flow-color, #e4cf9c)); scale: 1.025; }
  100% { filter: brightness(1); scale: 1; }
}

/* --- Гиперпрыжок между главами: звёзды фона вытягиваются в лучи
   (stagefx.mjs читает data-transition="warp"), старый кадр улетает
   на зрителя, новый выходит из глубины. */
.exhibition[data-transition="warp"] .pres-veil {
  background: radial-gradient(ellipse at 50% 46%, rgba(200, 214, 255, .32), rgba(90, 80, 170, .12) 30%, rgba(5, 8, 16, 0) 55%, rgba(5, 8, 16, .6) 100%);
}
.exhibition[data-transition="warp"] .pres-veil__horizon { display: none; }
.exhibition[data-transition="warp"][data-phase="leaving"] .pres-veil { animation: ex-warp-veil-in 350ms ease-in both; }
.exhibition[data-transition="warp"][data-phase="entering"] .pres-veil { animation: ex-warp-veil-out 900ms ease-out both; }
@keyframes ex-warp-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ex-warp-veil-out { from { opacity: 1; } to { opacity: 0; } }
.exhibition[data-transition="warp"]:not([data-handoff]) .stage--leaving .stage__frame {
  animation: ex-warp-leave 350ms cubic-bezier(.6, 0, .9, .4) both;
}
.exhibition[data-transition="warp"]:not([data-handoff]) .stage--entering .stage__frame {
  animation: ex-warp-enter 900ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes ex-warp-leave { to { opacity: 0; transform: scale(1.32); filter: blur(10px); } }
@keyframes ex-warp-enter { from { opacity: 0; transform: scale(.74); filter: blur(12px); } }

/* --- «Память»: переписка распадается по четырём стеклянным слоям.
   Координаты — в единицах контейнера сцены (cqw/cqh), кадр масштабируется
   целиком. Такт 0 — сообщения влетают в кристалл, такт 1 — части падают
   по лучу в свои слои, такт 2 — слои светятся вместе в общем контексте. */
.ex-memory.ex-mem {
  display: block;
  position: relative;
  height: 100%;
  container-type: size;
  font-size: .78em;
}
.ex-mem__source {
  position: absolute; left: 0; top: 2cqh; width: 31cqw;
  padding: 1em;
  display: grid; gap: .75em;
  background: linear-gradient(155deg, #13222a, #0a101b 70%);
  border: 1px solid rgba(147, 222, 197, .3);
  border-radius: 12px;
  box-shadow: 0 20px 60px #0007, 0 0 40px rgba(147, 222, 197, .06);
  z-index: 3;
}
.ex-mem__source-head {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: .15em .6em; color: #93dec5; font-size: .95em;
  padding-bottom: .7em; border-bottom: 1px solid #93dec51f;
}
.ex-mem__source-head b { color: #e8ecef; font-weight: 550; }
.ex-mem__source-head span {
  grid-column: 1 / -1; color: #8fa3b5;
  font: 400 .78em/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.ex-mem__bubble { display: flex; gap: .6em; align-items: flex-start; }
.ex-mem__bubble .ex-avatar { width: 2.1em; height: 2.1em; font-size: .78em; flex: none; }
.ex-mem__bubble p {
  margin: 0; padding: .55em .75em;
  background: #ffffff08; border: 1px solid #ffffff0d;
  border-radius: 4px 12px 12px 12px;
  color: #d3dbe4; line-height: 1.45;
}
.ex-mem__bubble[data-own="true"] { flex-direction: row-reverse; }
.ex-mem__bubble[data-own="true"] p { background: rgba(193, 172, 245, .12); border-color: rgba(193, 172, 245, .22); border-radius: 12px 4px 12px 12px; }
.ex-mem__bubble[data-own="true"] .ex-avatar { background: #2f2946; color: #d6c8ff; }
.ex-mem__thumb { width: 64%; margin-top: .5em; }
.ex-mem__thumb .ex-photo { transform: rotate(-2deg); padding: .2em; }
.ex-stage--memory .ex-mem__bubble {
  animation: ex-mem-bubble .8s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(.35s + var(--i) * .75s);
}
@keyframes ex-mem-bubble { from { opacity: 0; transform: translateY(14px) scale(.95); } }

.ex-mem__prism {
  position: absolute; left: 54cqw; top: 0; width: 10cqw;
  aspect-ratio: 100 / 120; z-index: 4;
  filter: drop-shadow(0 0 16px rgba(232, 205, 160, .35));
  animation: ex-prism-turn 7s ease-in-out infinite alternate;
}
.ex-mem__prism svg { width: 100%; height: 100%; overflow: visible; }
.ex-mem__crystal { fill: rgba(193, 172, 245, .16); stroke: #eed7aa; stroke-width: 1.4; }
.ex-mem__facet { fill: none; stroke: #eed7aa; stroke-width: .6; opacity: .55; }
.ex-mem__heart { fill: #fff3d6; filter: drop-shadow(0 0 6px #ffd98f); animation: ex-prism-heart 2.4s ease-in-out infinite; }
@keyframes ex-prism-turn { from { transform: perspective(500px) rotateY(-32deg); } to { transform: perspective(500px) rotateY(32deg); } }
@keyframes ex-prism-heart { 0%, 100% { opacity: .7; r: 7; } 50% { opacity: 1; r: 10; } }
.ex-stage--memory:not([data-beat="0"]) .ex-mem__prism { filter: drop-shadow(0 0 26px rgba(255, 220, 150, .6)); }
.ex-mem__prism-label {
  position: absolute; left: 66cqw; top: 3cqh; display: grid; gap: .55em; justify-items: start;
  z-index: 4;
}
.ex-mem__prism-label .ex-label { color: #eed7aa; }
.ex-mem__check {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .3em .7em; border-radius: 20px;
  border: 1px solid rgba(147, 222, 197, .35); color: #a9e8d2; font-size: .85em;
  background: rgba(147, 222, 197, .07);
}

.ex-mem__beam {
  position: absolute; left: 59cqw; top: 15cqh; height: 72cqh; width: 2px;
  translate: -50% 0; z-index: 1;
  background: linear-gradient(to bottom, #f3dcaacc, #c1acf5aa 35%, #93dec588 65%, #9ec4ff55);
  box-shadow: 0 0 12px 2px rgba(238, 215, 170, .25);
  opacity: .2; transition: opacity 1s ease;
}
.ex-mem__beam i {
  position: absolute; left: 50%; top: 0; width: 6px; height: 14cqh; translate: -50% 0;
  border-radius: 6px;
  background: linear-gradient(to bottom, transparent, #fff6dd, transparent);
  opacity: 0;
}
.ex-stage--memory:not([data-beat="0"]) .ex-mem__beam { opacity: 1; }
.ex-stage--memory:not([data-beat="0"]) .ex-mem__beam i { animation: ex-beam-run 1.2s linear infinite; }
@keyframes ex-beam-run { from { top: -8cqh; opacity: 1; } to { top: 66cqh; opacity: .2; } }

.ex-mem__stack { position: absolute; inset: 0; pointer-events: none; }
.ex-mem__layer {
  --layer-rgb: 232, 205, 160;
  position: absolute; left: 59cqw; top: calc(31cqh + var(--i) * 18cqh);
  width: 0; height: 0;
  z-index: calc(2 + var(--i));
}
.ex-mem__layer[data-layer="meaning"] { --layer-rgb: 193, 172, 245; }
.ex-mem__layer[data-layer="links"] { --layer-rgb: 147, 222, 197; }
.ex-mem__layer[data-layer="originals"] { --layer-rgb: 158, 196, 255; }
.ex-mem__plane {
  position: absolute; left: 0; top: 0; width: 26cqw; aspect-ratio: 1;
  transform: translate(-50%, -50%) perspective(1400px) rotateX(64deg) rotateZ(45deg);
  border: 1px solid rgba(var(--layer-rgb), .55);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 50%, rgba(var(--layer-rgb), .2), rgba(var(--layer-rgb), .04) 72%), #080d1ab8;
  box-shadow: 0 0 0 1px rgba(var(--layer-rgb), .06), 0 0 50px rgba(var(--layer-rgb), .1), inset 0 0 40px rgba(var(--layer-rgb), .12);
  opacity: .55;
  transition: opacity 1s ease, box-shadow 1s ease;
}
.ex-mem__plane svg { width: 100%; height: 100%; overflow: visible; }
.ex-mem__plane svg * { vector-effect: non-scaling-stroke; }
.ex-mem__grid path, .ex-mem__edges path { stroke: rgba(var(--layer-rgb), .45); stroke-width: 1; fill: none; }
.ex-mem__cells rect, .ex-mem__files path { fill: rgba(var(--layer-rgb), .22); stroke: rgba(var(--layer-rgb), .5); stroke-width: 1; }
.ex-mem__cloud circle, .ex-mem__nodes circle { fill: rgba(var(--layer-rgb), .75); }
.ex-mem__new { opacity: 0; transition: opacity .9s ease; }
.ex-mem__new :is(rect, path, circle) { fill: rgba(var(--layer-rgb), .75); stroke: rgb(var(--layer-rgb)); stroke-width: 1.3; }
.ex-mem__new path:not([d$="Z"]) { fill: none; }
.ex-mem__new .ex-mem__halo { fill: none; stroke-width: 1; opacity: .6; }
.ex-stage--memory:not([data-beat="0"]) .ex-mem__plane { opacity: .9; }
.ex-stage--memory:not([data-beat="0"]) .ex-mem__new {
  opacity: 1;
  transition-delay: calc(.6s + var(--i) * 1.2s);
  animation: ex-mem-new 2.4s ease-in-out infinite;
}
@keyframes ex-mem-new { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 4px rgb(var(--layer-rgb))); } }
.ex-stage--memory[data-beat="1"] .ex-mem__plane { animation: ex-mem-absorb 4.8s ease-out infinite; animation-delay: calc(var(--i) * 1.2s); }
@keyframes ex-mem-absorb {
  0%, 48%, 100% { box-shadow: 0 0 0 1px rgba(var(--layer-rgb), .06), 0 0 50px rgba(var(--layer-rgb), .1), inset 0 0 40px rgba(var(--layer-rgb), .12); }
  58% { box-shadow: 0 0 0 2px rgba(var(--layer-rgb), .7), 0 0 80px rgba(var(--layer-rgb), .45), inset 0 0 70px rgba(var(--layer-rgb), .45); }
}
.ex-stage--memory[data-beat="2"] .ex-mem__plane {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(var(--layer-rgb), .35), 0 0 70px rgba(var(--layer-rgb), .3), inset 0 0 60px rgba(var(--layer-rgb), .3);
  animation: ex-mem-unison 3.2s ease-in-out infinite;
}
@keyframes ex-mem-unison { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }

.ex-mem__piece {
  position: absolute; left: 0; top: 0; width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em;
  display: grid; place-items: center; border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 18%, rgba(var(--layer-rgb), .9) 38%, rgba(var(--layer-rgb), 0) 72%);
  box-shadow: 0 0 22px rgba(var(--layer-rgb), .8);
  opacity: 0;
  --from: calc(12cqh - 31cqh - var(--i) * 18cqh);
}
.ex-mem__piece .ui-icon { width: 1.05em; height: 1.05em; color: #10131d; }
.ex-stage--memory:not([data-beat="0"]) .ex-mem__piece {
  animation: ex-mem-fall 4.8s cubic-bezier(.5, 0, .5, 1) infinite;
  animation-delay: calc(var(--i) * 1.2s);
}
@keyframes ex-mem-fall {
  0% { opacity: 0; transform: translateY(var(--from)) scale(.3); }
  10% { opacity: 1; transform: translateY(var(--from)) scale(1); }
  55% { opacity: 1; transform: translateY(0) scale(1); }
  66% { opacity: 0; transform: translateY(0) scale(2.6); }
  100% { opacity: 0; transform: translateY(0) scale(2.6); }
}

.ex-mem__label {
  position: absolute; left: 20.5cqw; top: 0; translate: 0 -50%;
  width: 20cqw;
  display: flex; gap: .6em; align-items: flex-start;
  color: rgb(var(--layer-rgb));
  pointer-events: auto;
}
.ex-mem__label h3 { font-size: 1.08em; color: #eef0f4; margin: 0; }
.ex-mem__label p { margin: .15em 0 0; font: 400 .8em/1.4 var(--mono); color: rgb(var(--layer-rgb)); }
.ex-mem__label small { display: block; margin-top: .2em; color: #8f9bb0; font-size: .8em; line-height: 1.35; }
.ex-mem__label > .ui-icon { margin-top: .15em; }

.ex-mem__ring {
  position: absolute; left: 29cqw; top: 50cqh; width: 60cqw; height: 22cqh;
  border-radius: 50%;
  border: 1px solid rgba(238, 215, 170, .28);
  opacity: 0; scale: .8;
  transition: opacity 1.2s ease, scale 1.4s cubic-bezier(.16, 1, .3, 1);
  z-index: 1;
}
.ex-mem__ring::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 236, 190, .85) 88%, transparent 92%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: ex-ring-spin 4s linear infinite;
}
@keyframes ex-ring-spin { to { rotate: 360deg; } }
.ex-stage--memory[data-beat="2"] .ex-mem__ring { opacity: 1; scale: 1; }
.ex-mem__access {
  position: absolute; left: 0; bottom: 3cqh; width: 31cqw; margin: 0;
  justify-content: flex-start; text-align: left;
  padding: .8em 1em; border-radius: 8px;
  border: 1px solid rgba(238, 215, 170, .25); background: #0c1220cc;
  color: #e7d3ae;
}

@media (max-width: 760px) {
  .ex-memory.ex-mem { container-type: normal; height: auto; display: grid; gap: 14px; }
  .ex-mem__source, .ex-mem__access, .ex-mem__prism-label { position: static; width: auto; }
  .ex-mem__prism { position: relative; left: auto; top: auto; width: 64px; margin: 0 auto; }
  .ex-mem__beam, .ex-mem__ring, .ex-mem__plane, .ex-mem__piece { display: none; }
  .ex-mem__stack { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; pointer-events: auto; }
  .ex-mem__layer { position: static; width: auto; height: auto; }
  .ex-mem__label { position: static; translate: none; width: auto; padding: 10px; border: 1px solid rgba(var(--layer-rgb), .3); border-radius: 8px; }
}
.pres[data-reduced="true"] .ex-mem__piece { display: none; }
.pres[data-reduced="true"] :is(.ex-mem__prism, .ex-mem__bubble, .ex-mem__plane, .ex-mem__new, .ex-mem__beam i, .ex-mem__heart) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ex-mem__piece { display: none; }
  :is(.ex-mem__prism, .ex-mem__bubble, .ex-mem__plane, .ex-mem__new, .ex-mem__beam i, .ex-mem__heart) { animation: none !important; }
}

/* --- Живые панели: по рамке бежит световой блик, у каждой панели свой
   сдвиг фазы. Блик рисует маскированный псевдоэлемент, текст не трогается. */
@property --ex-edge {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.ex-stage :is(.ex-scene-note, .ex-timeline, .ex-pet, .ex-world__answer, .ex-recall__result) { position: relative; }
.ex-stage :is(.ex-tile, .ex-source-card, .ex-thread, .ex-pet, .ex-world__answer, .ex-recall__result,
  .ex-timeline, .ex-scene-note, .ex-focus-card, .ex-profile__card, .ex-profile__hypothesis,
  .ex-mem__source, .ex-social)::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from var(--ex-edge),
    transparent 0 70%,
    rgba(var(--tile-rgb, var(--ex-rgb)), .9) 86%,
    rgba(255, 250, 235, .95) 88%,
    transparent 93%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .75;
  animation: ex-edge-run 6.5s linear infinite;
}
.ex-stage :is(.ex-tile, .ex-profile__card):nth-child(2)::before { animation-delay: -2.2s; }
.ex-stage :is(.ex-tile, .ex-profile__card):nth-child(3)::before { animation-delay: -4.4s; }
.ex-stage :is(.ex-source-card, .ex-thread, .ex-pet):nth-child(2)::before { animation-delay: -3.2s; }
@keyframes ex-edge-run { to { --ex-edge: 360deg; } }

/* --- Объекты сцены материализуются из глубины при её появлении. Только
   независимые свойства translate/scale: собственные transform тактов живут. */
.ex-stage .ex-visual :is(.ex-tile, .ex-source-card, .ex-thread, .ex-pet, .ex-lane,
  .ex-profile__card, .ex-os__steps > div, .ex-orbit-labels > div, .ex-mem__layer,
  .ex-mem__source, .ex-world__answer, .ex-recall__result, .ex-focus-card, .ex-query) {
  animation: ex-materialize 1.1s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(.12s + var(--i, 0) * .14s);
}
.ex-stage .ex-visual :is(.ex-tile, .ex-source-card, .ex-thread, .ex-pet):nth-child(2) { animation-delay: .3s; }
.ex-stage .ex-visual :is(.ex-tile, .ex-source-card, .ex-thread, .ex-pet):nth-child(3) { animation-delay: .46s; }
@keyframes ex-materialize {
  from { opacity: 0; translate: 0 34px; scale: .9; filter: blur(10px) brightness(1.8); }
  60% { filter: blur(0) brightness(1.25); }
}

/* --- Заголовок бренда переливается светом. */
.ex-start h1, .ex-finale h1 {
  background: linear-gradient(100deg, #f4f2ec 0 38%, #fff8e2 46%, #efcf95 50%, #cbb8ff 54%, #f4f2ec 62% 100%);
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ex-title-sheen 8s ease-in-out infinite;
}
@keyframes ex-title-sheen { 0%, 25% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }

/* Уменьшенное движение: законченный кадр без бликов, влёта и перелива. */
.pres[data-reduced="true"] .ex-stage :is(.ex-visual *, h1) { animation: none !important; }
.pres[data-reduced="true"] .ex-stage :is(.ex-tile, .ex-source-card, .ex-thread, .ex-pet, .ex-world__answer, .ex-recall__result,
  .ex-timeline, .ex-scene-note, .ex-focus-card, .ex-profile__card, .ex-profile__hypothesis,
  .ex-mem__source, .ex-social)::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ex-stage :is(.ex-visual *, h1) { animation: none !important; }
  .ex-stage :is(.ex-tile, .ex-source-card, .ex-thread, .ex-pet, .ex-world__answer, .ex-recall__result,
    .ex-timeline, .ex-scene-note, .ex-focus-card, .ex-profile__card, .ex-profile__hypothesis,
    .ex-mem__source, .ex-social)::before { display: none; }
}

/* --- Предметы бытовых сцен двигаются. */
/* Таймлайн: линия «сейчас» идёт по дорожкам; при столкновении блоки
   вздрагивают и краснеют, при согласии — расходятся по свободным местам. */
@property --ex-now {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.ex-lanes { position: relative; }
.ex-lanes::after {
  content: "";
  position: absolute; inset: -.6em 0 -.6em calc(25% + .7em);
  pointer-events: none;
  background: linear-gradient(90deg, transparent calc(var(--ex-now) - 6%), rgba(var(--ex-rgb), .1) calc(var(--ex-now) - .6%), rgba(255, 246, 220, .85) var(--ex-now), transparent calc(var(--ex-now) + .35%));
  animation: ex-now-sweep 9s linear infinite;
}
@keyframes ex-now-sweep { from { --ex-now: 0%; } to { --ex-now: 100%; } }
.ex-timeline[data-kind="collision"] .ex-timeblock {
  animation: ex-clash 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.35s);
}
@keyframes ex-clash {
  0%, 62%, 100% { translate: 0 0; box-shadow: 0 0 0 transparent; }
  68% { translate: -5px 0; box-shadow: 0 0 22px rgba(242, 120, 110, .55); }
  74% { translate: 5px 0; }
  80% { translate: -3px 0; box-shadow: 0 0 14px rgba(242, 120, 110, .35); }
  86% { translate: 0 0; }
}
.ex-stage:not([data-beat="0"]) .ex-timeline[data-kind="balance"] .ex-timeblock { box-shadow: 0 0 18px rgba(var(--tile-rgb), .22); }

/* Машина едет: колёса вращаются, дорога бежит, фары светят. */
.ex-car__road { stroke: #93dec555; stroke-width: 2; stroke-dasharray: 34 22; animation: ex-road 1.1s linear infinite; }
@keyframes ex-road { to { stroke-dashoffset: -56; } }
.ex-car__wheel { animation: ex-wheel 1.3s linear infinite; }
@keyframes ex-wheel { to { rotate: 360deg; } }
.ex-car__chassis { animation: ex-chassis 1.3s ease-in-out infinite; }
@keyframes ex-chassis { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6px; } }
.ex-car__beam { fill: rgba(255, 236, 190, .14); stroke: none; animation: ex-beam-flicker 3.2s ease-in-out infinite; }
@keyframes ex-beam-flicker { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Воспоминание проявляется, как фотография в ванночке. */
.ex-stage--recall:not([data-beat="0"]) .ex-recall__result .ex-photo { animation: ex-develop 2.6s ease-out both; }
@keyframes ex-develop {
  from { filter: blur(8px) sepia(1) brightness(1.9) contrast(.6); scale: .92; }
  45% { filter: blur(2px) sepia(.6) brightness(1.3); }
}
.ex-recall__paths i { animation: ex-path-ping 2.4s ease-in-out infinite; }
.ex-recall__paths span:nth-child(2) i { animation-delay: .3s; }
.ex-recall__paths span:nth-child(3) i { animation-delay: .6s; }
.ex-recall__paths span:nth-child(4) i { animation-delay: .9s; }
@keyframes ex-path-ping { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 5px rgba(var(--ex-rgb), .25), 0 0 14px rgba(var(--ex-rgb), .7); } }

.pres[data-reduced="true"] .ex-lanes::after { animation: none; opacity: 0; }
.pres[data-reduced="true"] :is(.ex-car__road, .ex-car__wheel, .ex-car__chassis, .ex-car__beam, .ex-timeblock, .ex-recall__paths i, .ex-photo) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ex-lanes::after { display: none; }
  :is(.ex-car__road, .ex-car__wheel, .ex-car__chassis, .ex-car__beam, .ex-timeblock, .ex-recall__paths i, .ex-photo) { animation: none !important; }
}

/* --- «Фокус»: луч внимания выезжает прожектором и находит одно дело. */
.ex-cosmos[data-mode="focus"] .ex-cosmos__focus {
  transform-box: fill-box;
  transform-origin: 4.2% 100%;
  animation: ex-beam-reach 1.8s cubic-bezier(.16, 1, .3, 1) .35s both, ex-beam-breathe 4.8s ease-in-out 2.2s infinite;
}
@keyframes ex-beam-reach {
  from { opacity: 0; transform: rotate(-28deg) scale(.15); }
  55% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes ex-beam-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
.ex-stage--focus .ex-visual .ex-focus-card { animation: ex-focus-land 1.2s cubic-bezier(.16, 1, .3, 1) 1.2s backwards; }
@keyframes ex-focus-land {
  from { opacity: 0; translate: -40px -30px; scale: .85; filter: blur(8px) brightness(2); }
}
.pres[data-reduced="true"] .ex-cosmos[data-mode="focus"] .ex-cosmos__focus { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ex-cosmos[data-mode="focus"] .ex-cosmos__focus { animation: none; }
}

/* --- Пролог: знак Cognisphere и схема Cognitive OS на одном экране.
   Знак рождается в центре и за 4,6 с уходит в левый верхний угол; с 3,8 с
   вокруг собирается схема, дальше по её связям постоянно бегут частицы. */
.ex-cold--os { bottom: calc(6.7 * var(--su)); display: block; background: radial-gradient(ellipse at 50% 44%, #1a1f3a66, transparent 58%); }
.ex-intro { position: absolute; inset: 0; }
.ex-intro__stage { position: absolute; inset: 0; }
.ex-intro__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ex-intro__brand {
  position: absolute; left: calc(5 * var(--su)); top: calc(2.6 * var(--su));
  display: flex; align-items: center; gap: calc(1.2 * var(--su));
  transform-origin: 0 50%;
  animation: ex-intro-brand 4.6s cubic-bezier(.7, 0, .2, 1) both;
  z-index: 2;
}
@keyframes ex-intro-brand {
  0% { opacity: 0; transform: translate(calc(27 * var(--su)), calc(22 * var(--su))) scale(1.9); filter: blur(16px); }
  14% { opacity: 1; filter: blur(0); }
  66% { transform: translate(calc(27 * var(--su)), calc(22 * var(--su))) scale(1.9); }
  100% { opacity: 1; transform: none; filter: none; }
}
.ex-intro__logo { width: calc(6 * var(--su)); height: calc(6 * var(--su)); overflow: visible; filter: drop-shadow(0 0 calc(1 * var(--su)) #f1d39a88); }
.ex-intro__logo-ring { fill: none; stroke: #eed3a3; stroke-width: .9; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ex-intro-draw 1.6s cubic-bezier(.5, 0, .2, 1) .2s forwards; }
.ex-intro__logo-ring + .ex-intro__logo-ring { animation-delay: .5s; }
.ex-intro__logo-core { fill: #f4dcae22; stroke: #f4dcae; stroke-width: .9; transform-box: fill-box; transform-origin: center; animation: ex-intro-pop .9s cubic-bezier(.2, 1.6, .4, 1) .9s backwards, ex-intro-glow 3s ease-in-out 2s infinite; }
.ex-intro__logo-planet { fill: #fff0cc; animation: ex-intro-orbit 5s linear 1.4s infinite; transform-origin: 0 0; }
@keyframes ex-intro-draw { to { stroke-dashoffset: 0; } }
@keyframes ex-intro-pop { from { transform: scale(0); opacity: 0; } }
@keyframes ex-intro-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 3px #ffe6b0); } }
@keyframes ex-intro-orbit { to { rotate: 360deg; } }
.ex-intro__words h1 {
  margin: 0; font-size: calc(3.6 * var(--su)); font-weight: 380; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(100deg, #f4f2ec 0 38%, #fff8e2 46%, #efcf95 50%, #cbb8ff 54%, #f4f2ec 62% 100%);
  background-size: 320% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ex-intro-word 1.6s cubic-bezier(.16, 1, .3, 1) .6s backwards, ex-title-sheen 8s ease-in-out 3s infinite;
}
.ex-intro__words h1:focus { outline: none; }
@keyframes ex-intro-word { from { opacity: 0; letter-spacing: .5em; filter: blur(10px); } }
.ex-intro__os {
  margin: calc(.6 * var(--su)) 0 0; color: #d9bf8c;
  font: 400 calc(1 * var(--su))/1.2 var(--mono); letter-spacing: .42em;
  animation: ex-intro-fade 1.2s ease 1.5s backwards;
}
.ex-intro__promise {
  margin: calc(.55 * var(--su)) 0 0; color: #b9c0d0; font-size: calc(.95 * var(--su));
  animation: ex-intro-fade 1.2s ease 2.2s backwards;
}
@keyframes ex-intro-fade { from { opacity: 0; translate: 0 8px; } }

.ex-intro__part { animation: ex-intro-rise 1.1s cubic-bezier(.16, 1, .3, 1) var(--d, 4s) backwards; transform-box: fill-box; transform-origin: center; }
@keyframes ex-intro-rise { from { opacity: 0; transform: scale(.82); filter: blur(6px); } }
.ex-intro__title { fill: #e9d4ab; font: 500 17px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.ex-intro__label { font: 500 17px var(--font); }
.ex-intro__initials { font: 600 12px var(--mono); }
.ex-intro__you { fill: #fff3d6; font: 600 12px var(--font); letter-spacing: .08em; }
.ex-intro__orbit { fill: none; stroke-width: 1.3; stroke-opacity: .7; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ex-intro-draw 1.8s ease 4s forwards; }
.ex-intro__planet { filter: drop-shadow(0 0 5px currentColor); }
.ex-intro__core { transform-box: fill-box; transform-origin: center; animation: ex-intro-breathe 4s ease-in-out infinite; }
@keyframes ex-intro-breathe { 0%, 100% { filter: drop-shadow(0 0 8px #f7d99d66); } 50% { filter: drop-shadow(0 0 22px #f7d99dcc); } }
.ex-intro__beam-line { fill: none; stroke: #f4d197; stroke-width: 1.2; stroke-opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ex-intro-draw 1.2s ease 5.6s forwards; }
.ex-intro__focus-ring { transform-box: fill-box; transform-origin: center; animation: ex-intro-ping 2.2s ease-out 6s infinite; }
@keyframes ex-intro-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.ex-intro__card { fill: #1d1a17e8; stroke: #e8cda0; stroke-opacity: .6; }
.ex-intro__card-label { fill: #d9bf8c; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ex-intro__card-title { fill: #f4f2ec; font: 500 20px var(--font); }
.ex-intro__legend text { fill: #b9c1d2; font: 400 15px var(--font); }
.ex-intro__spin { transform-box: fill-box; transform-origin: center; animation: ex-intro-orbit var(--spin, 30s) linear infinite; }
.ex-intro__idea { transform-box: fill-box; transform-origin: center; animation: ex-intro-glow 2.6s ease-in-out infinite; }
.ex-intro__wire { fill: none; stroke-width: 1.2; stroke-opacity: .38; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ex-intro-draw 1.4s ease var(--d, 5s) forwards; }
.ex-intro__spark { filter: drop-shadow(0 0 4px currentColor); }
.ex-intro__node { animation: ex-intro-node 6s ease-in-out infinite; animation-delay: calc(5.6s + var(--k) * 1.5s); }
@keyframes ex-intro-node { 0%, 20%, 100% { fill: #171c33; } 6% { fill: #e7dcff; } }
.ex-intro__store-name { fill: #f1e6cf; font: 600 15px var(--font); }
.ex-intro__store-role { fill: #97a6bb; font: 400 13px var(--font); }
.ex-cold--os .ex-cold__skip { z-index: 3; }
.ex-cold--os .ex-cold__locale { z-index: 3; }
@media (max-width: 760px) {
  .ex-intro__brand { left: 14px; top: 12px; }
  .ex-intro__stage { top: 90px; }
}

/* --- «Сфера» без лица: подписи орбит ниже и правее самих орбит. */
.ex-stage--sphere .ex-orbit-labels { top: auto; bottom: 16%; right: -5%; gap: .9em; z-index: 2; }
.ex-stage--sphere .ex-orbit-labels > div { transform: none; }

/* --- Согласованный план: блоки идут друг за другом и не пересекаются. */
.ex-timeline[data-kind="family"] .ex-timeblock,
.ex-stage:not([data-beat="0"]) .ex-timeline[data-kind="balance"] .ex-timeblock {
  left: calc(1.5% + var(--i) * 33%);
  width: 31%;
}

/* --- «Профиль»: пропорции исходного портрета, сдержанный свет, вокруг
   золотые орбиты (WebGL). Холст шире рамки портрета, чтобы орбиты не
   обрезались; сама голова остаётся в рамке. */
.ex-cosmos[data-mode="face"] .ex-cosmos__face-gl {
  left: -42%; top: -14%; right: auto; bottom: auto; width: 184%; height: 128%;
  filter: none;
}
.ex-cosmos[data-mode="face"] .ex-cosmos__sphere { display: none; }
.ex-cosmos[data-mode="face"] .ex-cosmos__portrait { animation-duration: 14s; }