/* Shared motion tokens + reveal defaults — see docs/superpowers/specs/2026-09-11-site-motion-polish-design.md */

:root {
  --motion-ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --motion-reveal-duration: 0.45s;
  --motion-reveal-y: 16px;
  --motion-stagger: 55ms;
}

.reveal {
  opacity: 0;
  transform: translateY(var(--motion-reveal-y));
}

.reveal[data-motion-fade] {
  transform: none;
}

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

/* CTA polish: subtle lift only (color handled per-button) */
.motion-cta {
  transition:
    color 0.3s var(--motion-ease-spring),
    background-color 0.3s var(--motion-ease-spring),
    border-color 0.3s var(--motion-ease-spring),
    transform 0.25s var(--motion-ease-spring),
    box-shadow 0.3s var(--motion-ease-spring);
}

.motion-cta:hover {
  transform: translateY(-1px);
}

.motion-cta:active {
  transform: translateY(0) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .motion-cta,
  .motion-cta:hover,
  .motion-cta:active {
    transition: none !important;
    transform: none !important;
  }
}