/* Слой анимаций. Всё работает только под классом .fx, который ставит fx.js:
   без скрипта и при prefers-reduced-motion страница остаётся обычной и полностью видимой. */

/* --- фон: частицы, свечение, полоска прогресса */
.fx-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-bg canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.fx-aura {
  position: absolute; left: 50%; top: 50%;
  width: 900px; height: 900px; margin: -450px 0 0 -450px;
  border-radius: 50%;
  will-change: transform;
}
.fx-aura.a { background: radial-gradient(circle, rgba(0, 231, 1, 0.10), rgba(0, 231, 1, 0) 62%); }
.fx-aura.b { background: radial-gradient(circle, rgba(42, 171, 238, 0.09), rgba(42, 171, 238, 0) 62%); }
.fx-cursor {
  position: absolute; left: 0; top: 0;
  width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 231, 1, 0.09), rgba(0, 231, 1, 0) 60%);
  opacity: 0; transition: opacity 0.6s ease;
  will-change: transform;
}
.fx-cursor.fx-on { opacity: 1; }
.fx-progress {
  position: fixed; left: 0; top: 0; z-index: 20;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, #00a801, var(--green) 60%, #b6ffb6);
  box-shadow: 0 0 12px rgba(0, 231, 1, 0.7);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* --- шапка: подсветка текущего раздела */
.fx nav a { position: relative; transition: color 0.25s ease; }
.fx nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -8px; height: 2px;
  background: var(--green); border-radius: 2px;
  transform: scaleX(0); transition: transform 0.3s ease;
}
.fx nav a.fx-on { color: var(--white); }
.fx nav a.fx-on::after { transform: scaleX(1); }

