/* === Pulsing dot for buttons (global, refined) === */

:root {
  --dot-size: 18px;
  --dot-bg:   #60a5fa;  /* blue-400 — светлее в лайте */
  --dot-speed: 1400ms;  /* чуть медленнее */
  --dot-scale-min: .18; /* «почти точка» */
  --dot-scale-max: 1.08;
}

.dark {
  --dot-size: 18px;
  --dot-bg:   rgba(29,78,216,.26); /* blue-700/26 — чуть заметнее */
  --dot-brd:  #60a5fa;             /* blue-400 */
  --dot-speed: 1400ms;
  --dot-scale-min: .18;
  --dot-scale-max: 1.08;
}

.dot-pulse {
  width: var(--dot-size);
  height: var(--dot-size);
  display: inline-block;
  border-radius: 9999px;
  background: var(--dot-bg);
  border: 2px solid var(--dot-brd);
  animation: dotPulseEase var(--dot-speed) linear infinite;
  transform-origin: center center;
}

/* Ключевые кадры с «паузой» в минимуме и мягкими разгонами/замедлениями */
@keyframes dotPulseEase {
  /* мини-размер + пауза (0–12%) */
  0% {
    transform: scale(var(--dot-scale-min));
    opacity: .92;
    animation-timing-function: cubic-bezier(.2, 0, .1, 1); /* мягкий старт к 12% */
  }
  12% {
    transform: scale(var(--dot-scale-min));
    opacity: .92;
    animation-timing-function: cubic-bezier(.22, .6, .2, 1); /* плавный разгон к максу */
  }

  /* пик расширения */
  40% {
    transform: scale(var(--dot-scale-max));
    opacity: 1;
    animation-timing-function: cubic-bezier(.25, 0, .2, 1); /* мягкое торможение */
  }

  /* небольшой «откат» после пика — делает пульс живее */
  60% {
    transform: scale(.94);
    opacity: .97;
    animation-timing-function: cubic-bezier(.3, .1, .1, 1); /* подготовка к сжатию */
  }

  /* возвращаемся к мини-размеру */
  100% {
    transform: scale(var(--dot-scale-min));
    opacity: .92;
  }
}

/* фикс габаритов, чтобы кнопка не прыгала */
.btn-as-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
}

/* respect user preference */
@media (prefers-reduced-motion: reduce) {
  .dot-pulse { animation-duration: calc(var(--dot-speed) * 2); }
}