/* Постоянное движение и окна. Переходы между маршрутами и реакции на нажатия
   управляются Experience через Web Animations API и отменяются вместе с CSS. */

@keyframes cs-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cs-slide-in {
  from {
    transform: translateX(16px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes cs-rise {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes cs-pulse {
  0%, 100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.8;
  }
}

.scrim {
  animation: cs-fade-in 360ms var(--ease);
}

.drawer {
  animation: cs-drawer-arrive 580ms cubic-bezier(.16,1,.3,1);
}

.dialog {
  animation: cs-window-arrive 520ms cubic-bezier(.16,1,.3,1);
}
.toast { animation: cs-toast-arrive 360ms cubic-bezier(.16,1,.3,1); }
@keyframes cs-toast-arrive {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.demo-panel { animation: cs-drawer-arrive 520ms cubic-bezier(.16,1,.3,1); }
@keyframes cs-window-arrive {
  from { opacity: 0; transform: perspective(1200px) translateY(32px) rotateX(5deg) scale(.95); }
  to { opacity: 1; transform: none; }
}
@keyframes cs-drawer-arrive {
  from { opacity: 0; transform: translateX(60px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes cs-window-leave {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(28px) scale(.97); }
}
.window-leaving { pointer-events: none; }
.window-leaving .demo-panel { animation: cs-window-leave 180ms ease-in both; }
.drawer-stage[data-closing="true"] .drawer { animation: cs-window-leave 180ms ease-in both; }
.dialog-wrap[data-closing="true"] .dialog { animation: cs-modal-leave 180ms ease-in both; }
.drawer-stage[data-closing="true"] .scrim,
.dialog-wrap[data-closing="true"] .scrim { animation: cs-fade-in 180ms ease-out reverse both; }
@keyframes cs-modal-leave {
  to { opacity: 0; transform: translateY(16px) scale(.97); }
}
@keyframes cs-card-arrive {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
.card, .entity-row { animation: cs-card-arrive 420ms var(--ease) backwards; }
.stack > .card:nth-child(2), .stack > .entity-row:nth-child(2) { animation-delay: 35ms; }
.stack > .card:nth-child(3), .stack > .entity-row:nth-child(3) { animation-delay: 70ms; }
.stack > .card:nth-child(n + 4), .stack > .entity-row:nth-child(n + 4) { animation-delay: 100ms; }

/* Импульс только у активных связей графа, не у текста. */
.graph-edge--active {
  animation: cs-pulse 2.4s var(--ease) infinite;
}

.link-pulse {
  animation: cs-pulse 2.8s var(--ease) infinite;
}

@keyframes cs-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cs-breathe {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes cs-flow {
  to {
    stroke-dashoffset: -88;
  }
}

@keyframes cs-transmit {
  to {
    stroke-dashoffset: -100;
  }
}

@keyframes cs-nebula-drift {
  from { transform: translate3d(-1%, 0, 0) scale(1); }
  to { transform: translate3d(1%, 1%, 0) scale(1.03); }
}

.ambient-backdrop__nebula {
  animation: cs-nebula-drift 35s ease-in-out infinite alternate;
}

@keyframes cs-reveal-line {
  from {
    opacity: 0;
    stroke-dashoffset: 36;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

.star--bright {
  animation: cs-breathe 6s ease-in-out var(--delay) infinite;
}
.orbit-core::before {
  animation: cs-orbit 28s linear infinite;
}
.orbit-satellites {
  animation: cs-orbit 48s linear infinite;
}
.orbit-satellites--outer {
  animation-duration: 75s;
  animation-direction: reverse;
}
.orbit-core__sphere svg {
  animation: cs-breathe 7s ease-in-out infinite;
}
.orbit-core__plasma { animation: cs-orbit 16s linear infinite; }
@keyframes cs-holo-orbit {
  from { transform: rotateZ(-25deg) rotateY(68deg) rotateX(15deg); }
  to { transform: rotateZ(335deg) rotateY(68deg) rotateX(15deg); }
}
.holo-field__ring { animation: cs-holo-orbit 26s linear infinite; }
.holo-field__ring:nth-child(2) { animation-duration: 37s; animation-direction: reverse; }
.holo-field__ring:nth-child(3) { animation-duration: 18s; }
@keyframes cs-aurora {
  from { transform: translate3d(-4%, -4%, 0) rotate(-24deg) scale(1); }
  to { transform: translate3d(8%, 10%, 0) rotate(-8deg) scale(1.15); }
}
.ambient-backdrop__aurora { animation: cs-aurora 28s ease-in-out infinite alternate; }
.ambient-backdrop__aurora--violet { animation-delay: -14s; animation-duration: 34s; }
@keyframes cs-nav-light {
  from { opacity: 0; transform: translateY(-7px) scaleY(.3); }
  to { opacity: 1; transform: none; }
}
.nav-link[aria-current="page"]::before { animation: cs-nav-light 380ms var(--ease); }
.orbit-connection {
  animation: cs-flow 14s linear infinite;
}
.signal-dot, .pulse-panel .panel__title::before {
  animation: cs-breathe 3s ease-in-out infinite;
}
.context-preview__edge {
  stroke-dasharray: 18 8;
  animation: cs-flow 9s linear infinite;
}
.graph-edge {
  animation: cs-reveal-line 600ms var(--ease) both;
}
.graph-edge--active {
  stroke-dasharray: 9 5;
  animation: cs-flow 4s linear infinite;
}
.graph-orbits__core {
  animation: cs-breathe 6s ease-in-out infinite;
}
.graph-hub__ring {
  animation: cs-orbit 38s linear infinite;
}
.graph-edge-tracer {
  animation: cs-transmit 7s linear infinite;
}
.graph-svg > g:nth-child(3n) .graph-edge-tracer {
  animation-delay: -2s;
}
.graph-svg > g:nth-child(3n + 1) .graph-edge-tracer {
  animation-delay: -4s;
}

.btn, .icon-btn, .nav-link, .chip, .tab, .overview-stat, .orbit-node {
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.graph-node__shape {
  transition: fill 180ms, stroke 180ms;
}
@media (hover: hover) {
  .btn:hover:not(:disabled), .overview-stat:hover, .orbit-node:hover {
    transform: translateY(-2px);
  }
  .nav-link:hover .ui-icon {
    filter: drop-shadow(0 0 4px #e6cd9c80);
  }
  .entity-row:hover {
    box-shadow: inset 2px 0 #e5cb9777, var(--shadow-card);
  }
}
.btn:active:not(:disabled), .icon-btn:active, .chip:active {
  transform: translateY(1px) scale(.97);
  box-shadow: var(--shadow-inset);
}

/* Пользовательское отключение и системная настройка. */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  animation-delay: 0s !important;
  scroll-behavior: auto !important;
}
html[data-motion="reduced"] .content { transform: none !important; }
html[data-motion="reduced"] .scene-veil,
html[data-motion="reduced"] .contact-layer,
html[data-motion="reduced"] .pointer-aura { display: none; }

@media (prefers-reduced-motion: reduce) {
  .content { transform: none !important; }
  .scene-veil, .contact-layer, .pointer-aura { display: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}