/* Кнопки Kaymak.
   D «Стекает» — основное действие: <button class="k-btn-d" data-tone="red|cream">.
   C «Тянется» — акцент, один на экран: <button class="k-btn-c" data-tone="red|cream">.
   data-tone="red" — для светлых фонов (красная матовая), "cream" — для красных фонов.
   Слои (goo, капли) добавляет components/buttons.js → init(). */

.k-btn-d, .k-btn-c {
  --fill: var(--k-red);
  --ink: var(--k-cream);
  --glow: rgb(178 13 20 / .25);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 34px;
  border: 0; background: none; cursor: pointer; text-decoration: none;
  font: 700 15px/1 var(--k-font-text); letter-spacing: .01em; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--k-dur-base) var(--k-ease-spring);
}
.k-btn-d[data-tone="cream"], .k-btn-c[data-tone="cream"] {
  --fill: linear-gradient(180deg, var(--k-white), var(--k-cream) 50%, var(--k-butter));
  --ink: var(--k-wine);
  --glow: rgb(60 0 0 / .3);
}
.k-btn-d.k-sm, .k-btn-c.k-sm { min-height: 46px; padding: 0 22px; font-size: 14px; } /* компактная: меню, карточки, диалоги */
.k-btn-d:focus-visible, .k-btn-c:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: var(--k-r-pill); }

.k-btn__label { position: relative; z-index: 2; pointer-events: none; transition: transform var(--k-dur-base) var(--k-ease-spring); }
.k-btn__goo {
  position: absolute; inset: -24px -24px -52px; z-index: 1; pointer-events: none;
  filter: url(#k-goo) drop-shadow(0 8px 10px var(--glow));
}
.k-btn__pill { position: absolute; inset: 24px 24px 52px; border-radius: var(--k-r-pill); background: var(--fill); transition: transform var(--k-dur-base) var(--k-ease-spring); }

/* D — капли под кнопкой */
.k-btn__drip { position: absolute; border-radius: 50%; background: var(--fill); transform-origin: 50% 0; transition: transform .9s var(--k-ease-viscous); }
/* капли стоят ближе к центру, вдали от скруглённых краёв, и в покое целиком спрятаны в кнопке — текут строго вниз */
.k-btn__drip:nth-of-type(2) { left: calc(24px + 30% - 8px); width: 16px; height: 18px; bottom: 60px; transition-delay: .05s; }
.k-btn__drip:nth-of-type(3) { left: calc(24px + 50% - 11px); width: 22px; height: 24px; bottom: 58px; }
.k-btn__drip:nth-of-type(4) { left: calc(24px + 68% - 7px); width: 14px; height: 16px; bottom: 60px; transition-delay: .12s; }

@media (hover: hover) and (pointer: fine) {
  .k-btn-d:hover .k-btn__pill { transform: scale(1.02, 1); }
  .k-btn-d:hover .k-btn__drip:nth-of-type(2) { transform: translateY(18px) scaleY(1.3); }
  .k-btn-d:hover .k-btn__drip:nth-of-type(3) { transform: translateY(28px) scaleY(1.4); }
  .k-btn-d:hover .k-btn__drip:nth-of-type(4) { transform: translateY(14px) scaleY(1.2); }
}
.k-btn-d:active, .k-btn-c:active { transform: scale(.95); }

/* C — ведущая капля-шар, тянется за курсором (позицию ставит JS) */
.k-btn__dot { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: var(--fill);
  left: calc(50% - 23px); top: calc(24px + 5px); transition: transform .55s var(--k-ease-spring); }

/* Загрузка: капли медленно тянутся вниз и втягиваются обратно, не отрываясь (правило капли);
   длина зависит от прогресса --p (0..1) */
.k-btn-d.is-loading { pointer-events: none; }
.k-btn-d.is-loading .k-btn__drip { animation: k-drip-load 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.k-btn-d.is-loading .k-btn__drip:nth-of-type(3) { animation-delay: .6s; }
.k-btn-d.is-loading .k-btn__drip:nth-of-type(4) { animation-delay: 1.2s; }
@keyframes k-drip-load {
  0%, 100% { transform: translateY(0) scaleY(1); }
  55% { transform: translateY(calc(10px + 14px * var(--p, .3))) scaleY(calc(1.15 + .35 * var(--p, .3))); }
}

@media (prefers-reduced-motion: reduce) {
  .k-btn-d, .k-btn-c, .k-btn__pill, .k-btn__label, .k-btn__dot { transition: none; }
  .k-btn__drip { display: none; }
  .k-btn-d:active, .k-btn-c:active { transform: none; }
}