/* ============================================================
   FX — анимации за UtilX (илюстрации, скрол, резултати)
   Само transform/opacity (GPU). Спира при prefers-reduced-motion.
   ============================================================ */

/* === ИЛЮСТРАЦИЯ В ГОРНАТА ЧАСТ НА ИНСТРУМЕНТА === */
.fx-illo {
  position: relative;
  height: 96px;
  margin: 0 0 16px;
  border-radius: 12px;
  color: var(--link);
  background: var(--soft);
  border: 1px solid var(--border);
  overflow: hidden;
  contain: layout paint;
}
.fx-illo svg { display: block; width: 100%; height: 100%; opacity: .9; }
@media (min-width: 768px) { .fx-illo { height: 110px; } }

/* Пауза, когато е извън екрана (класът се слага от fx.js) */
.fx-illo.fx-paused * { animation-play-state: paused !important; }

.fx-illo svg * { transform-box: fill-box; transform-origin: center; }

/* При печат (фактури, CV, документи) илюстрациите не се печатат, а скритите секции се показват */
@media print {
  .fx-illo { display: none !important; }
  .fx-reveal { opacity: 1 !important; transform: none !important; }
}

/* --- Вълни --- */
.fx-wave-move { animation: fxWave 3s linear infinite; }
.fx-wave-move.fx-slow { animation-duration: 5s; animation-direction: reverse; }
@keyframes fxWave { to { transform: translateX(80px); } }

/* --- Еквалайзер / растящи колони --- */
.fx-eq { transform-origin: 50% 100%; animation: fxEq 1.1s ease-in-out infinite alternate; }
@keyframes fxEq { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
.fx-grow { transform-origin: 50% 100% !important; animation: fxGrow 2.8s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes fxGrow { 0% { transform: scaleY(0); } 35%, 85% { transform: scaleY(1); } 100% { transform: scaleY(0); opacity: 0; } }

/* --- Кръгове, мигане, светене --- */
.fx-ring { animation: fxRing 2.2s ease-out infinite; }
@keyframes fxRing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.4); opacity: 0; } }
.fx-blink { animation: fxBlink 1.6s ease-in-out infinite; }
@keyframes fxBlink { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.fx-glow { animation: fxGlow 2s ease-in-out infinite; }
@keyframes fxGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.fx-d2 { animation-delay: .8s !important; }

/* --- Пиксели --- */
.fx-pixel { animation: fxPixel 2.4s steps(1) infinite; }
@keyframes fxPixel { 0% { opacity: .9; } 33% { opacity: .25; } 66% { opacity: .55; } }

/* --- Сканиращи линии --- */
.fx-sweep { animation: fxSweep 2.6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes fxSweep { 0% { transform: translateX(0); } 50% { transform: translateX(92px); } 100% { transform: translateX(0); } }
.fx-scan { animation: fxScan 2.4s ease-in-out infinite; }
.fx-scan-qr { animation-duration: 1.8s; }
@keyframes fxScan { 0%, 100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(70px); opacity: 1; } }

/* --- Курсор и мерник --- */
.fx-cursor { animation: fxCursor 2.2s ease-in-out infinite; }
@keyframes fxCursor { 0%, 100% { transform: translate(60px, 24px); } 45%, 60% { transform: translate(0, 0); } 52% { transform: translate(0, 0) scale(.85); } }
.fx-aim { animation: fxAim 3.2s ease-in-out infinite; }
@keyframes fxAim { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(36px, -14px); } 65% { transform: translate(-34px, 14px); } }
.fx-hit { opacity: 0; animation: fxHit 3.2s ease-out infinite; }
.fx-hit.fx-d2 { animation-delay: 1.6s !important; }
@keyframes fxHit { 0%, 24% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.4); } 45%, 100% { opacity: 0; transform: scale(2); } }

/* --- Клавиши --- */
.fx-key { animation: fxKey 1.6s ease-in-out infinite; }
@keyframes fxKey { 0%, 20%, 100% { transform: translateY(0); opacity: .6; } 10% { transform: translateY(4px); opacity: 1; } }

/* --- Телефон --- */
.fx-shake { animation: fxShake 2.4s ease-in-out infinite; }
@keyframes fxShake { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(-5deg); } 68% { transform: rotate(5deg); } 72% { transform: rotate(-4deg); } 76% { transform: rotate(3deg); } }
.fx-fill { transform-origin: 50% 100% !important; animation: fxCharge 3s ease-in-out infinite; }
.fx-charge { transform-origin: 0 50% !important; animation: fxChargeX 2.6s ease-in-out infinite; }
@keyframes fxCharge { 0% { transform: scaleY(.1); } 80%, 100% { transform: scaleY(1); } }
@keyframes fxChargeX { 0% { transform: scaleX(.08); } 80%, 100% { transform: scaleX(1); } }

