/* Эффект кнопок.
   В покое: объёмная кнопка — зелёная светящаяся кромка, блик сверху, тёмный «ободок» снизу, мягкое свечение вокруг,
   и по ней всё время бежит небольшой блик слева направо.
   При наведении (класс fx-hot ставит btn-fx.js, чтобы не дёргалось): кнопка откидывается назад, как крышка (идея Progress Fold Button), свечение и блик сильнее.
   Подключается на главной и на статических страницах. Движок не трогает: только внешний вид.
   Без эффекта: класс no-fx, лента .ticker-track, отключённые кнопки и мелкие кнопки «сохранить карточку»
   в списках (их сотни — бесконечная анимация на каждой тормозила бы страницу). */

@keyframes fx-shine {
  0%        { background-position: 100% 0; }
  55%, 100% { background-position: 0% 0; }
}

/* position: relative нужен для ::before/::after, но не должен перебивать absolute/fixed/sticky самой кнопки
   (кнопка закрытия окна клуба стоит в углу через absolute). Поэтому здесь нулевая специфичность: любой класс Tailwind сильнее. */
:where(button, .cta, .lang, .cal-btn, .fx-btn):where(:not(.no-fx, [data-export], .ticker-track *, :disabled)) {
  position: relative;
}
:where(button, .cta, .lang, .cal-btn, .fx-btn):not(.no-fx, [data-export], .ticker-track *, :disabled) {
  transform-origin: 50% 0;
  transform: perspective(420px) rotateX(0deg) scaleY(1);
  transition: transform .3s cubic-bezier(.3, .7, .2, 1), filter .3s;
  /* свечение вокруг кнопки видно всегда */
  filter: drop-shadow(0 0 5px rgba(52, 211, 153, .32));
}
/* кромка и объём: светлая полоска сверху, тёмная снизу, зелёное свечение внутри по краю */
:where(button, .cta, .lang, .cal-btn, .fx-btn):not(.no-fx, [data-export], .ticker-track *, :disabled)::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(52, 211, 153, .5),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -3px 0 rgba(0, 0, 0, .38),
    inset 0 0 14px rgba(52, 211, 153, .26);
  transition: box-shadow .22s;
}
/* блик: узкая светлая полоса едет слева направо и ждёт паузу до следующего прохода */
:where(button, .cta, .lang, .cal-btn, .fx-btn):not(.no-fx, [data-export], .ticker-track *, :disabled)::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0 44%, rgba(167, 243, 208, .3) 50%, transparent 56% 100%) 100% 0 / 320% 100% no-repeat;
  animation: fx-shine 4.2s ease-in-out infinite;
}
/* чтобы кнопки не бликовали все разом */
:where(button, .cta, .lang, .cal-btn, .fx-btn):nth-child(2n)::after { animation-delay: -1.3s; }
:where(button, .cta, .lang, .cal-btn, .fx-btn):nth-child(3n)::after { animation-delay: -2.6s; }
:where(button, .cta, .lang, .cal-btn, .fx-btn):nth-child(5n)::after { animation-delay: -.7s; }

/* наведение и выбор с клавиатуры: откидывается назад, светится сильнее, блик быстрее */
:where(button, .cta, .lang, .cal-btn, .fx-btn):not(.no-fx, [data-export], .ticker-track *, :disabled):is(.fx-hot, :focus-visible) {
  /* scaleY(1/cos 34°) возвращает высоте то, что отнимает наклон: нижний край остаётся на месте (лишь на 3–4 px ниже,
     как зазор между кнопками), поэтому у кнопки нет «мёртвой» зоны, куда курсор проваливается сквозь неё */
  transform: perspective(420px) rotateX(34deg) scaleY(1.206);
  filter: drop-shadow(0 7px 10px rgba(52, 211, 153, .55));
  /* откидывается быстро (курсор проходит кнопку за долю секунды), выпрямляется плавнее */
  transition: transform .09s ease-out, filter .09s ease-out;
}
:where(button, .cta, .lang, .cal-btn, .fx-btn):not(.no-fx, [data-export], .ticker-track *, :disabled):is(.fx-hot, :focus-visible)::before {
  box-shadow:
    inset 0 0 0 1px rgba(110, 231, 183, .85),
    inset 0 1px 0 rgba(255, 255, 255, .4),
    inset 0 -4px 0 rgba(0, 0, 0, .45),
    inset 0 0 20px rgba(52, 211, 153, .45);
}
:where(button, .cta, .lang, .cal-btn, .fx-btn):not(.no-fx, [data-export], .ticker-track *, :disabled):is(.fx-hot, :hover)::after {
  animation-duration: 1.4s;
  background-image: linear-gradient(100deg, transparent 0 40%, rgba(209, 250, 229, .5) 50%, transparent 60% 100%);
}

/* Если в системе включено «уменьшить анимацию» (в Windows: Параметры → Специальные возможности → Эффекты анимации),
   вечный блик гасим, но свечение остаётся, на наведение кнопка откидывается и блик пробегает один раз:
   это ответ на действие человека, а не движение само по себе. */
@media (prefers-reduced-motion: reduce) {
  :where(button, .cta, .lang, .cal-btn, .fx-btn):not(.no-fx, [data-export], .ticker-track *, :disabled)::after { animation: none; }
  :where(button, .cta, .lang, .cal-btn, .fx-btn):not(.no-fx, [data-export], .ticker-track *, :disabled):is(.fx-hot, :hover)::after {
    animation: fx-shine 1s ease-out 1 both;
  }
}