/* fx.css: добавочное движение и 3D для лендинга menu.ktsoft.uk (эксперимент 23.10.2026).
   ПАЛИТРУ, ШРИФТЫ, РАСКЛАДКУ И ТЕКСТЫ НЕ ТРОГАЕМ: только transform/opacity поверх вида из Claude Design.
   Кривые и длительности: emil-animate (ease-out cubic-bezier(.23,1,.32,1); UI < 300 мс; маркетинг дольше). */

:root {
  --fx-e: cubic-bezier(0.23, 1, 0.32, 1);
  --fx-e-io: cubic-bezier(0.77, 0, 0.175, 1);
  --fx-cyan: #12b8c4;
}

/* ---------- 1. Герой при загрузке (стартовая прозрачность .45: LCP не страдает) ---------- */
@keyframes fxRise { from { opacity: 0.5; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes fxPhoneIn { from { translate: 44px 34px; scale: 0.94; opacity: 0.4; } to { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes fxPop { from { scale: 0.7; opacity: 0.2; } to { scale: 1; opacity: 1; } }
#top > div > div:first-child > :nth-child(1) { animation: fxRise 0.6s var(--fx-e) both; }
#top > div > div:first-child > :nth-child(2) { animation: fxRise 0.6s var(--fx-e) 50ms both; }
#top > div > div:first-child > :nth-child(3) { animation: fxRise 0.6s var(--fx-e) 130ms both; }
#top > div > div:first-child > :nth-child(4) { animation: fxRise 0.6s var(--fx-e) 190ms both; }
#top > div > div:first-child > :nth-child(5) { animation: fxRise 0.6s var(--fx-e) 250ms both; }
#top div[style*="will-change"] > div { animation: fxPhoneIn 0.9s var(--fx-e) 120ms both; }   /* без JS-класса: анимация стартует с первой отрисовкой, иначе CLS */

/* ---------- 2. Появление блоков (data-reveal из support.js): мягче, со ступенькой по порядку ---------- */
[data-reveal]:not([data-rv-done]) { transition: opacity 0.8s var(--fx-e), transform 0.8s var(--fx-e) !important; transition-delay: var(--d, 0ms) !important; }
[data-reveal="true"] { transform: translateY(26px); }
/* иконки «дорисовываются» (pathLength=1 ставит fx.js) */
.fx-draw path, .fx-draw circle, .fx-draw rect { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--fx-e) calc(var(--d, 0ms) + 250ms); }
[data-reveal="in"] .fx-draw path, [data-reveal="in"] .fx-draw circle, [data-reveal="in"] .fx-draw rect { stroke-dashoffset: 0; }
.fx-draw-done path, .fx-draw-done circle, .fx-draw-done rect { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
/* шаги «Как работает»: пунктир между шагами рисуется слева направо, номер и значок «выскакивают» */
li[data-reveal] > span[data-connector] { transform: scaleX(0); transform-origin: left center; transition: transform 0.9s var(--fx-e) calc(var(--d, 0ms) + 350ms); }
li[data-reveal="in"] > span[data-connector] { transform: scaleX(1); }
li[data-reveal] > svg[data-connector] { opacity: 0; transition: opacity 0.4s ease calc(var(--d, 0ms) + 1000ms); }
li[data-reveal="in"] > svg[data-connector] { opacity: 1; }
li[data-reveal] > div > span { scale: 0.72; transition: scale 0.7s var(--fx-e) calc(var(--d, 0ms) + 150ms); }
li[data-reveal="in"] > div > span { scale: 1; }
/* стрелка «боль → решение» мягко подталкивает вправо */
@keyframes fxNudge { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
[aria-labelledby="pain-title"] article[data-reveal="in"] > svg:nth-of-type(2) { animation: fxNudge 2.6s ease-in-out 1s infinite; }

/* ---------- 3. Кнопки ---------- */
.btn { position: relative; overflow: hidden; transition: transform 0.16s var(--fx-e), translate 0.25s var(--fx-e), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.btn:active { transform: scale(0.97); transition-duration: 0.09s; }
.btn.btn-primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.45) 50%, transparent 62%); transform: translateX(-130%); }
@media (hover: hover) and (pointer: fine) { .btn.btn-primary:hover::after { transform: translateX(130%); transition: transform 0.65s var(--fx-e); } }
/* пункты меню: подчёркивание растёт слева */
header nav[data-navlinks] a { position: relative; }
header nav[data-navlinks] a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--color-accent-300); transform: scaleX(0); transform-origin: left center; transition: transform 0.28s var(--fx-e); }
@media (hover: hover) and (pointer: fine) { header nav[data-navlinks] a:hover::after { transform: scaleX(1); } }

/* ---------- 4. Карточки: подсветка за курсором + лёгкий наклон (rotate-свойство, чтобы не трогать inline transform) ---------- */
.fx-card { position: relative; }
.fx-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(18, 184, 196, 0.13), transparent 65%); transition: opacity 0.3s ease; }
@media (hover: hover) and (pointer: fine) {
  .fx-card:hover::before { opacity: 1; }
  .fx-card.fx-tilt { rotate: var(--ax, 0) var(--ay, 1) 0 var(--ang, 0deg); transition: rotate 0.12s linear; will-change: rotate; }
  .fx-card:not(.fx-tilt) { rotate: 0 1 0 0deg; transition: rotate 0.4s var(--fx-e); }
}
.fx-persp { perspective: 900px; }

