/*
 * Фирменный стиль кнопок «Пульс добра».
 * Подключается ПОСЛЕ CSS темы (см. src/app/layout.tsx), поэтому перекрывает её при равной специфичности.
 *
 * — мягкий «подъём» и пружинистое нажатие (как в интерфейсах Apple);
 * — пятно тёплого света следует за курсором (--mx/--my выставляет BrandFx.tsx);
 * — у основных кнопок градиент переливается, а свечение бьётся в ритме сердца;
 * — волна от точки нажатия (.fx-ripple создаёт BrandFx.tsx).
 *
 * Трансформации — через отдельные свойства translate/scale: они складываются
 * с transform темы (стрелки галереи, кнопка «наверх») и не ломают позиционирование.
 */

:root {
  --fx-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fx-out: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-glow: color-mix(in srgb, var(--primary) 45%, transparent);
  --fx-glow-soft: color-mix(in srgb, var(--primary) 18%, transparent);
  --fx-tint: color-mix(in srgb, var(--primary) 7%, transparent);
}

/* ------------------------------------------------------------------ Общее */

.btn,
.main-pay__sum-btn,
.sproject__tabs-item,
.main-pay-periods label > span,
.main-pay-autopayment-period label > span,
.main-pay__method label,
.sproject__projects-content-item-more-button,
.modal-city__cities-item,
.bshare__item,
.spost__share-item,
.footer__messenger-btn,
.subscribe__item-link {
  position: relative;
  isolation: isolate;
}

/* Кнопка «наверх» и стрелки галереи позиционируются темой (fixed/absolute) — position не трогаем */
.btn,
.main-pay__sum-btn,
.sproject__tabs-item,
.main-pay-periods label > span,
.main-pay-autopayment-period label > span,
.main-pay__method label,
.sproject__projects-content-item-more-button,
.modal-city__cities-item,
.bshare__item,
.spost__share-item,
.footer__messenger-btn,
.to-top-fixed,
.sproject-gallery__btn,
.subscribe__item-link {
  -webkit-tap-highlight-color: transparent;
  transition:
    translate 0.5s var(--fx-spring),
    scale 0.5s var(--fx-spring),
    box-shadow 0.4s var(--fx-out),
    background-color 0.3s var(--fx-out),
    background-position 0.9s var(--fx-out),
    border-color 0.3s var(--fx-out),
    color 0.3s var(--fx-out),
    opacity 0.3s var(--fx-out),
    filter 0.3s var(--fx-out);
}

/* Нажатие — быстрое «вдавливание», отпускание — пружина */
.btn:active,
.main-pay__sum-btn:active,
.sproject__tabs-item:active,
.main-pay-periods label:active > span,
.main-pay-autopayment-period label:active > span,
.main-pay__method label:active,
.sproject__projects-content-item-more-button:active,
.modal-city__cities-item:active,
.footer__messenger-btn:active {
  scale: 0.96;
  translate: 0 0;
  transition-duration: 0.12s;
}

/* Фокус с клавиатуры — аккуратное кольцо вместо системной обводки */
.btn:focus-visible,
.main-pay__sum-btn:focus-visible,
.sproject__tabs-item:focus-visible,
.sproject__projects-content-item-more-button:focus-visible,
.bshare__item:focus-visible,
.spost__share-item:focus-visible,
.footer__messenger-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--white, #fff), 0 0 0 5px var(--fx-glow);
}

/* ------------------------------------------------- Основные кнопки (.btn) */

.btn {
  overflow: hidden;
  background-image: linear-gradient(
    100deg,
    var(--gradient-start) 0%,
    var(--gradient-end) 50%,
    var(--gradient-start) 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 6px 16px -8px var(--fx-glow);
}

.btn > * {
  position: relative;
  z-index: 2;
}

/* Пятно света, следующее за курсором */
.btn:not(.btn--icon)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(
    120px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.38),
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0;
  transition: opacity 0.35s var(--fx-out);
  pointer-events: none;
}

/* Блик, пробегающий по кнопке при наведении */
.btn:not(.btn--icon)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .btn:hover,
  .btn:focus-visible {
    background-image: linear-gradient(
      100deg,
      var(--gradient-start) 0%,
      var(--gradient-end) 50%,
      var(--gradient-start) 100%
    );
    background-position: 100% 50%;
    translate: 0 -2px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      0 14px 28px -12px var(--fx-glow);
    animation: fx-heartbeat 2.4s var(--fx-out) 0.3s infinite;
  }

  .btn:hover::before {
    opacity: 1;
  }

  .btn:not(.btn--icon):hover::after {
    animation: fx-sheen 0.9s var(--fx-out);
  }
}

