/* ДНЖ · движение поверх исходного дизайна. В покое все размеры и цвета исходные. */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}

.brow .track i { transform-origin: left center; }
.cluster-acc > .bd.motion-cluster-live { display: block; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* A quiet title sequence, with the original line breaks and solid glyphs.
     The class is on main so asynchronously inserted heroes start immediately. */
  #main.motion-titles :is(.info-hero, .toc-hero, .stats-hero) > .kicker {
    animation: motion-caption 800ms cubic-bezier(.22, 1, .36, 1) backwards;
  }
  #main.motion-titles :is(.info-hero, .toc-hero, .stats-hero) > h2 {
    animation: motion-title 950ms cubic-bezier(.22, 1, .36, 1) 110ms backwards;
  }
  #main.motion-titles :is(.info-hero, .toc-hero) > p {
    animation: motion-description 850ms ease-out 230ms backwards;
  }
  #main.motion-titles :is(.info-hero, .toc-hero) > p + p {
    animation-delay: 310ms;
  }

  /* The small violet captions indicated in the review. Keep their original
     fill; a low-contrast colour layer takes 36 seconds to travel one way. */
  :is(.info-hero, .toc-hero) > .kicker {
    isolation: isolate;
  }
  :is(.info-hero, .toc-hero) > .kicker::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background-image: linear-gradient(110deg,
      rgba(85, 5, 119, .06) 0%, rgba(170, 130, 187, .2) 30%,
      rgba(202, 71, 240, .22) 55%, rgba(170, 130, 187, .14) 75%,
      rgba(85, 5, 119, .06) 100%);
    background-size: 250% 100%;
    animation: motion-caption-gradient 36s ease-in-out infinite alternate;
  }
  .motion-paused :is(.info-hero, .toc-hero) > .kicker::before {
    animation-play-state: paused;
  }

  .login { animation: motion-arrive 480ms var(--motion-ease); }
  #dkDrawer .drawer { animation: motion-drawer 380ms var(--motion-ease); }
  #dkDrawer .drawer-overlay { animation: motion-overlay 240ms ease-out; }
  .cluster-acc, .cluster-acc > .hd, .cluster-acc > .hd .ar {
    transition-duration: 300ms;
    transition-timing-function: var(--motion-ease);
  }
}

@keyframes motion-caption {
  from { opacity: 0; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes motion-title {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes motion-description {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes motion-caption-gradient {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .stats-hero::after {
    transform: translate(var(--motion-light-x, 0px), var(--motion-light-y, 0px));
    transition: transform 850ms var(--motion-ease);
  }
}

@keyframes motion-arrive {
  from { opacity: .4; translate: 0 10px; scale: .995; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes motion-drawer {
  from { opacity: .3; transform: translateX(36px); }
  to { opacity: 1; transform: none; }
}
@keyframes motion-overlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* base.css already disables element animations. Also cover decorative layers. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  *::before, *::after { animation: none !important; transition: none !important; }
  .stats-hero::after { transform: none; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .stats-hero::after { transform: none; }
}