:root {
  /* Тайминги */
  --ripple-duration: 500ms;
  --ring-width: 1px;
  --ring-duration: 600ms;
  --wash-duration: 700ms;

  /* БАЗОВЫЕ (на всякий случай) — можно не трогать */
  --ripple-color: rgba(255, 255, 255, 0.35);
  --ripple-border-color: rgba(255, 255, 255, 0.35);
  --ripple-hover-color: rgba(255, 255, 255, 0.35);
}

/* === ТЁМНЫЕ КНОПКИ (светлый эффект) === */
.btn-dark {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;

  /* переменные под тёмный фон */
  --ripple-dark-color: rgba(255, 255, 255, 0.18);
  --ring-dark-color: rgba(255, 255, 255, 0.18);
  --wash-dark-color: rgba(255, 255, 255, 0.18);

  /* роутим в общие */

  --ripple-color: var(--ripple-dark-color);
  --ring-color: var(--ring-dark-color);
  --wash-color: var(--wash-dark-color);
}

/* === СВЕТЛЫЕ КНОПКИ (тёмный эффект) === */
.btn-light {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;

  /* переменные под светлый фон */
  --ripple-light-color: rgba(0, 0, 0, 0.07);
  --ring-light-color: rgba(0, 0, 0, 0.07);
  --wash-light-color: rgba(0, 0, 0, 0.07);

  /* роутим в общие */
  --ripple-color: var(--ripple-light-color);
  --ring-color: var(--ring-light-color);
  --wash-color: var(--wash-light-color);
}

/* Текст над эффектами */
.btn-dark > *,
.btn-light > * {
  position: relative;
  z-index: 2;
}

/* ===== RIPPLE ===== */
.ripple__wave {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: var(--ripple-color);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  opacity: 0.7;
  animation: ripple var(--ripple-duration) ease-out forwards;
  z-index: 1;
}

@keyframes ripple {
  from {
    width: 0;
    height: 0;
    opacity: 0.6;
  }
  to {
    width: var(--ripple-size);
    height: var(--ripple-size);
    opacity: 0;
  }
}

/* ===== ПЛОСКИЙ БОРДЮР: hold → blur → fade ===== */
.ripple__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 var(--ring-width) var(--ripple-border-color);
  opacity: 0;
  filter: blur(0);
  transform: none;
  animation: ringHoldBlur var(--ring-duration) ease-out forwards;
}

@keyframes ringHoldBlur {
  0% {
    opacity: 0;
    filter: blur(4px);
  }
  10% {
    opacity: 1;
    filter: blur(0);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    filter: blur(4px);
  }
}

/* ===== ПЛОСКИЙ WASH ===== */
.ripple__wash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: var(--ripple-hover-color);
  opacity: 0;
  transform: scale(0.96);
  animation: washFill var(--wash-duration) ease-out forwards;
}

@keyframes washFill {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  40% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

/* Доступность: минимум движения */
@media (prefers-reduced-motion: reduce) {
  .ripple__wave,
  .ripple__ring,
  .ripple__wash {
    animation-duration: 0.01ms !important;
  }
}