/*
  Общая hover-анимация интерактивных контролов. Координаты точки
  входа курсора записывает layout-chrome.js в --hover-x/--hover-y.
*/
:root {
  --color-action-hover: #ff0cc2;
  --color-action-hover-text: #ffffff;
  --color-action-active: #ff0cc2;
  --color-action-active-text: #ffffff;
  --button-hover-duration: 0.5s;
  --button-hover-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --button-hover-blur: 10px;
  --button-press-scale: 0.96;
  --button-press-duration: 0.12s;
}

/*
  Короткий press-feedback для всех нативных интерактивных элементов.
  Используем отдельное свойство scale, чтобы не перезаписывать transform
  у плавающих контролов и элементов с собственными анимациями.
*/
:where(
  a[href],
  button,
  summary,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  [role="link"]
) {
  scale: 1;
  transition-property: scale;
  transition-duration: var(--button-press-duration);
  transition-timing-function: ease-out;
}

:where(
  a[href],
  button,
  summary,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  [role="link"]
):active:not(:disabled, [aria-disabled="true"]) {
  scale: var(--button-press-scale);
  transition-duration: 0.06s;
}

:is(
  .site-header__cta,
  .hero__cta,
  .site-footer__link,
  .site-footer__menu-btn,
  .site-footer__top-btn,
  .footer-menu-panel__link
) {
  --hover-x: 50%;
  --hover-y: 50%;
  isolation: isolate;
  overflow: hidden;
  transition:
    scale var(--button-press-duration) ease-out,
    color 0.3s ease,
    border-color 0.3s ease,
    opacity 0.3s ease;
}

/* .site-footer__menu-btn/.site-footer__top-btn нет в списке — оба уже
   position: absolute сами по себе (см. footer.css), этого достаточно,
   чтобы служить containing block для ::before-заливки ниже; лишний
   position: relative здесь раньше держал .menu-btn в потоке flex (его
   1px-обводка на border-box не даёт сжаться до 0 даже при max-width:0
   — то держало +4px ширины плашки футера в этом состоянии, оттуда и
   был "прыжок" футера на скролле). */
:is(
  .site-header__cta,
  .hero__cta,
  .site-footer__link,
  .footer-menu-panel__link
) {
  position: relative;
}

:is(
  .site-header__cta,
  .hero__cta,
  .site-footer__link,
  .site-footer__menu-btn,
  .site-footer__top-btn,
  .footer-menu-panel__link
)::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--hover-x);
  top: var(--hover-y);
  width: 300%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-action-hover);
  box-shadow:
    0 0 18px rgba(255, 12, 194, 0.72),
    0 0 36px rgba(255, 12, 194, 0.42);
  filter: blur(var(--button-hover-blur));
  opacity: 0.88;
  transform: translate(-50%, -50%) scale(0);
  transition:
    transform var(--button-hover-duration) var(--button-hover-ease),
    filter var(--button-hover-duration) ease,
    opacity 0.3s ease;
  pointer-events: none;
}

/* Активные контролы используют hover-анимацию в обратную сторону:
   из розового состояния в нейтральный ink темы (белый в dark,
   чёрный в light). */
:is(
  .site-header__cta,
  .site-footer__menu-btn,
  .site-footer__link.is-current,
  .footer-menu-panel__link.is-current
)::before {
  background: var(--color-ink);
  box-shadow: none;
}

:is(
  .site-header__cta,
  .hero__cta,
  .site-footer__link,
  .site-footer__menu-btn,
  .site-footer__top-btn,
  .footer-menu-panel__link
):focus-visible {
  border-color: var(--color-action-hover);
  color: var(--color-action-hover-text);
  opacity: 1;
}

.site-footer__link.is-current:focus-visible,
.footer-menu-panel__link.is-current:focus-visible {
  opacity: 1;
}

:is(
  .site-header__cta,
  .hero__cta,
  .site-footer__link,
  .site-footer__menu-btn,
  .site-footer__top-btn,
  .footer-menu-panel__link
):focus-visible::before {
  filter: blur(0);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}

@media (hover: hover) and (pointer: fine) {
  :is(
    .site-header__cta,
    .hero__cta,
    .site-footer__link,
    .site-footer__menu-btn,
    .site-footer__top-btn,
    .footer-menu-panel__link
  ):hover {
    border-color: var(--color-action-hover);
    color: var(--color-action-hover-text);
    opacity: 1;
  }

  .site-footer__link.is-current:hover,
  .footer-menu-panel__link.is-current:hover {
    opacity: 1;
  }

  :is(
    .site-header__cta,
    .site-footer__menu-btn,
    .site-footer__link.is-current,
    .footer-menu-panel__link.is-current
  ):hover {
    border-color: var(--color-ink);
    color: var(--color-ink-contrast);
  }

  :is(
    .site-header__cta,
    .hero__cta,
    .site-footer__link,
    .site-footer__menu-btn,
    .site-footer__top-btn,
    .footer-menu-panel__link
  ):hover::before {
    filter: blur(0);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

:is(
  .site-header__cta,
  .site-footer__menu-btn,
  .site-footer__link.is-current,
  .footer-menu-panel__link.is-current
):focus-visible {
  border-color: var(--color-ink);
  color: var(--color-ink-contrast);
}

@media (hover: none), (pointer: coarse) {
  .site-header__cta:hover,
  .site-footer__link:hover,
  .footer-menu-panel__link:hover {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    a[href],
    button,
    summary,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"],
    [role="link"]
  ) {
    transition-duration: 0.01ms;
  }

  :is(
    .site-header__cta,
    .hero__cta,
    .site-footer__link,
    .site-footer__menu-btn,
    .site-footer__top-btn,
    .footer-menu-panel__link
  ),
  :is(
    .site-header__cta,
    .hero__cta,
    .site-footer__link,
    .site-footer__menu-btn,
    .site-footer__top-btn,
    .footer-menu-panel__link
  )::before {
    transition-duration: 0.01ms;
  }
}