/**
 * Intentional motion only (2–3 roles). Prefer reduced-motion.
 */
@media (prefers-reduced-motion: no-preference) {
  [data-lg-motion="fade-rise"] {
    animation: lg-fade-rise var(--lg-duration) var(--lg-ease) both;
  }

  [data-lg-motion="underline-grow"]::after {
    content: "";
    display: block;
    height: 2px;
    width: 0;
    margin-top: var(--lg-space-2);
    background: var(--lg-gradient-graph);
    transition: width var(--lg-duration) var(--lg-ease);
  }

  [data-lg-motion="underline-grow"]:hover::after,
  [data-lg-motion="underline-grow"]:focus-visible::after {
    width: 100%;
  }

  [data-lg-cta] {
    transition:
      background-color var(--lg-duration-fast) var(--lg-ease),
      color var(--lg-duration-fast) var(--lg-ease),
      transform var(--lg-duration-fast) var(--lg-ease);
  }

  [data-lg-cta]:hover {
    transform: translateY(-1px);
  }
}

@keyframes lg-fade-rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-lg-motion],
  [data-lg-cta] {
    animation: none !important;
    transition: none !important;
  }
}