/* ANYRAY experimental animations (fx layer).
   Откат: убрать две строки подключения из index.html
   (<link ... fx.css> и <script ... fx.js>) — сайт вернётся как был. */
:root {
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- плавающий фон --- */
body::before,
body::after {
  content: "";
  position: fixed;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
body::before {
  top: -20vmax;
  right: -15vmax;
  background: radial-gradient(circle, rgba(255,149,0,0.10), transparent 70%);
  animation: fx-drift 26s ease-in-out infinite alternate;
}
body::after {
  bottom: -25vmax;
  left: -15vmax;
  background: radial-gradient(circle, rgba(255,204,0,0.07), transparent 70%);
  animation: fx-drift 32s ease-in-out infinite alternate-reverse;
}
@keyframes fx-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-6vmax, 5vmax) scale(1.15); }
}
main, header, footer { position: relative; z-index: 1; }

/* --- прогресс скролла --- */
#fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #ff9500, #ffcc00);
  box-shadow: 0 0 12px rgba(255,149,0,0.7);
  z-index: 1300;
}

/* --- шапка при скролле --- */
header.fx-scrolled {
  background: rgba(7, 4, 0, 0.96);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
}
header .logo { transition: text-shadow 0.5s ease; }
header .logo:hover { text-shadow: 0 0 22px rgba(255,149,0,0.6); }

/* --- кнопки: живой градиент + свечение --- */
.btn {
  background: linear-gradient(120deg, #ff9500, #ffb300, #ff9500);
  background-size: 220% 220%;
  transition: transform 0.45s var(--fx-ease), box-shadow 0.45s var(--fx-ease), background-position 0.8s ease;
}
.btn:hover {
  background-position: 100% 50%;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(255,149,0,0.4), 0 0 0 4px rgba(255,149,0,0.12);
}
.btn:active { transform: translateY(0) scale(0.98); }

/* --- карточки: подъём, свечение, 3D-наклон (наклон добавляет fx.js) --- */
.card {
  transition: transform 0.45s var(--fx-ease), box-shadow 0.45s var(--fx-ease), border-color 0.45s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.card:hover {
  transform: translateY(-7px);
  border-color: rgba(255,170,30,0.75);
  box-shadow: 0 20px 44px rgba(255,149,0,0.22);
}
.card:hover .card-emoji { transform: translateY(-2px); }

/* --- появление при скролле: варианты направлений --- */
.reveal { transition-duration: 0.9s; }
.fx-left { transform: translateX(-46px); }
.fx-right { transform: translateX(46px); }
.fx-zoom { transform: scale(0.9); }
.fx-left.visible, .fx-right.visible, .fx-zoom.visible { transform: none; }

/* --- заголовки секций: подчёркивание + трекинг --- */
.section-title { transition: letter-spacing 0.6s var(--fx-ease); }
.section-title.visible { letter-spacing: 1px; }

/* --- hero: плавное появление + парение --- */
.hero h1 { animation: fx-fade-up 1s var(--fx-ease) both 0.05s; }
.hero p { animation: fx-fade-up 1s var(--fx-ease) both 0.2s; }
.hero-buttons { animation: fx-fade-up 1s var(--fx-ease) both 0.35s; }
.hero-badges { animation: fx-fade-up 1s var(--fx-ease) both 0.5s; }
@keyframes fx-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.badge { transition: transform 0.4s var(--fx-ease), border-color 0.4s ease, color 0.4s ease; }
.badge:hover { transform: translateY(-4px) scale(1.05); border-color: #ff9500; color: #ffcc00; }
.scroll-hint .mouse { width: 20px; height: 32px; }
.scroll-hint .mouse::after {
  width: 3px; height: 6px; margin-left: -1.5px;
  animation: fx-wheel 2.4s ease-in-out infinite;
}
@keyframes fx-wheel {
  0% { opacity: 0.8; top: 6px; }
  70% { opacity: 0; top: 12px; }
  100% { opacity: 0; top: 6px; }
}

/* --- цифра скорости: мягкий переход --- */
.speed-big .number { transition: transform 0.3s var(--fx-ease); }
.speed-big .number.fx-tick { animation: fx-pop 0.6s var(--fx-ease); }
@keyframes fx-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.live-dot { animation: fx-blink 1.6s ease-in-out infinite; }
@keyframes fx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* --- график и статистика --- */
.chart-wrap { transition: transform 0.45s var(--fx-ease), box-shadow 0.45s var(--fx-ease); }
.chart-wrap:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(255,149,0,0.16); }
.stat { transition: transform 0.45s var(--fx-ease), border-color 0.45s ease, box-shadow 0.45s ease; }
.stat:hover { transform: translateY(-5px); border-color: rgba(255,170,30,0.7); box-shadow: 0 14px 30px rgba(255,149,0,0.16); }

/* --- таблица: строки втекают каскадом --- */
table.history tbody tr { animation: fx-row-in 0.55s var(--fx-ease) both; }
@keyframes fx-row-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
table.history tbody tr { transition: background-color 0.35s ease; }

/* --- тарифы: бейдж-пульс --- */
.price-tag { animation: fx-tag-glow 3s ease-in-out infinite; }
@keyframes fx-tag-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(255,149,0,0); }
  50% { box-shadow: 0 0 18px rgba(255,149,0,0.55); }
}
.price { transition: transform 0.4s var(--fx-ease); }
.price-card:hover .price { transform: scale(1.06); }

/* --- модалки: пружинное появление --- */
.modal-overlay { transition: opacity 0.35s ease; }
.modal-overlay .modal-card { transition: transform 0.45s var(--fx-ease), opacity 0.35s ease; }
.modal-overlay.open .modal-card { animation: fx-modal-in 0.5s var(--fx-ease); }
@keyframes fx-modal-in {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- футер --- */
.footer-links a { transition: color 0.35s ease, transform 0.35s var(--fx-ease); display: inline-block; }
.footer-links a:hover { color: #ffcc00; transform: translateY(-2px); }
.mini-btn { transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.35s var(--fx-ease), box-shadow 0.35s ease; }
.mini-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,149,0,0.2); }

/* --- мелочи --- */
::selection { background: rgba(255,149,0,0.4); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #070400; }
::-webkit-scrollbar-thumb { background: rgba(255,149,0,0.35); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,149,0,0.6); }
a:focus-visible, button:focus-visible { outline: 2px solid #ffcc00; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}