/* Кнопки. Модификаторы: --primary (главное действие),
   --ghost (второстепенное), --slim (мелкое), --danger. */

.btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--fast) var(--ease),
              opacity var(--fast) var(--ease),
              filter var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              background var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

.btn__icon {
  width: var(--fs-lg);
  height: var(--fs-lg);
}

.btn + .btn { margin-top: var(--sp-3); }

/* ── Главное действие ──────────────────────────────────────── */

.btn--primary {
  position: relative;
  min-height: var(--control);
  background: linear-gradient(110deg,
    var(--accent-hi) 0%, var(--accent) 45%, var(--accent-lo) 100%);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow:
    0 12px 35px var(--cta-glow-near),
    0 0 35px var(--cta-glow-far);
}

/* ── Свечение под главной кнопкой ─────────────────────────────
   Два слоя, оба декоративные и нажатий не перехватывают:

     ::before — рассеянное тепло, только ореол без чётких краёв;
     ::after  — штрих в форме линзы, внутри него живёт перелив.

   Оба появляются только когда кнопка стала активной: свечение
   и означает, что кнопка загорелась. */

.btn--primary::before,
.btn--primary::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}

.btn--primary::before {
  bottom: -2.6cqw;
  width: 64%;
  height: 3.6cqw;
  background: radial-gradient(50% 50% at 50% 50%,
    var(--cta-glow-near) 0%, var(--cta-glow-far) 45%, transparent 72%);
  filter: blur(7px);
}

/* Штрих. Форму задаёт маска-эллипс: линия толстая в середине
   и сходит на нет к концам, а не обрывается прямоугольником.

   Перелив внутри неё — два светлых пятна: рождаются вместе
   в середине, расходятся к правому и левому концу и там
   растворяются, потому что маска на кончиках прозрачна. */
.btn--primary::after {
  bottom: -1.9cqw;
  width: 48%;
  height: 1.1cqw;
  background:
    linear-gradient(90deg, transparent 0%, var(--cta-sheen) 50%, transparent 100%) no-repeat,
    linear-gradient(90deg, transparent 0%, var(--cta-sheen) 50%, transparent 100%) no-repeat,
    linear-gradient(90deg,
      var(--accent-lo) 0%, var(--accent) 28%,
      var(--accent-hi) 50%, var(--accent) 72%, var(--accent-lo) 100%);
  background-size: 42% 100%, 42% 100%, 100% 100%;
  background-position: 50% 0, 50% 0, 0 0;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%,
    #000 0%, #000 22%, transparent 74%);
  mask-image: radial-gradient(50% 50% at 50% 50%,
    #000 0%, #000 22%, transparent 74%);
  filter: blur(.5px);
}

.btn--primary:not(:disabled)::before { opacity: .9; }

.btn--primary:not(:disabled)::after {
  opacity: 1;
  animation: cta-split 3.8s var(--ease) infinite;
}

.btn--primary:not(:disabled):hover::before { opacity: 1; }

/* Вспышка в середине, затем расхождение к концам.
   Пауза в начале — чтобы вспышка успела прочитаться. */
@keyframes cta-split {
  0%, 10% { background-position: 50% 0, 50% 0, 0 0; }
  100%    { background-position: 100% 0, 0% 0, 0 0; }
}

.btn--primary:not(:disabled):hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 16px 42px var(--cta-glow-near),
    0 0 46px var(--cta-glow-far);
}

/* Нажатие короче наведения: отклик должен успевать за пальцем. */
.btn--primary:not(:disabled):active {
  transform: translateY(1px) scale(.995);
  transition-duration: .12s;
}

/* Выключенная кнопка гасится фильтром, а не только прозрачностью.

   Прозрачности мало: у формы есть лесенка появления, а она задаёт
   opacity своей анимацией — анимация перебивает обычное правило, и
   кнопка вспыхивала золотом, будто по ней можно нажать. Фильтр
   анимация не трогает, поэтому гашение доживает до конца.

   Гасим и цвет: обесцвеченное золото читается как «пока нельзя»
   с одного взгляда, а просто бледное — как «плохо напечатано». */
.btn--primary:disabled {
  filter: saturate(.25) brightness(.55);
  opacity: .5;
  box-shadow: none;
  cursor: default;
}