/* Слои космоса не участвуют в раскладке текста и не принимают события. */
.ex-cosmos {
  --cosmos-gold: 236, 202, 151;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  isolation: isolate;
  pointer-events: none;
  contain: layout style;
}
.ex-cosmos__svg,
.ex-cosmos__aura,
.ex-cosmos__nebula,
.ex-cosmos__horizon,
.ex-cosmos__flare { position: absolute; pointer-events: none; }
.ex-cosmos__svg { inset: 0; }
.ex-cosmos__svg > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ex-cosmos__aura {
  inset: 5% -6%;
  background: radial-gradient(ellipse at 58% 43%, rgba(122, 104, 179, .13), transparent 53%),
    radial-gradient(ellipse at 41% 54%, rgba(var(--cosmos-gold), .09), transparent 42%);
  animation: ex-cosmos-breathe 12s ease-in-out infinite alternate;
}
.ex-cosmos__nebula {
  inset: 22% 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(132, 113, 189, .06), transparent 65%);
  transform: rotate(-25deg);
}
.ex-cosmos__dust { animation: ex-cosmos-dust 17s ease-in-out infinite alternate; }
.ex-cosmos__orbit-motion { animation: ex-cosmos-orbit 90s linear infinite; }
.ex-cosmos__globe { transform-origin: 0 0; animation: ex-cosmos-core 14s ease-in-out infinite alternate; }
.ex-cosmos__crosses { animation: ex-cosmos-spark 8s ease-in-out infinite alternate; }
.ex-cosmos__galaxy-plane,
.ex-cosmos__galaxy-heart { opacity: 0; }
.ex-cosmos__galaxy-spin { animation: ex-cosmos-orbit 220s linear infinite; }
.ex-cosmos__focus { opacity: 0; }
.ex-cosmos__flare {
  left: 10%; top: 49.7%; width: 80%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--cosmos-gold), .28), transparent);
  transform: rotate(-22deg);
  opacity: .65;
}
.ex-cosmos__horizon {
  inset: 72% 8% 4%;
  background: radial-gradient(ellipse at 50% 83%, rgba(var(--cosmos-gold), .05), transparent 65%);
  border-bottom: 1px solid rgba(var(--cosmos-gold), .1);
  border-radius: 50%;
  transform: rotate(-9deg);
  opacity: .65;
}
.ex-cosmos__portrait {
  position: absolute;
  width: 47%; height: 90%;
  left: 28%; top: -1%;
  animation: ex-cosmos-float 11s ease-in-out infinite alternate;
}
.ex-cosmos__face {
  position: absolute;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: none;
}
.ex-cosmos__face-light {
  position: absolute; inset: 4% -10% 9%;
  background: radial-gradient(ellipse at 58% 42%, rgba(166, 154, 255, .05), transparent 57%);
  border-radius: 50%;
}
.ex-cosmos[data-mode="face"] .ex-cosmos__sphere {
  transform: translate(500px, 545px);
  opacity: .62;
}
.ex-cosmos[data-mode="face"] .ex-cosmos__globe { display: none; }
.ex-cosmos[data-mode="face"] .ex-cosmos__orbit--0 { opacity: .35; }
.ex-cosmos[data-mode="face"] .ex-cosmos__halo { opacity: .38; }
.ex-cosmos[data-mode="face"] .ex-cosmos__flare { top: 66%; opacity: .25; }

/* После лавины человек остаётся рядом со своей системой внимания. */
.ex-cosmos[data-mode="sphere"] .ex-cosmos__portrait,
.ex-cosmos[data-mode="focus"] .ex-cosmos__portrait {
  width: 14%; height: 26%; left: 43%; top: -3%;
  z-index: 3;
}
.ex-cosmos[data-mode="sphere"] .ex-cosmos__face,
.ex-cosmos[data-mode="focus"] .ex-cosmos__face {
  filter: drop-shadow(0 0 12px rgba(138, 226, 197, .22));
  opacity: .87;
}
.ex-cosmos[data-mode="sphere"] .ex-cosmos__face-light,
.ex-cosmos[data-mode="focus"] .ex-cosmos__face-light {
  background: radial-gradient(ellipse at 58% 42%, rgba(141, 224, 195, .1), transparent 68%);
}
.ex-cosmos__thought { display: none; }
.ex-cosmos[data-mode="sphere"] .ex-cosmos__thought,
.ex-cosmos[data-mode="focus"] .ex-cosmos__thought {
  display: block; position: absolute; right: -9%; top: 25%;
  width: 6px; height: 6px; transform: rotate(45deg);
  background: #d3beff; box-shadow: 0 0 12px 3px #b6a0fa66;
  animation: ex-cosmos-spark 8s ease-in-out infinite alternate;
}
.ex-cosmos[data-mode="focus"] .ex-cosmos__focus { opacity: 1; }
.ex-cosmos[data-mode="focus"] .ex-cosmos__shells { opacity: .62; }
.ex-cosmos[data-mode="galaxy"] .ex-cosmos__galaxy-plane,
.ex-cosmos[data-mode="galaxy"] .ex-cosmos__galaxy-heart { opacity: 1; }
.ex-cosmos[data-mode="galaxy"] .ex-cosmos__sphere { opacity: 0; }
.ex-cosmos[data-mode="galaxy"] .ex-cosmos__flare { transform: rotate(-22deg); opacity: .85; }
.ex-cosmos[data-mode="galaxy"] .ex-cosmos__halo { opacity: .74; }