/* --- герой: сцена в перспективе */
.fx .hero .pic.fx-stage { perspective: 900px; }
.fx-tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.fx-tilt img { position: relative; animation: fx-float 5.5s ease-in-out infinite alternate; }
.fx-tilt.fx-auto { animation: fx-sway 8s ease-in-out infinite alternate; }
.fx-glow {
  position: absolute; left: -22%; top: -14%; width: 144%; height: 128%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 231, 1, 0.34), rgba(0, 231, 1, 0) 64%);
  transform: translateZ(-70px);
  animation: fx-pulse 4.5s ease-in-out infinite alternate;
  pointer-events: none;
}
/* орбита: неподвижная наклонная плоскость, внутри крутится кольцо с монетой */
.fx-orbit {
  position: absolute; left: 50%; top: 54%;
  transform-style: preserve-3d;
  pointer-events: none;
}
.fx-orbit.o1 { width: 126%; height: 0; padding-bottom: 126%; margin: -63% 0 0 -63%; transform: rotateX(72deg) rotateY(-12deg); }
.fx-orbit.o2 { width: 108%; height: 0; padding-bottom: 108%; margin: -54% 0 0 -54%; transform: rotateX(63deg) rotateY(26deg); }
.fx-orbit.o3 { width: 138%; height: 0; padding-bottom: 138%; margin: -69% 0 0 -69%; transform: rotateX(79deg) rotateY(-34deg); }
.fx-ring {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid rgba(0, 231, 1, 0.7);
  box-shadow: 0 0 14px rgba(0, 231, 1, 0.45), inset 0 0 14px rgba(0, 231, 1, 0.25);
  transform-style: preserve-3d;
  animation: fx-spin 16s linear infinite;
}
.fx-orbit.o2 .fx-ring { border-color: rgba(177, 186, 211, 0.5); box-shadow: none; animation-duration: 23s; animation-direction: reverse; }
.fx-orbit.o3 .fx-ring { border: 2px dashed rgba(0, 231, 1, 0.45); box-shadow: none; animation-duration: 34s; }
/* монета стоит ребром к плоскости орбиты, поэтому при обороте видна то лицом, то ребром */
.fx-coin {
  position: absolute; left: 50%; top: 0;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9ffca, #00e701 46%, #00a001);
  border: 2px solid #b6ffb6;
  box-shadow: inset 0 0 0 4px rgba(5, 8, 10, 0.22), 0 0 18px rgba(0, 231, 1, 0.75);
  transform: rotateX(-90deg);
}
.fx-coin.s { top: auto; bottom: 0; margin: 0 0 -9px -9px; width: 18px; height: 18px; box-shadow: inset 0 0 0 2px rgba(5, 8, 10, 0.22), 0 0 12px rgba(0, 231, 1, 0.7); }
.fx-orbit.o2 .fx-coin { background: radial-gradient(circle at 35% 30%, #ffffff, #b1bad3 50%, #6f7c99); border-color: #e6ebf7; box-shadow: inset 0 0 0 3px rgba(5, 8, 10, 0.2), 0 0 14px rgba(177, 186, 211, 0.6); width: 22px; height: 22px; margin: -11px 0 0 -11px; }
/* вне экрана и при скрытой вкладке сцена стоит */
.fx-stage.fx-off *, .fx-sleep .fx-stage *, .fx-sleep .fx-code-ring div { animation-play-state: paused; }

@keyframes fx-float { from { transform: translate3d(0, 6px, 0); } to { transform: translate3d(0, -10px, 0); } }
@keyframes fx-sway { from { transform: rotateX(4deg) rotateY(-11deg); } to { transform: rotateX(-3deg) rotateY(11deg); } }
@keyframes fx-pulse { from { opacity: 0.55; transform: translateZ(-70px) scale(0.94); } to { opacity: 1; transform: translateZ(-70px) scale(1.06); } }
@keyframes fx-spin { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }

/* --- карточки: наклон за курсором и бегущий блик */
.fx .card { position: relative; }
.fx .card.fx-hot { border-color: #456273; }
.fx .card { transition: border-color 0.3s ease; }
.fx-shine {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;
  border-radius: 14px; overflow: hidden;
  pointer-events: none;
  opacity: 0; transition: opacity 0.35s ease;
}
.fx-hot > .fx-shine { opacity: 1; }
.fx-shine div {
  position: absolute; left: 0; top: 0;
  width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.11), rgba(0, 231, 1, 0.05) 38%, rgba(0, 231, 1, 0) 66%);
  will-change: transform;
}
.table > .fx-shine div { background: radial-gradient(circle, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 62%); }

/* --- появление при прокрутке: скрытое состояние вешает только скрипт */
.fx .fx-rv {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.fx .fx-rv.fx-flip { transform: perspective(900px) rotateX(18deg) translate3d(0, 36px, 0); transform-origin: 50% 100%; }
.fx .fx-rv.fx-side { transform: translate3d(-28px, 0, 0); }
.fx .fx-rv.fx-pop { transform: scale(0.84); }
.fx .fx-rv.fx-row { transform: translate3d(0, 12px, 0); }
.fx .fx-rv.fx-fade { transform: none; }
.fx .fx-rv.fx-in { opacity: 1; transform: none; }

/* --- плашка с кодом: бегущая рамка-градиент */
.fx .code { position: relative; isolation: isolate; }
.fx-code-ring { display: none; }
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .fx-code-ring {
    display: block;
    position: absolute; left: -7px; top: -7px; right: -7px; bottom: -7px; z-index: -1;
    padding: 3px; border-radius: 17px; overflow: hidden;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .fx-code-ring div {
    position: absolute; left: 50%; top: 50%;
    width: 160%; height: 0; padding-bottom: 160%; margin: -80% 0 0 -80%;
    background: conic-gradient(from 0deg, rgba(0, 231, 1, 0.22) 0deg, rgba(0, 231, 1, 0.22) 200deg, #00e701 290deg, #eaffea 345deg, rgba(0, 231, 1, 0.22) 360deg);
    animation: fx-spin 3.6s linear infinite;
  }
}

/* --- телефоны: сцена компактнее, монеты мельче */
@media (max-width: 860px) {
  .fx-coin { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .fx-orbit.o3 { display: none; }
  .fx-aura { width: 620px; height: 620px; margin: -310px 0 0 -310px; }
}

/* --- страховка: при отказе от анимаций ничего не движется и ничего не спрятано */
@media (prefers-reduced-motion: reduce) {
  .fx-bg, .fx-progress, .fx-glow, .fx-orbit, .fx-shine, .fx-code-ring { display: none !important; }
  .fx .fx-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx-tilt, .fx-tilt img { animation: none !important; transform: none !important; }
}

/* полоска прокрутки: где браузер умеет, её двигает сама прокрутка, без скрипта */
@supports (animation-timeline: scroll()) {
  .fx-progress.fx-css { animation: fx-progress linear both; animation-timeline: scroll(root block); }
  @keyframes fx-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (hover: none), (pointer: coarse) {
  .fx-progress:not(.fx-css) { display: none; }
}