/* Motion layer — Astryx-inspired micro-interactions (vanilla CSS, no React) */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--dur-slow) var(--ease-emphasized),
      transform var(--dur-slow) var(--ease-emphasized);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity var(--dur-slow) var(--ease-emphasized),
      transform var(--dur-slow) var(--ease-emphasized);
  }

  .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
  .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }

  .reveal-stagger.is-visible > * {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
  }
}

/* Buttons — arrow slide on hover (Astryx-style affordance) */
.btn {
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast),
    transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    opacity: 1;
    transform: translateY(-1px);
  }

  .btn:active {
    transform: translateY(0);
  }

  .btn svg {
    transition: transform var(--dur-base) var(--ease-emphasized);
  }

  .btn:hover svg {
    transform: translateX(3px);
  }
}

.btn:focus-visible {
  outline: 2px solid var(--rodan-lavender);
  outline-offset: 3px;
}

/* Assessment option cards */
@media (prefers-reduced-motion: no-preference) {
  .opt {
    transition:
      border-color var(--dur-base) var(--ease-standard),
      background var(--dur-base),
      transform var(--dur-fast) var(--ease-standard);
  }

  .opt:hover {
    transform: translateY(-2px);
  }

  .opt:active {
    transform: translateY(0);
  }
}

.opt:focus-visible {
  outline: 2px solid var(--rodan-lavender);
  outline-offset: 2px;
}