@keyframes ex-cosmos-orbit { to { transform: rotate(360deg); } }
@keyframes ex-cosmos-breathe { from { opacity: .6; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes ex-cosmos-dust { from { opacity: .5; } to { opacity: 1; } }
@keyframes ex-cosmos-core { from { opacity: .8; } to { opacity: 1; } }
@keyframes ex-cosmos-spark { from { opacity: .35; } to { opacity: .82; } }
@keyframes ex-cosmos-float { from { transform: translateY(0) rotate(-.4deg); } to { transform: translateY(-1.2%) rotate(.5deg); } }

/* Один цикл жизни с оболочкой: фон, пауза и доступность. */
.pres[data-hidden="true"] .ex-cosmos *,
.pres[data-play-mode="paused"] .ex-cosmos *,
.pres[data-reduced="true"] .ex-cosmos *,
.presentation[data-hidden="true"] .ex-cosmos *,
.presentation[data-reduced="true"] .ex-cosmos * { animation-play-state: paused !important; }
.pres[data-reduced="true"] .ex-cosmos__portrait { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ex-cosmos * { animation: none !important; }
}
@media (max-width: 700px) {
  .ex-cosmos[data-mode="face"] .ex-cosmos__portrait { width: 50%; left: 26%; }
  .ex-cosmos__horizon { opacity: .35; }
}


/* Орбитальные дорожки галактики движутся независимо от её двух ветвей. */
.ex-galaxy-track__stars { animation: ex-cosmos-orbit 160s linear infinite; }
.pres[data-gathering="true"] .ex-stage--sphere .ex-cosmos__orbit-motion { animation-play-state:paused; }
.pres[data-gathering="true"] .ex-orbit-arrival { animation:ex-orbit-arrive 3.6s both; animation-delay:var(--arrival-delay); }
@keyframes ex-orbit-arrive { 0%,65% { opacity:0; } 90% { opacity:1; } 100% { opacity:1; } }

/* Карточки занимают весь кадр, смысловой текст защищён собственной подложкой. */
.ex-storm { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; contain:layout style; }
.ex-storm-card {
  position:absolute; left:0; top:0; width:clamp(150px,14vw,480px);
  display:flex; align-items:flex-start; gap:.65em; padding:.8em .9em;
  border:1px solid #e19a9b75; border-radius:7px;
  color:#f1d9d7; background:linear-gradient(125deg,#2b202be8,#111825ef);
  box-shadow:0 8px 35px #0004,inset 0 1px #ffe2da0c;
  font:400 clamp(11px,.87vw,29px)/1.45 var(--font);
  transform-origin:center; will-change:transform,opacity;
  animation:ex-storm-fall var(--rain-duration) var(--rain-delay) linear infinite;
}
.ex-storm-card>svg { width:1.4em; height:1.4em; flex-shrink:0; color:#f5b2a4; }
.ex-storm-card__copy { display:flex; flex-direction:column; gap:.3em; min-width:0; }
.ex-storm-card small { color:#c18c92; text-transform:uppercase; letter-spacing:.07em; font-size:.62em; }
.ex-storm-card__copy>span { line-height:1.45; }
.ex-storm-card>i { width:4px; height:4px; flex-shrink:0; border-radius:50%; background:#ffa796; margin:.5em 0 0 auto; }
.ex-card-transfer { position:fixed; z-index:15; pointer-events:none; animation:none!important; margin:0; overflow:hidden; }
@keyframes ex-storm-fall {
  0% { opacity:0; transform:translate3d(var(--rain-x),var(--rain-y),0) rotate(var(--rain-angle)) scale(var(--rain-depth)); }
  15% { opacity:.6; }
  58% { opacity:.88; }
  78% { opacity:.92; transform:translate3d(var(--rain-via-x),57vh,0) rotate(3deg) scale(.72); }
  100% { opacity:0; transform:translate3d(var(--rain-end-x),104vh,0) rotate(var(--rain-end-angle)) scale(.56); }
}
.pres[data-hidden="true"] .ex-storm-card,
.pres[data-play-mode="paused"] .ex-storm-card { animation-play-state:paused; }
.pres[data-reduced="true"] .ex-storm-card { animation:none; transform:translate(var(--rain-rest-x),var(--rain-rest-y)) rotate(var(--rain-angle)) scale(.8); opacity:.55; }
.pres[data-reduced="true"] .ex-storm-card:nth-child(n+33) { display:none; }
@media(prefers-reduced-motion:reduce) {
  .ex-storm-card { animation:none; transform:translate(var(--rain-rest-x),var(--rain-rest-y)) rotate(var(--rain-angle)) scale(.8); opacity:.55; }
  .ex-storm-card:nth-child(n+33) { display:none; }
}