/* ---------- 5. Телефон в герое: наклон за курсором, «пинг» при сканировании ---------- */
.fx-phone, #top div[style*="will-change"] { perspective: 1100px; }
#top div[style*="will-change"] > div { transition: rotate 0.2s linear; }
.fx-pingglow { position: absolute; inset: -8% -14%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(18, 184, 196, 0.34), transparent 72%); z-index: -1; }
@keyframes fxPing { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.fx-pingglow.go { animation: fxPing 1s var(--fx-e) both; }
.fx-lite .fx-pingglow { animation: fxPing 4.4s var(--fx-e) 1.5s infinite both; opacity: 0; }

/* ---------- 6. QR-табличка: «лёгкая» версия (плитка из экспорта + луч и покачивание) и 3D-хост ---------- */
.fx-qrtile { position: relative; overflow: hidden; animation: fxQFloat 5.2s ease-in-out infinite; transform-origin: 50% 50%; rotate: var(--qax, 0) var(--qay, 1) 0 var(--qang, 0deg); transition: rotate 0.2s linear; }
@keyframes fxQFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.fx-qrtile::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34%; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(18, 184, 196, 0.05) 12%, rgba(18, 184, 196, 0.4) 86%, rgba(147, 231, 237, 0.95) 98%, transparent); transform: translateY(-115%); animation: fxBeamLite 4.4s var(--fx-e-io) infinite; }
@keyframes fxBeamLite { 0% { transform: translateY(-115%); } 38.6% { transform: translateY(305%); } 100% { transform: translateY(305%); } }
.q3d { position: absolute; left: 50%; top: -168px; width: 320px; height: 330px; margin-left: -138px; pointer-events: none; z-index: 5; }
.q3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; animation: fxFade 0.9s var(--fx-e) both; }
@keyframes fxFade { from { opacity: 0; } to { opacity: 1; } }
.q3d[data-mode="gl"] ~ * { }
.fx-qr-hidden { visibility: hidden; }

/* ---------- 7. Индикатор прокрутки и фоновые ауры ---------- */
.fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; box-shadow: 0 0 10px rgba(18, 184, 196, 0.6); }
.fx-orb { position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; will-change: transform; opacity: 0; transition: opacity 1.4s ease; }
.fx-orb.on { opacity: 1; }
.fx-orb-1 { width: 58vmax; height: 58vmax; left: -24vmax; top: 40vh; background: radial-gradient(closest-side, rgba(18, 184, 196, 0.07), transparent); }
.fx-orb-2 { width: 50vmax; height: 50vmax; right: -22vmax; top: 90vh; background: radial-gradient(closest-side, rgba(18, 184, 196, 0.05), transparent); }

/* ---------- 8. Reduced motion: остаётся вид, уходит движение ---------- */
@media (prefers-reduced-motion: reduce) {
  #top > div > div:first-child > *, #top div[style*="will-change"] > div { animation: none !important; }
  [data-reveal]:not([data-rv-done]) { transition: none !important; }
  .fx-draw path, .fx-draw circle, .fx-draw rect { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  li[data-reveal] > span[data-connector], li[data-reveal] > svg[data-connector], li[data-reveal] > div > span { transform: none; scale: 1; opacity: 1; transition: none; }
  [aria-labelledby="pain-title"] article > svg { animation: none !important; }
  .fx-qrtile, .fx-qrtile::after, .fx-lite .fx-pingglow { animation: none !important; }
  .fx-qrtile::after { display: none; }
  .btn.btn-primary::after { display: none; }
  .fx-progress, .fx-orb { display: none; }
}