/* fx.css — анимации всего сайта Flux Hub. Подключается последним на каждой странице, вместе с fx.js. */

/* появление страницы и уход при переходе */
@keyframes fx-page-in { from { opacity: 0; transform: translateY(10px) scale(.992); } }
body.fx-ready { animation: fx-page-in .45s cubic-bezier(.2, .8, .2, 1) backwards; } /* fx.js снимает класс по окончании */
body.fx-leave { opacity: 0; transform: scale(.985); transition: opacity .18s ease, transform .18s ease; }

/* кнопки, вкладки, плашки: при наведении чуть больше, при нажатии — «вдавливаются» */
.btn, .h-tabs button, .tabs button, .chip, .pill, .nav a, nav a, .h-link, .fsup-btn, .fxc-send, .fxc-btn,
[data-supf], [data-supcat], [data-supview], [data-atab], [data-tab], .sup-t, .plan, .price-card, .app-card, .fx-tile {
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.btn:hover, .h-tabs button:hover, .tabs button:hover, .chip:hover, [data-supf]:hover, [data-supcat]:hover, [data-supview]:hover, [data-atab]:hover, .fxc-send:hover, .fxc-btn:hover { transform: translateY(-1px) scale(1.04); }
.btn:active, .h-tabs button:active, .tabs button:active, .chip:active, [data-supf]:active, [data-supcat]:active, [data-supview]:active, [data-atab]:active, .fxc-send:active, .fxc-btn:active,
nav a:active, .nav a:active, [data-tab]:active { transform: scale(.95); }
nav a:hover, .nav a:hover, [data-tab]:hover { transform: translateX(2px); }
.sup-t:hover, .plan:hover, .price-card:hover, .app-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -16px rgba(124, 108, 255, .55); }
.sup-t:active, .plan:active, .price-card:active, .app-card:active { transform: scale(.98); }
.h-stat, .h-card.hoverable { transition: transform .2s ease, box-shadow .2s ease; }
.h-stat:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -18px rgba(124, 108, 255, .6); }
.fsup-btn:hover { transform: translateY(-3px) scale(1.08) rotate(-4deg); }

/* новый раздел (клик по меню/вкладке): плавно въезжает */
@keyframes fx-enter { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(2px); } }
.fx-enter { animation: fx-enter .4s cubic-bezier(.2, .8, .2, 1) backwards; }
.fx-enter > * { animation: fx-enter .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.fx-enter > *:nth-child(2) { animation-delay: .04s; }
.fx-enter > *:nth-child(3) { animation-delay: .08s; }
.fx-enter > *:nth-child(4) { animation-delay: .12s; }
.fx-enter > *:nth-child(n + 5) { animation-delay: .16s; }

/* блоки на главной появляются при прокрутке */
.fx-reveal { opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.fx-reveal.fx-shown { opacity: 1; transform: none; }


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