/* Светлые варианты кнопок темы — без красного свечения */
.btn.btn--gradient-tr {
  background-image: var(--gradient-tr);
  background-size: 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

@media (hover: hover) {
  .btn.btn--gradient-tr:hover {
    background-image: var(--gradient-tr);
    filter: brightness(0.97);
    box-shadow: 0 10px 22px -14px var(--fx-glow);
    animation: none;
  }

  .btn.btn--gradient-tr::before {
    background: radial-gradient(
      90px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--primary) 16%, transparent),
      transparent 70%
    );
  }
}

.btn:disabled {
  animation: none;
  box-shadow: none;
}

/* «Тук-тук»: двойной удар свечения, затем пауза */
@keyframes fx-heartbeat {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      0 14px 28px -12px var(--fx-glow),
      0 0 0 0 var(--fx-glow-soft);
  }
  12% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      0 14px 28px -12px var(--fx-glow),
      0 0 0 7px var(--fx-glow-soft);
  }
  22% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      0 14px 28px -12px var(--fx-glow),
      0 0 0 3px var(--fx-glow-soft);
  }
  32% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      0 14px 28px -12px var(--fx-glow),
      0 0 0 10px transparent;
  }
}

@keyframes fx-sheen {
  0% {
    opacity: 0;
    transform: skewX(-20deg) translateX(0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: skewX(-20deg) translateX(420%);
  }
}

/* ---------------------------------- Чипы: суммы, вкладки, период, способы */

@media (hover: hover) {
  .main-pay__sum-btn:not(.active):hover,
  .sproject__tabs-item:not(.active):hover,
  .main-pay-periods label:hover > input:not(:checked) + span,
  .main-pay-autopayment-period label:hover > span,
  .main-pay__method label:not(:has(input:checked)):hover,
  .sproject__projects-content-item-more-button:hover,
  .modal-city__cities-item:not(.active):hover {
    background-color: var(--fx-tint);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    translate: 0 -1px;
    box-shadow: 0 8px 18px -12px var(--fx-glow);
  }
}

.main-pay__sum-btn.active {
  box-shadow: 0 6px 14px -8px var(--fx-glow);
  animation: fx-pop 0.45s var(--fx-spring);
}

.sproject__tabs-item.active,
.main-pay-periods label input:checked + span {
  animation: fx-pop 0.45s var(--fx-spring);
}

.main-pay__method label:has(input:checked) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Лёгкий «щелчок» при выборе — как у переключателей iOS */
@keyframes fx-pop {
  0% {
    scale: 0.94;
  }
  100% {
    scale: 1;
  }
}

/* ---------------------------------------------------- Круглые иконки */

.bshare__item,
.spost__share-item,
.to-top-fixed,
.sproject-gallery__btn,
.subscribe__item-link,
.footer__messenger-btn {
  overflow: hidden;
}

@media (hover: hover) {
  .bshare__item:hover,
  .spost__share-item:hover,
  .subscribe__item-link:hover,
  .footer__messenger-btn:hover {
    scale: 1.06;
    box-shadow: 0 10px 20px -12px var(--fx-glow);
  }

  .sproject .sproject-gallery__btns .sproject-gallery__btn:hover,
  .to-top-fixed.fixed:hover {
    scale: 1.1;
    box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.35);
  }
}

.bshare__item:active,
.spost__share-item:active,
.subscribe__item-link:active,
.sproject .sproject-gallery__btns .sproject-gallery__btn:active,
.to-top-fixed.fixed:active {
  scale: 0.92;
  transition-duration: 0.12s;
}

/* --------------------------------------------- Волна от точки нажатия */

.fx-ripple {
  position: absolute;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.22;
  pointer-events: none;
  animation: fx-ripple 0.7s var(--fx-out) forwards;
}

.btn .fx-ripple {
  background: #fff;
  opacity: 0.4;
}

@keyframes fx-ripple {
  to {
    transform: scale(var(--fx-ripple-scale, 30));
    opacity: 0;
  }
}

/* ------------------------------------------ Для тех, кто просит меньше движения */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .btn::after,
  .main-pay__sum-btn,
  .sproject__tabs-item,
  .main-pay-periods label > span,
  .main-pay__method label,
  .bshare__item,
  .spost__share-item,
  .to-top-fixed,
  .sproject-gallery__btn,
  .subscribe__item-link,
  .footer__messenger-btn {
    animation: none !important;
    transition-duration: 0.01ms !important;
    translate: none !important;
    scale: none !important;
  }

  .fx-ripple {
    display: none;
  }
}