/* --- Плаващи елементи --- */
.fx-float { animation: fxFloat 3s ease-in-out infinite; }
@keyframes fxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.fx-bob { animation: fxBob 2.4s ease-in-out infinite; }
@keyframes fxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* --- Видео лента --- */
.fx-film { animation: fxFilm 6s linear infinite; }
@keyframes fxFilm { to { transform: translateX(-112px); } }

/* --- Мрежови пакети --- */
.fx-packet { animation: fxPacket 2.2s ease-in-out infinite; }
.fx-packet.fx-rev { animation-name: fxPacketRev; animation-delay: 1.1s; }
@keyframes fxPacket { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(100px); opacity: 0; } }
@keyframes fxPacketRev { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(-100px); opacity: 0; } }

/* --- Документ --- */
.fx-type { stroke-dasharray: 60; stroke-dashoffset: 60; animation: fxType 3.5s ease-out infinite; }
@keyframes fxType { 0% { stroke-dashoffset: 60; } 25%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* --- Скоростомер --- */
.fx-needle { transform-origin: 100% 50% !important; animation: fxNeedle 3s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes fxNeedle { 0%, 100% { transform: rotate(10deg); } 55% { transform: rotate(160deg); } 70% { transform: rotate(150deg); } }
.fx-road { animation: fxRoad .8s linear infinite; }
@keyframes fxRoad { to { transform: translateX(-60px); } }

/* --- Тухли --- */
.fx-brick { animation: fxBrick 4s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes fxBrick { 0% { transform: translateY(-24px); opacity: 0; } 15%, 85% { transform: translateY(0); opacity: 1; } 100% { opacity: 0; } }

/* --- Чертане на линия (pathLength=1) --- */
.fx-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fxDraw 2.8s ease-out infinite; }
@keyframes fxDraw { 0% { stroke-dashoffset: 1; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.fx-trace { stroke-dasharray: .25 1; stroke-dashoffset: 1.25; animation: fxTrace 2.4s linear infinite; }
@keyframes fxTrace { to { stroke-dashoffset: 0; } }

/* --- Монета / капки / искри --- */
.fx-coin { animation: fxCoin 2.8s ease-in infinite; }
@keyframes fxCoin { 0% { transform: translateY(-30px); opacity: 0; } 20% { opacity: 1; } 60%, 80% { transform: translateY(26px); opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
.fx-drop { animation: fxDrop 2s ease-in infinite; }
@keyframes fxDrop { 0% { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }
.fx-spark { animation: fxSpark 1.8s ease-in-out infinite; }
@keyframes fxSpark { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }

/* --- Самолет --- */
.fx-plane { offset-path: path("M30 76 C 110 76, 150 18, 290 26"); offset-rotate: auto; animation: fxPlane 4s ease-in-out infinite; }
@keyframes fxPlane { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* --- Меч / конвертор --- */
.fx-swing { transform-origin: 0% 100% !important; animation: fxSwing 2.6s ease-in-out infinite; }
@keyframes fxSwing { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-18deg); } 55% { transform: rotate(6deg); } }
.fx-slide { animation: fxSlide 1.8s ease-in-out infinite; }
@keyframes fxSlide { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }

/* === ПОЯВА ПРИ СКРОЛ === */
.fx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); }
.fx-reveal.fx-in { opacity: 1; transform: none; }

/* На мобилни страничните панели са под инструмента — там ги показваме при скрол, не при зареждане */
@media (max-width: 1149px) {
  .side-panel.left > *, .side-panel.right > * { animation: none; }
}

/* === РЕЗУЛТАТИ === */
/* само цвят — без смяна на размер/display, за да не мърда подредбата */
.fx-bump { animation: fxBump .5s ease-out; }
@keyframes fxBump { 30% { color: var(--link); } }
.fx-flash { animation: fxFlash .7s ease-out; }
@keyframes fxFlash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--link) 45%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

/* === МИКРО-ВЗАИМОДЕЙСТВИЯ === */
.btn, .ux-btn, button.tool-link { position: relative; overflow: hidden; }
.btn:active, .ux-btn:active { transform: scale(.97); }
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: color-mix(in srgb, var(--link) 45%, transparent);
  animation: fxRipple .55s ease-out forwards;
}
@keyframes fxRipple { to { transform: scale(30); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fx-illo *, .fx-illo::after, .fx-bump, .fx-flash, .fx-ripple { animation: none !important; }
  .fx-reveal { opacity: 1; transform: none; transition: none; }
}