/*
 * Про-Тент · микроанимации кнопок и ссылок.
 * Классы можно добавлять к уже существующим кнопкам сайта: они не задают
 * размеры и шрифт, а только поведение (кроме демо-оформления .mb-demo-*).
 */
:root {
  --mb-accent: #f06422;
  --mb-accent-dark: #f26522; /* без затемнения: владелец просил везде яркий фирменный */
  --mb-ink: #22211f;
  --mb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mb-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Базовое поведение: лёгкое нажатие и аккуратный фокус */
.mb-press {
  position: relative;
  transition:
    transform 0.18s var(--mb-ease),
    background-color 0.22s var(--mb-ease),
    color 0.22s var(--mb-ease),
    box-shadow 0.22s var(--mb-ease);
  -webkit-tap-highlight-color: transparent;
}
.mb-press:active { transform: scale(0.97); }
.mb-press:focus-visible { outline: 2px solid var(--mb-accent); outline-offset: 3px; }

/* Строчка вокруг кнопки: пунктир «пришивается» при наведении и фокусе */
.mb-stitch {
  outline: 2px dashed transparent;
  outline-offset: 9px;
  transition:
    outline-offset 0.35s var(--mb-spring),
    outline-color 0.25s var(--mb-ease),
    transform 0.18s var(--mb-ease);
}
.mb-stitch:hover,
.mb-stitch:focus-visible {
  outline-color: var(--mb-accent);
  outline-offset: 4px;
}

/* Заливка слева направо, как ткань, протянутая под лапкой */
.mb-fill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mb-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mb-fill-color, var(--mb-ink));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--mb-ease);
}
.mb-fill:hover::before,
.mb-fill:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}
.mb-fill:hover,
.mb-fill:focus-visible { color: var(--mb-fill-text, #fff); }

/* Стрелка/иконка внутри кнопки сдвигается вперёд */
.mb-arrow .mb-icon,
.mb-arrow svg {
  display: inline-block;
  transition: transform 0.3s var(--mb-spring);
}
.mb-arrow:hover .mb-icon,
.mb-arrow:hover svg,
.mb-arrow:focus-visible .mb-icon,
.mb-arrow:focus-visible svg { transform: translateX(4px); }

/* Ссылка с «ниткой»: пунктирное подчёркивание прошивается слева */
.mb-thread {
  text-decoration: none;
  background-image: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  padding-bottom: 3px;
  transition: background-size 0.45s var(--mb-ease), color 0.2s var(--mb-ease);
}
.mb-thread:hover,
.mb-thread:focus-visible { background-size: 100% 2px; color: var(--mb-accent-dark); }

/* Пульс для главной кнопки звонка: три мягких кольца и тишина */
.mb-pulse { position: relative; }
.mb-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--mb-accent);
  opacity: 0.55;
  animation: mb-pulse 1.8s var(--mb-ease) 1.2s 3 both;
  pointer-events: none;
}
@keyframes mb-pulse {
  0% { box-shadow: 0 0 0 0 var(--mb-accent); opacity: 0.55; }
  100% { box-shadow: 0 0 0 14px var(--mb-accent); opacity: 0; }
}

/* Волна от нажатия (элемент создаёт micro-buttons.js) */
[data-ripple] { position: relative; overflow: hidden; isolation: isolate; }
.mb-ripple {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.22;
  transform: scale(0);
  animation: mb-ripple 0.6s var(--mb-ease) forwards;
  pointer-events: none;
}
@keyframes mb-ripple { to { transform: scale(1); opacity: 0; } }

/* «Магнит»: смещение задаёт JS через переменные, только для мыши */
[data-magnetic] {
  transform: translate3d(var(--mb-mx, 0px), var(--mb-my, 0px), 0);
  transition: transform 0.35s var(--mb-spring);
}
[data-magnetic].mb-press:active {
  transform: translate3d(var(--mb-mx, 0px), var(--mb-my, 0px), 0) scale(0.97);
}

/* Кнопка в процессе отправки: бегущая строчка по низу */
.mb-loading { pointer-events: none; }
.mb-loading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, currentColor 0 10px, transparent 10px 18px);
  background-size: 36px 3px;
  animation: mb-run 0.6s linear infinite;
  opacity: 0.8;
}
@keyframes mb-run { to { background-position: 36px 0; } }

@media (prefers-reduced-motion: reduce) {
  .mb-press,
  .mb-stitch,
  .mb-fill::before,
  .mb-arrow .mb-icon,
  .mb-arrow svg,
  .mb-thread,
  [data-magnetic] { transition-duration: 0.01s !important; }
  .mb-press:active { transform: none; }
  .mb-arrow:hover .mb-icon,
  .mb-arrow:hover svg { transform: none; }
  .mb-pulse::after,
  .mb-ripple { animation: none; display: none; }
  .mb-loading::after { animation: none; }
  [data-magnetic] { transform: none; }
}