@layer reset, base, components, layout, app, marketing, utilities, animations;

@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"].is-revealed {
    animation-name: reveal-scale;
    animation-duration: 600ms;
  }

  .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-lift);
    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),
  .summary-card,
  .course-progress-item,
  .source-option {
    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,
  .summary-card:hover,
  .course-progress-item:hover,
  .source-option:hover {
    box-shadow: var(--shadow-lift);
    transform: translateY(-5px) rotate(-0.35deg);
  }

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

  @media (prefers-reduced-motion: reduce) {
    html.js [data-reveal],
    .button,
    .card:has(a, button),
    .summary-card,
    .course-progress-item,
    .source-option {
      transition: none;
      animation: none;
    }
  }

  @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; }
  }
}