/* Shared motion tokens for the original library and its practice apps. */
:root {
  --motion-quick: 240ms;
  --motion-soft: 500ms;
  --motion-enter: 420ms;
  --motion-ease: cubic-bezier(.45, 0, .2, 1);
  --motion-shadow: 0 16px 38px color-mix(in oklab, var(--primary, oklch(.53 .22 264)) 10%, transparent);
  --motion-ring: 0 0 0 3px color-mix(in oklab, var(--ring, oklch(.65 .16 264)) 16%, transparent);
}

.course-card, .card {
  transition: transform var(--motion-soft) var(--motion-ease),
    box-shadow var(--motion-soft) var(--motion-ease),
    border-color var(--motion-soft) var(--motion-ease);
}

.button, .btn, .icon-button, .copy-button, .nav-item,
.lesson-nav button, .tabs button, .filters button, .time,
.rail button, .card-start, .demo-link, .back-link, .text-link,
.roadmap > a, .lesson-search-results a, .text-button {
  transition: transform var(--motion-quick) var(--motion-ease),
    background-color var(--motion-quick) var(--motion-ease),
    color var(--motion-quick) var(--motion-ease),
    border-color var(--motion-quick) var(--motion-ease),
    box-shadow var(--motion-quick) var(--motion-ease);
}

.searchbar, input, textarea, select {
  transition: border-color var(--motion-quick) var(--motion-ease),
    box-shadow var(--motion-quick) var(--motion-ease),
    background-color var(--motion-quick) var(--motion-ease);
}
.searchbar:focus-within { box-shadow: var(--motion-ring); }
.demo-link svg, .text-link svg, .back-link svg, .roadmap > a > svg {
  transition: transform var(--motion-soft) var(--motion-ease);
}
.course-body h2 {
  transition: color var(--motion-soft) var(--motion-ease);
}
.course-thumbnail img, .overview-image img {
  transition: transform 700ms var(--motion-ease);
}
[data-slot="progress-indicator"], .progress > div {
  transition: transform 650ms var(--motion-ease), width 650ms var(--motion-ease);
}
.lesson-nav, .modal, .lesson-search-results {
  animation: soft-reveal var(--motion-enter) var(--motion-ease);
}
.course-grid > .course-card {
  animation: soft-reveal var(--motion-enter) var(--motion-ease) backwards;
}
.course-grid > .course-card:nth-child(2) { animation-delay: 45ms; }
.course-grid > .course-card:nth-child(3) { animation-delay: 90ms; }
.course-grid > .course-card:nth-child(4) { animation-delay: 135ms; }
.course-grid > .course-card:nth-child(5) { animation-delay: 180ms; }

@media (hover: hover) and (pointer: fine) {
  .course-card:hover, .card:hover {
    transform: translateY(-5px);
    box-shadow: var(--motion-shadow);
    border-color: color-mix(in oklab, var(--primary, oklch(.53 .22 264)) 30%, var(--border, oklch(.9 .02 264)));
  }
  .course-card:hover .course-body h2 { color: var(--primary); }
  .course-card:hover img { transform: translateY(-2px) scale(1.015); }
  .button:not(:disabled):hover, .btn:not(:disabled):hover { transform: translateY(-2px); }
  .nav-item:hover, .lesson-nav button:hover, .rail button:hover { transform: translateX(2px); }
  .demo-link:hover svg, .text-link:hover svg, .roadmap > a:hover > svg { transform: translateX(3px); }
  .back-link:hover svg { transform: translateX(-3px); }
}
.button:not(:disabled):active, .btn:not(:disabled):active,
.icon-button:not(:disabled):active, .copy-button:not(:disabled):active {
  transform: translateY(0) scale(.98);
}
@keyframes soft-reveal {
  from { opacity: 0; translate: 0 7px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .course-card:hover, .card:hover, .course-card:hover img,
  .button:hover, .btn:hover, .nav-item:hover, .lesson-nav button:hover,
  .rail button:hover, .button:active, .btn:active, .icon-button:active,
  .copy-button:active, .demo-link:hover svg, .text-link:hover svg,
  .roadmap > a:hover > svg, .back-link:hover svg { transform: none; }
}