/* =============================================================================
   NC-HOVER — hover-механики кнопок и текстовых ссылок
   -----------------------------------------------------------------------------
   Две независимые механики, разведённые по типам элементов:

     .nc-btn   — кнопки: точка в левом поле разрастается в заливку,
                 подпись уезжает влево, навстречу выезжает дубль со стрелкой.
                 Порт InteractiveHoverButton (React + Tailwind) на чистый CSS.

     .nc-swap  — текстовые ссылки: буквы поочерёдно проворачиваются,
                 верхняя копия уходит вверх, нижняя приходит снизу.
                 Порт RandomLetterSwap (React + framer-motion) на чистый CSS.

   Разметку внутри элементов собирает assets/js/nc-hover.js — она служебная
   и в шаблонах не пишется. Без JS оба типа остаются обычными рабочими
   ссылками и кнопками: механика — прогрессивное улучшение, не условие работы.

   Обе механики используют --color-gold из style.css. Локального хардкода
   золота здесь нет.

   Добавлено 2026-09-20.
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   1. КНОПКИ — .nc-btn
   ───────────────────────────────────────────────────────────────────────────── */

.nc-btn {
  position: relative;
  overflow: hidden;
}

.nc-btn__label,
.nc-btn__hover {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.28s ease;
}

.nc-btn__hover {
  position: absolute;
  inset: 0;
  justify-content: center;
  transform: translateX(46px);
  opacity: 0;
}

.nc-btn__hover svg {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
}

/* Точка стоит в левом поле кнопки, слева от подписи.
   Отступ в px, а не в %: процент от ширины заводит точку под текст
   на длинных подписях. Минимальный горизонтальный padding кнопок — 24px,
   точка занимает 10-18px. calc вместо translateY(-50%) — центрирующий
   transform конфликтует со scale(1.6) при раскрытии. */
.nc-btn__dot {
  position: absolute;
  left: 10px;
  top: calc(50% - 4px);
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nc-dot, var(--color-gold));
  transform: scale(1);
  transition: left 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.nc-btn:hover .nc-btn__label,
.nc-btn:focus-visible .nc-btn__label {
  transform: translateX(-46px);
  opacity: 0;
}

.nc-btn:hover .nc-btn__hover,
.nc-btn:focus-visible .nc-btn__hover {
  transform: translateX(0);
  opacity: 1;
}

.nc-btn:hover .nc-btn__dot,
.nc-btn:focus-visible .nc-btn__dot {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  transform: scale(1.6);
}

/* ── 1.1 Прозрачные кнопки: заливка внутрь, точка золотая ────────────────── */

.btn--ghost.nc-btn .nc-btn__label {
  color: var(--color-gold);
}

.btn--ghost.nc-btn .nc-btn__hover {
  color: #000;
}

