@layer animations {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  html.js [data-reveal].is-revealed {
    animation: reveal-up 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  html.js [data-reveal="scale"] {
    transform: none;
  }

  html.js [data-reveal="scale"].is-revealed {
    animation: reveal-scale 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .button {
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1), filter 180ms ease;
  }

  .button:hover {
    box-shadow: var(--shadow-lg);
    filter: brightness(1.08);
    transform: translateY(-3px) scale(1.03);
  }

  .button:active {
    box-shadow: none;
    transform: translateY(0) scale(0.97);
  }

  .card:has(a, button),
  .guide-card,
  .practice-set-card,
  .course-progress-item,
  .course-next a,
  .source-option,
  .cover-option-content {
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .card:has(a, button):hover,
  .guide-card:hover,
  .practice-set-card:hover,
  .course-progress-item:hover,
  .course-next a:hover,
  .source-option:hover,
  .cover-option-content:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px) rotate(-0.35deg);
  }

  .card:has(a, button):focus-within,
  .guide-card:focus-within,
  .practice-set-card:focus-within,
  .course-progress-item:focus-within,
  .course-next a:focus-within,
  .source-option:has(input:focus-visible),
  .cover-option:has(input:focus-visible) .cover-option-content {
    box-shadow: 0 0 0 4px rgb(18 111 196 / 16%);
  }

  .hero-copy > * {
    animation: hero-copy-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .hero-copy > :nth-child(2) { animation-delay: 80ms; }
  .hero-copy > :nth-child(3) { animation-delay: 150ms; }
  .hero-copy > :nth-child(4) { animation-delay: 220ms; }

  .hero-art {
    animation: hero-art-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
  }

  @media (prefers-reduced-motion: reduce) {
    html.js [data-reveal],
    html.js [data-reveal="scale"] {
      opacity: 1;
      transform: none;
      animation: none;
    }

    .button,
    .card:has(a, button),
    .guide-card,
    .practice-set-card,
    .course-progress-item,
    .course-next a,
    .source-option,
    .cover-option-content,
    .hero-copy > *,
    .hero-art {
      transition: none;
      animation: none;
    }

    .course-material-row, .course-material-thumb, .course-material-thumb img, .course-hero-actions a { transition: none; }
  }

  .course-material-row { transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  .course-material-card:hover .course-material-row { transform: translateY(-2px); }
  .course-material-thumb { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1); }
  .course-material-thumb img { transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1); }
  .course-material-card:hover .course-material-thumb { box-shadow: var(--shadow-lg); transform: rotate(1.5deg) scale(1.04); }
  .course-material-card:hover .course-material-thumb img { transform: scale(1.1); }

  .course-hero-actions a { position: relative; display: inline-flex; color: var(--primary-hover); text-decoration: none; transition: color 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1); }
  .course-hero-actions a::after { position: absolute; right: 0; bottom: -0.2rem; left: 0; height: 2px; border-radius: 999px; background: currentColor; content: ""; transform-origin: left; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  .course-hero-actions a:hover { color: var(--primary); transform: translateX(3px); }
  .course-hero-actions a:hover::after { transform: scaleX(0.65); }

  .course-page .back-link,
  .course-page .course-hero,
  .course-page .course-board > * {
    animation: course-enter 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .course-page .course-hero { animation-delay: 80ms; }
  .course-page .course-board > .course-guides { animation-delay: 180ms; }
  .course-page .course-supporting-tools { animation-delay: 260ms; }
  .course-page .course-supporting-tools > .course-practice { animation: course-panel-enter 650ms cubic-bezier(0.16, 1, 0.3, 1) 340ms both; }
  .course-page .course-supporting-tools > .course-materials { animation: course-panel-enter 650ms cubic-bezier(0.16, 1, 0.3, 1) 420ms both; }

  .course-hero-cover { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1); }
  .course-hero-cover img { animation: course-cover-breathe 4s ease-in-out 900ms infinite; }
  .course-hero-cover:hover { box-shadow: var(--shadow-lg); transform: rotate(-3deg) scale(1.08); }

  .course-guides,
  .course-practice,
  .course-materials {
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .course-guides:hover,
  .course-practice:hover,
  .course-materials:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
  }

  .course-guide-row { transition: background 180ms ease, padding 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  .course-guide-row:hover { background: rgb(255 255 255 / 16%); padding-inline: 0.5rem; }
  .course-guide-empty-action { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  .course-guide-empty-action:hover { box-shadow: var(--shadow-lg); filter: brightness(1.08); transform: translateY(-3px) scale(1.03); }
  .course-guide-empty-action:active { transform: scale(0.98); }
  .course-practice-list a, .course-practice-empty a { transition: padding 220ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms ease; }
  .course-practice-list a:hover, .course-practice-empty a:hover { padding-inline: 0.4rem; }
  .course-practice-list a b, .course-practice-empty a span { display: inline-block; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  .course-practice-list a:hover b, .course-practice-empty a:hover span { transform: translateX(5px); }
  .course-materials-heading-link { transition: color 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  .course-materials-heading-link:hover { color: var(--primary-hover); transform: translateX(3px); }

  .app-sidebar .app-nav-link > img { transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); }
  .app-sidebar .app-nav-link:hover > img { transform: translateX(2px) scale(1.04); }

  .dashboard > .dashboard-header,
  .dashboard > .dashboard-focus,
  .dashboard > .dashboard-attention,
  .dashboard > .dashboard-library-grid,
  .dashboard > .dashboard-courses {
    animation: dashboard-enter 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .dashboard > .dashboard-header { animation-delay: 60ms; }
  .dashboard > .dashboard-focus { animation-delay: 140ms; }
  .dashboard > .dashboard-attention { animation-delay: 220ms; }
  .dashboard > .dashboard-library-grid { animation-delay: 300ms; }
  .dashboard > .dashboard-courses { animation-delay: 380ms; }


  .dashboard-attention-item { transition: background 180ms ease, padding 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  .dashboard-attention-item:hover { background: var(--blue); padding-inline: 0.5rem; }
  .dashboard-attention-item .link-button { transition: color 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  .dashboard-attention-item:hover .link-button { transform: translateX(3px); }

  .dashboard-library-grid .dashboard-panel {
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .dashboard-library-grid .dashboard-panel:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
  .dashboard-list-item { transition: background 180ms ease, padding 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  .dashboard-list-item:hover { background: rgb(255 255 255 / 18%); padding-inline: 0.4rem; }
  .dashboard-item-state { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  .dashboard-list-item:hover .dashboard-item-state { transform: translateX(3px); }

  .dashboard .course-progress-item {
    animation: dashboard-card-enter 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .dashboard .course-progress-item:nth-child(1) { animation-delay: 440ms; }
  .dashboard .course-progress-item:nth-child(2) { animation-delay: 500ms; }
  .dashboard .course-progress-item:nth-child(3) { animation-delay: 560ms; }
  .dashboard .course-progress-item:nth-child(4) { animation-delay: 620ms; }
  .dashboard .course-progress-item > img { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
  .dashboard .course-progress-item:hover > img { transform: rotate(-5deg) scale(1.1); }
  .dashboard .course-progress-arrow { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background 180ms ease; }
  .dashboard .course-progress-item:hover .course-progress-arrow { background: var(--progress); transform: translateX(4px) rotate(-4deg); }

  @media (prefers-reduced-motion: reduce) {
    .course-material-row, .course-material-thumb, .course-material-thumb img, .course-hero-actions a, .course-hero-actions a::after,
    .course-page .back-link, .course-page .course-hero, .course-page .course-board > *, .course-page .course-supporting-tools > *, .course-hero-cover, .course-hero-cover img,
    .course-guides, .course-practice, .course-materials, .course-guide-row, .course-guide-empty-action, .course-practice-list a, .course-practice-empty a,
    .course-practice-list a b, .course-practice-empty a span,
    .course-materials-heading-link,
    .app-sidebar .app-nav-link > img,
    .dashboard > .dashboard-header, .dashboard > .dashboard-focus, .dashboard > .dashboard-attention, .dashboard > .dashboard-library-grid, .dashboard > .dashboard-courses,
    .dashboard-attention-item, .dashboard-attention-item .link-button, .dashboard-library-grid .dashboard-panel, .dashboard-list-item,
    .dashboard-item-state, .dashboard .course-progress-item, .dashboard .course-progress-item > img, .dashboard .course-progress-arrow { transition: none; animation: none; }
  }

  @keyframes course-enter {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes course-panel-enter {
    from { opacity: 0; transform: translateY(1.25rem) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes course-cover-breathe {
    0%, 100% { transform: rotate(0) scale(1); }
    50% { transform: rotate(2deg) scale(1.04); }
  }

  @keyframes dashboard-enter {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes dashboard-card-enter {
    from { opacity: 0; transform: translateY(1.25rem) rotate(1deg) scale(0.97); }
    to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
  }

  @keyframes reveal-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes reveal-scale {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes loading-progress {
    0% { transform: scaleX(0.1); transform-origin: left; }
    50% { transform: scaleX(0.7); transform-origin: left; }
    100% { transform: scaleX(1); transform-origin: right; }
  }

  @keyframes hero-copy-in {
    from { opacity: 0; transform: translateY(1.25rem); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes hero-art-in {
    from { opacity: 0; transform: translateY(1.5rem) rotate(2deg) scale(0.94); }
    to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
  }
}