/* Shared surface and liquid animation of the «Привычка» button. */
.primary-btn {
  position: relative;
  overflow: hidden;

  min-width: 180px;
  min-height: 52px;
  padding: 0 24px;

  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;

  background:linear-gradient(135deg,#a1a7b9,#131214);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.18);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color:#fff;

  font: 500 14px/1 Inter, system-ui, sans-serif;

  cursor: pointer;

  isolation: isolate;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}


/* Текст всегда сверху */
:host-context(body[data-theme="dark"]) .primary-btn{border-color:rgba(139,198,255,.42);box-shadow:0 8px 28px rgba(91,151,255,.18)}
:host-context(body[data-theme="dark"]) .primary-btn:hover{box-shadow:0 12px 34px rgba(91,151,255,.28)}
:host-context(body[data-theme="light"]) .primary-btn{box-shadow:0 6px 18px rgba(0,0,0,.14)}
.primary-btn > * {
  position: relative;
  z-index: 4;
}


/* Два живых шара */
.primary-btn::before,
.primary-btn::after {
  content: "";

  position: absolute;

  border-radius:
    55% 45% 60% 40% /
    45% 55% 40% 60%;

  pointer-events: none;

  opacity: 0;

  z-index: 1;

  filter: blur(14px);

  transition:
    opacity 0.4s ease;
}


/* Первый тёмный шар */
.primary-btn::before {
  width: 130px;
  height: 115px;

  left: -35px;
  top: -36px;

  background:
    radial-gradient(
      circle at 40% 40%,
      rgba(95, 108, 130, 0.85) 0%,
      rgba(55, 65, 82, 0.75) 28%,
      rgba(30, 37, 49, 0.48) 52%,
      rgba(13, 17, 24, 0.15) 70%,
      transparent 78%
    );
}


/* Второй тёмный шар */
.primary-btn::after {
  width: 120px;
  height: 110px;

  right: -28px;
  bottom: -38px;

  background:
    radial-gradient(
      circle at 55% 55%,
      rgba(70, 82, 101, 0.9) 0%,
      rgba(42, 51, 67, 0.72) 30%,
      rgba(22, 28, 39, 0.45) 55%,
      rgba(8, 11, 17, 0.15) 70%,
      transparent 80%
    );
}


/* Hover */
.primary-btn:hover {
  transform: translateY(-2px);

  border-color: rgba(255, 255, 255, 0.48);

  background:
    linear-gradient(
      120deg,
      rgba(39, 47, 59, 0.82),
      rgba(10, 13, 18, 0.95),
      rgba(36, 44, 57, 0.78)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 10px 32px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(110, 130, 160, 0.08);
}


/* Показываем жидкость */
.primary-btn:hover::before,
.primary-btn:hover::after {
  opacity: 1;
}


/* Первый шар */
.primary-btn:hover::before {
  animation:
    primaryLiquidOne 4s ease-in-out infinite alternate,
    primaryMorphOne 5s ease-in-out infinite alternate;
}


/* Второй шар */
.primary-btn:hover::after {
  animation:
    primaryLiquidTwo 4.8s ease-in-out infinite alternate,
    primaryMorphTwo 5.8s ease-in-out infinite alternate;
}


/* Движение первого шара */
@keyframes primaryLiquidOne {
  0% {
    transform:
      translate(0, 0)
      rotate(0deg)
      scale(1);
  }

  25% {
    transform:
      translate(30px, 9px)
      rotate(18deg)
      scale(1.08);
  }

  50% {
    transform:
      translate(65px, -4px)
      rotate(35deg)
      scale(0.93);
  }

  75% {
    transform:
      translate(88px, 13px)
      rotate(55deg)
      scale(1.1);
  }

  100% {
    transform:
      translate(120px, 1px)
      rotate(75deg)
      scale(1);
  }
}


/* Движение второго шара */
@keyframes primaryLiquidTwo {
  0% {
    transform:
      translate(0, 0)
      rotate(0deg)
      scale(1);
  }

  25% {
    transform:
      translate(-28px, -10px)
      rotate(-20deg)
      scale(1.07);
  }

  50% {
    transform:
      translate(-62px, 5px)
      rotate(-38deg)
      scale(0.94);
  }

  75% {
    transform:
      translate(-86px, -12px)
      rotate(-58deg)
      scale(1.11);
  }

  100% {
    transform:
      translate(-115px, 0)
      rotate(-80deg)
      scale(1);
  }
}


/* Постоянно меняем форму первого */
@keyframes primaryMorphOne {
  0% {
    border-radius:
      55% 45% 60% 40% /
      45% 55% 40% 60%;
  }

  33% {
    border-radius:
      40% 60% 45% 55% /
      60% 40% 58% 42%;
  }

  66% {
    border-radius:
      62% 38% 55% 45% /
      40% 60% 44% 56%;
  }

  100% {
    border-radius:
      48% 52% 38% 62% /
      58% 42% 61% 39%;
  }
}


/* Постоянно меняем форму второго */
@keyframes primaryMorphTwo {
  0% {
    border-radius:
      45% 55% 42% 58% /
      58% 42% 60% 40%;
  }

  33% {
    border-radius:
      60% 40% 58% 42% /
      38% 62% 45% 55%;
  }

  66% {
    border-radius:
      42% 58% 35% 65% /
      62% 38% 55% 45%;
  }

  100% {
    border-radius:
      58% 42% 64% 36% /
      44% 56% 38% 62%;
  }
}


/* Нажатие */
.primary-btn:active {
  transform: translateY(0) scale(0.97);
}


/* Фокус с клавиатуры */
.primary-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 3px;
}


/* Телефон — эффект появляется при нажатии */
.primary-btn:active::before,
.primary-btn:active::after {
  opacity: 1;
}


/* Если пользователь отключил анимации */
@media (prefers-reduced-motion: reduce) {
  .primary-btn,
  .primary-btn::before,
  .primary-btn::after {
    animation: none !important;
    transition: none !important;
  }
}