.btn--ghost.nc-btn:hover,
.btn--ghost.nc-btn:focus-visible {
  background: transparent;
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* Gutenberg outline-кнопки ведут себя как ghost */
.wp-block-button.is-style-outline .wp-block-button__link.nc-btn .nc-btn__label {
  color: var(--color-gold);
}

.wp-block-button.is-style-outline .wp-block-button__link.nc-btn .nc-btn__hover {
  color: #000;
}

/* ── 1.2 Залитые кнопки: инверсия, точка тёмная ──────────────────────────── */

.btn--primary.nc-btn,
.nc-calc__cta.nc-btn,
.nc-brief__submit.nc-btn,
.wp-block-button__link.nc-btn {
  --nc-dot: #0D0D0D;
}

.btn--primary.nc-btn .nc-btn__label,
.nc-calc__cta.nc-btn .nc-btn__label,
.nc-brief__submit.nc-btn .nc-btn__label,
.wp-block-button__link.nc-btn .nc-btn__label {
  color: #000;
}

.btn--primary.nc-btn .nc-btn__hover,
.nc-calc__cta.nc-btn .nc-btn__hover,
.nc-brief__submit.nc-btn .nc-btn__hover,
.wp-block-button__link.nc-btn .nc-btn__hover {
  color: var(--color-gold);
}

.btn--primary.nc-btn:hover,
.btn--primary.nc-btn:focus-visible {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

/* Штатный hover Gutenberg-кнопки гасит заливку — при раскрытии точки
   фон должен остаться золотым, иначе кнопка мигает. */
.wp-block-button__link.nc-btn:hover,
.wp-block-button__link.nc-btn:focus-visible {
  background: var(--color-gold);
}

/* Тени у кнопок-носителей быть не должно: overflow:hidden её обрежет. */
.nc-btn {
  box-shadow: none;
}

/* Gutenberg-кнопка по умолчанию уже padding 24px+, но у тем бывает меньше */
.wp-block-button__link.nc-btn {
  padding-inline: max(24px, 1.5em);
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. ТЕКСТОВЫЕ ССЫЛКИ — .nc-swap
   ───────────────────────────────────────────────────────────────────────────── */

/* Обёртка с буквами. position + z-index поднимают её над растянутой
   подложкой ::after у карточек услуг: без этого подложка перехватывала бы
   наведение и текст не получал бы его никогда. Клик по тексту при этом
   всё равно ведёт по ссылке — обёртка лежит внутри неё. */
.nc-swap {
  position: relative;
  z-index: 2;
}

.nc-swap__word {
  display: inline-flex;
  white-space: nowrap;
}

.nc-swap__char {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
}

.nc-swap__a,
.nc-swap__b {
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--nc-d, 0s);
}

/* Нижняя копия ждёт под строкой и приходит на место верхней */
.nc-swap__b {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}

/* Мышь: триггер — только обёртка с буквами, то есть ровно текст. */
.nc-swap:hover .nc-swap__a {
  transform: translateY(-100%);
}

.nc-swap:hover .nc-swap__b {
  transform: translateY(0);
}

/* Клавиатура: фокус приходит на ссылку, а не на обёртку внутри неё.
   .nc-swap-host — сама ссылка, .home-start__card — карточка, внутри
   которой строка-CTA не является отдельной ссылкой. */
.nc-swap-host:focus-visible .nc-swap .nc-swap__a,
.home-start__card:focus-visible .nc-swap .nc-swap__a {
  transform: translateY(-100%);
}

.nc-swap-host:focus-visible .nc-swap .nc-swap__b,
.home-start__card:focus-visible .nc-swap .nc-swap__b {
  transform: translateY(0);
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. УСТРОЙСТВА БЕЗ КУРСОРА
   -----------------------------------------------------------------------------
   На тач-экранах наведения не существует: точка так и осталась бы чёрным
   пятном в левом поле кнопки, а дубль текста — невидимым слоем поверх неё.
   Прячем обе служебные части и оставляем обычную кнопку.
   Буквенный свап трогать не нужно: в покое он выглядит как обычный текст.
   ───────────────────────────────────────────────────────────────────────────── */

@media (hover: none) {

  .nc-btn__dot,
  .nc-btn__hover {
    display: none;
  }

  /* Тап на тач-экране браузер засчитывает как :hover, поэтому подпись
     уезжала влево и гасла, а дубль, который должен был её заменить, уже
     скрыт — кнопка оставалась пустой. Селекторы здесь повторяют :hover
     и :active, иначе не перебивают правила выше по весу. */
  .nc-btn__label,
  .nc-btn:hover .nc-btn__label,
  .nc-btn:focus .nc-btn__label,
  .nc-btn:focus-visible .nc-btn__label,
  .nc-btn:active .nc-btn__label {
    transform: none;
    opacity: 1;
  }

  .nc-btn:hover .nc-btn__hover,
  .nc-btn:focus-visible .nc-btn__hover,
  .nc-btn:active .nc-btn__hover {
    opacity: 0;
  }

  .nc-btn:hover .nc-btn__dot,
  .nc-btn:focus-visible .nc-btn__dot,
  .nc-btn:active .nc-btn__dot {
    width: 8px;
    height: 8px;
    transform: none;
    opacity: 0;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. УВАЖЕНИЕ К СИСТЕМНОЙ НАСТРОЙКЕ «УМЕНЬШИТЬ ДВИЖЕНИЕ»
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  .nc-btn__label,
  .nc-btn__hover,
  .nc-btn__dot,
  .nc-swap__a,
  .nc-swap__b {
    transition: none;
  }

  .nc-btn:hover .nc-btn__dot,
  .nc-btn:focus-visible .nc-btn__dot {
    transform: none;
  }
}