/* PivotPoint UX-слой (ui-ux-pro-max) — раскатан на весь сайт из /v2/-прототипа.
   Дизайн не меняет: добавляет только поведение, доступность и микрополировку.
   Подключается из inc/layout.php на каждой странице; JS-часть — assets/js/pp-ux.js. */

/* --- Доступность: видимый фокус и touch-поведение --- */
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex="0"]:focus-visible {
  outline:2px solid #8047dd !important; outline-offset:3px; border-radius:6px;
}
a, summary, button, .pp-node { touch-action:manipulation; }
section[id] { scroll-margin-top:84px; }

/* --- Табличные цифры: счётчики не «прыгают» по ширине при анимации --- */
[data-count] { font-variant-numeric:tabular-nums; }

/* --- Press-feedback (HIG/MD: отклик 80-150мс на нажатие) --- */
.pp-hv-cta:active, .pp-hv-ghost:active { transform:scale(0.97) !important; transition-duration:.12s !important; }
.pp-hv-chip:active { transform:scale(0.95) !important; transition-duration:.12s !important; }
.pp-modal-card button:active { transform:scale(0.98); }

/* --- Touch-цели чипов >=44px на сенсорных экранах и мобильной вёрстке --- */
@media (pointer:coarse), (max-width:768px) {
  .pp-hv-chip { padding:12px 17px !important; }
}

/* --- Marquee: пауза при наведении --- */
div[style*="ppMarquee"]:hover { animation-play-state:paused !important; }

/* --- Scroll-reveal (класс вешает только JS — без JS контент виден сразу) --- */
.pp-r { opacity:0; transform:translateY(26px); }
.pp-r.pp-in { opacity:1; transform:translateY(0); transition:opacity .8s cubic-bezier(0.22,1,0.36,1), transform .9s cubic-bezier(0.22,1,0.36,1); transition-delay:var(--ppd,0ms); }

/* --- «Система роста» (главная): активное звено --- */
.pp-node { border-radius:20px; }
.pp-node .pp-node-dot, .pp-node .pp-node-lbl { transition:all .3s cubic-bezier(0.22,1,0.36,1); }
.pp-node.pp-node-on .pp-node-dot {
  border-color:rgba(128,71,221,0.65) !important; background:rgba(128,71,221,0.16) !important;
  color:#fff !important; box-shadow:0 0 0 6px rgba(128,71,221,0.12), 0 0 34px rgba(128,71,221,0.35);
  transform:translateY(-4px);
}
.pp-node.pp-node-on .pp-node-lbl { color:#fff !important; }
.pp-node:hover .pp-node-dot { border-color:rgba(128,71,221,0.45) !important; color:#fff !important; }
.pp-flow-dot { cursor:pointer; }
.pp-flow-dot.pp-dot-on { background:linear-gradient(120deg,#8047dd,#4d8dff) !important; box-shadow:0 0 10px rgba(128,71,221,0.7); transform:scale(1.25); }
@keyframes ppfSwap { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.pp-swap { animation:ppfSwap .34s cubic-bezier(0.22,1,0.36,1); }

/* --- FAQ: плюс превращается в крестик, ответ плавно появляется ---
   Работает и для .pp-faq-item (главная), и для стандартных #faq details
   на 80+ сервисных страницах (шеврон там анимирует layout.php). */
.pp-faq-item[open] .pp-faq-plus { transform:rotate(45deg); }
@keyframes ppFaqIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
#faq details[open] > p, .pp-faq-item[open] > p { animation:ppFaqIn .32s cubic-bezier(0.22,1,0.36,1); }
#faq details > summary { cursor:pointer; }
.pp-faq-item > summary:hover span:first-child { color:#a685ee; transition:color .2s ease; }

/* --- Курсорная подсветка карточек (в тон существующему глоу) --- */
.pp-hv-card { position:relative; }
.pp-hv-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(128,71,221,0.10), transparent 65%);
  opacity:0; transition:opacity .3s ease;
}
.pp-hv-card:hover::after { opacity:1; }

/* --- Reduced motion: гасим декоративную анимацию, контент читаем сразу --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .pp-r { opacity:1 !important; transform:none !important; }
  html { scroll-behavior:auto; }
}