/* From Myxa src/next/ui/cta.css; native button selectors. */
/*
 * Главная кнопка экрана (CtaButton). Вне слоёв — поверх стилей HeroUI.
 *
 * Без бликов и бегущих отблесков (пробовали — дёшево). Объём даёт
 * сама форма: оттенок того же зелёного чуть светлее сверху, тонкая
 * светлая кромка сверху и тёмная снизу, мягкая зелёная тень под
 * кнопкой — она будто лежит над экраном. При нажатии тень прижимается.
 */
.btn--primary {
  height: 3.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: linear-gradient(
    180deg,
    oklch(0.6 0.15 152),
    oklch(0.54 0.15 152)
  );
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    inset 0 -1px 0 rgb(0 0 0 / 0.12),
    0 1px 2px rgb(0 40 20 / 0.12),
    0 10px 24px -10px oklch(0.56 0.15 152 / 0.6);
  transition:
    transform 150ms var(--ease-out-strong),
    box-shadow 150ms var(--ease-out-strong);
}

.btn--primary:active {
  transform: scale(0.98);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    inset 0 -1px 0 rgb(0 0 0 / 0.12),
    0 1px 2px rgb(0 40 20 / 0.12),
    0 4px 12px -6px oklch(0.56 0.15 152 / 0.5);
}