/* Вариант «Мягкий»: появление 360 мс, каскад 45 мс, смена темы 260 мс. */
.motion-card { min-width: 0; display: flex; }
.motion-card > .lab-card { width: 100%; }
a.lab-card {
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), background-color 260ms ease,
    border-color 200ms ease, color 260ms ease, box-shadow 200ms ease;
}
.card-footer .icon { transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
a.lab-card:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  a.lab-card:hover { transform: translateY(-4px); }
  a.lab-card:hover .card-footer .icon { transform: translateX(4px); }
  a.lab-card:active { transform: translateY(-1px) scale(.99); }
}
/* Переход цветов также служит fallback в браузерах без View Transitions. */
body, .sidebar, .topbar, .hero, .category-icon, .card-tag, .learning-note,
.hero-copy > p, .eyebrow, h1 span, .hero-stats, .hero-stats strong, .section-heading p,
.lab-card > p, .card-meta, .card-footer, .section-count, .breadcrumb, .breadcrumb strong,
.nav-count, #result-count, .footer, .theme-control, .theme-control button, .search-wrap,
.search-wrap input, .code-window, .window-top, .window-top small, .code-output,
.code-purple, .code-blue, .code-green, .code-comment, .art-tag, .art-orbit, .empty-state {
  transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease;
}
::view-transition-group(root) { animation-duration: 260ms; }
::view-transition-old(root) { animation: soft-theme-out 260ms ease both; }
::view-transition-new(root) { animation: soft-theme-in 260ms ease both; }
@keyframes soft-theme-out { to { opacity: 0; } }
@keyframes soft-theme-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  a.lab-card:hover, a.lab-card:hover .card-footer .icon, a.lab-card:active { transform: none; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}