/* lab.kzbrd.ru motion layer. index: hero, diagram, top-5, catalog filter/entries.
   leaderboard: summary cards, chart + table score bars, score count-up.
   model: cards, chart + histogram, score count-up, article sections.
   research: article sections and tables. Hidden states require html.motion-ready;
   without JS all content is visible. Only transform/opacity animate; values restore. */

:root {
  --od-fast: 160ms;
  --od-base: 260ms;
  --od-slow: 420ms;
  --od-bar: 620ms;
  --od-line: 600ms;
  --od-count: 600ms;
  --od-stagger: 38ms;
  --od-ease: cubic-bezier(0.2, 0, 0, 1);
  --od-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --od-yellow: var(--brand-yellow, #fbbc05);
}

@keyframes od-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes od-enter {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes od-line {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes od-grow-x { to { transform: scaleX(1); } }
@keyframes od-grow-y { to { transform: scaleY(1); } }
@keyframes od-pop {
  from { opacity: 0; transform: scale(0.35); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes od-pulse {
  0% { transform: scale(0.6); opacity: 0.35; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes od-fade {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

/* Hero — one-time entrance, no layout movement. */
html.motion-ready .hero-eyebrow,
html.motion-ready .hero-title,
html.motion-ready .hero-lead,
html.motion-ready .hero-actions,
html.motion-ready .diagram {
  animation: od-rise var(--od-slow) var(--od-ease-out) both;
}
html.motion-ready .hero-eyebrow { animation-delay: 40ms; }
html.motion-ready .hero-title { animation-delay: 110ms; }
html.motion-ready .hero-lead { animation-delay: 190ms; }
html.motion-ready .hero-actions { animation-delay: 260ms; }
html.motion-ready .diagram { animation-delay: 300ms; }

html.motion-ready .hero-title em { position: relative; }
html.motion-ready .hero-title em::after {
  content: "";
  position: absolute;
  inset: auto 0 -0.06em;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 0 25%, var(--brand-red, #ea4335) 0 50%, var(--od-yellow) 0 75%, var(--brand-green, #34a853) 0);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  animation: od-line var(--od-line) var(--od-ease-out) 560ms both;
}

html.motion-ready .diagram { position: relative; }
html.motion-ready .dg-page,
html.motion-ready .dg-blocks,
html.motion-ready .dg-table,
html.motion-ready .dg-arrow,
html.motion-ready .dg-labels {
  animation: od-rise var(--od-slow) var(--od-ease-out) both;
}
html.motion-ready .dg-page { animation-delay: 430ms; }
html.motion-ready .dg-arrow { animation-delay: 560ms; }
html.motion-ready .dg-blocks { animation-delay: 650ms; }
html.motion-ready .dg-table { animation-delay: 800ms; }
html.motion-ready .dg-labels { animation-delay: 940ms; }

/* Reveal / state */
html.motion-ready .od-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
html.motion-ready .od-reveal.is-in {
  animation: od-rise var(--od-slow) var(--od-ease-out) var(--od-delay, 0ms) both;
}
html.motion-ready .od-enter {
  animation: od-enter var(--od-base) var(--od-ease-out) var(--od-delay, 0ms) both;
}
html.motion-ready .od-count { font-variant-numeric: tabular-nums; }

/* Scroll-linked bars, charts and table scores */
html.motion-ready .od-bars :is(.bar, .bar-med, .bar-low) {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
}
html.motion-ready .od-bars.is-in :is(.bar, .bar-med, .bar-low) {
  animation: od-grow-x var(--od-bar) var(--od-ease-out) calc(var(--od-i, 0) * var(--od-stagger)) both;
}
html.motion-ready .od-bars--y :is(.bar, .bar-med, .bar-low) {
  transform-origin: center bottom;
  transform: scaleY(0);
}
html.motion-ready .od-bars--y.is-in :is(.bar, .bar-med, .bar-low) {
  animation-name: od-grow-y;
}
html.motion-ready .od-bars .dot-pr,
html.motion-ready .od-bars .dot-hw {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.35);
}
html.motion-ready .od-bars.is-in .dot-pr,
html.motion-ready .od-bars.is-in .dot-hw {
  animation: od-pop var(--od-base) var(--od-ease-out) calc(var(--od-i, 0) * var(--od-stagger) + 180ms) both;
}
html.motion-ready .od-score-row .score-bar {
  transform-origin: left center;
  transform: scaleX(0);
}
html.motion-ready .od-score-row.is-in .score-bar {
  animation: od-grow-x var(--od-bar) var(--od-ease-out) var(--od-delay, 0ms) both;
}
html.motion-ready .od-tick { animation: od-fade var(--od-base) var(--od-ease-out) both; }

/* Pressed filter marker and result refresh */
html.motion-ready .nav-filter[aria-pressed="true"] .dot {
  animation: od-pulse var(--od-base) var(--od-ease-out) both;
}

/* Hover / focus: lift and directional cues, never layout shifts */
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .brand-mark {
    transition: transform var(--od-base) var(--od-ease-out);
  }
  html.motion-ready .brand:hover .brand-mark { transform: rotate(-4deg) scale(1.05); }

  html.motion-ready .entry-content {
    transition: transform var(--od-base) var(--od-ease-out);
  }
  html.motion-ready .entry:hover .entry-content,
  html.motion-ready .entry:focus-within .entry-content { transform: translateY(-2px); }

  html.motion-ready .top-list a {
    transition: transform var(--od-fast) var(--od-ease-out);
  }
  html.motion-ready .top-list a:hover,
  html.motion-ready .top-list a:focus-visible { transform: translateX(2px); }
}

/* Reduced motion: final states only, no animation or movement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.motion-ready .od-reveal,
  html.motion-ready .od-bars :is(.bar, .bar-med, .bar-low),
  html.motion-ready .od-bars .dot-pr,
  html.motion-ready .od-bars .dot-hw,
  html.motion-ready .od-score-row .score-bar {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  html.motion-ready .brand-mark,
  html.motion-ready .entry-content,
  html.motion-ready .top-list a { transition: none !important; }
  html.motion-ready .brand:hover .brand-mark,
  html.motion-ready .entry:hover .entry-content,
  html.motion-ready .entry:focus-within .entry-content,
  html.motion-ready .top-list a:hover,
  html.motion-ready .top-list a:focus-visible { transform: none !important; }
  html.motion-ready .hero-eyebrow,
  html.motion-ready .hero-title,
  html.motion-ready .hero-lead,
  html.motion-ready .hero-actions,
  html.motion-ready .diagram,
  html.motion-ready .hero-title em::after,
  html.motion-ready .dg-page,
  html.motion-ready .dg-blocks,
  html.motion-ready .dg-table,
  html.motion-ready .dg-arrow,
  html.motion-ready .dg-labels,
  html.motion-ready .od-enter,
  html.motion-ready .od-tick,
  html.motion-ready .nav-filter[aria-pressed="true"] .dot { animation: none !important; }
  html.motion-ready .hero-title em::after { opacity: 1; transform: none; }
}