/* Эффекты сайта: появление, свет за курсором, подсветка карточек, параллакс, бегущая строка.
   Работают только когда в <html> есть класс fx-on (его ставит скрипт в <head>, если в системе не выбрано «уменьшить анимацию»). */

/* ───── индикатор прокрутки ───── */
.fx-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 120; pointer-events: none; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--gold), var(--gold-2), var(--teal)); box-shadow: 0 0 14px rgba(232, 178, 58, .6); }

/* ───── свет за курсором ───── */
.fx-cursor { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 45; opacity: 0; transition: opacity .5s; will-change: transform;
  background: radial-gradient(circle, rgba(232, 178, 58, .12), rgba(66, 214, 204, .05) 45%, transparent 70%); mix-blend-mode: screen; }
.fx-cursor.on { opacity: 1; }

/* ───── вход первого экрана ───── */
.fx-on .hero-copy > * { opacity: 0; animation: fxUp .9s cubic-bezier(.2, .75, .2, 1) forwards; }
.fx-on .hero-copy > :nth-child(1) { animation-delay: .05s; }
.fx-on .hero-copy > :nth-child(2) { animation-delay: .18s; animation-name: fxTitle; animation-duration: 1.1s; }
.fx-on .hero-copy > :nth-child(3) { animation-delay: .38s; }
.fx-on .hero-copy > :nth-child(4) { animation-delay: .5s; }
.fx-on .hero-copy > :nth-child(n+5) { animation-delay: .62s; }
.fx-on .hero-shot { opacity: 0; animation: fxShot 1.3s cubic-bezier(.2, .75, .2, 1) .25s forwards; }
@keyframes fxUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fxTitle { from { opacity: 0; transform: translateY(34px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fxShot { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }

/* ───── плавающие пятна света на первом экране ───── */
.fx-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .5; will-change: transform; }
.fx-orb.a { width: 380px; height: 380px; left: 4%; top: 18%; background: rgba(232, 178, 58, .3); animation: orbA 14s ease-in-out infinite alternate; }
.fx-orb.b { width: 460px; height: 460px; right: 2%; top: 4%; background: rgba(66, 214, 204, .22); animation: orbB 17s ease-in-out infinite alternate; }
@keyframes orbA { to { transform: translate(90px, 50px) scale(1.15); } }
@keyframes orbB { to { transform: translate(-70px, 80px) scale(.9); } }

/* ───── картинка первого экрана: наклон за мышью ───── */
.fx-on .hero-shot .frame { transform: perspective(1600px) rotateY(var(--ry, -6deg)) rotateX(var(--rx, 3deg)) translateY(var(--py, 0px)); transition: transform .18s ease-out, box-shadow .3s; }
.fx-on .hero-shot .frame:hover { transform: perspective(1600px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translateY(var(--py, 0px)); }

/* ───── карточки: подсветка там, где курсор ───── */
.fx-on .card { position: relative; transition: transform .35s cubic-bezier(.2, .75, .2, 1), border-color .3s, opacity .6s ease, box-shadow .35s; }
.fx-on .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 178, 58, .14), transparent 62%); }
.fx-on .card:hover::before { opacity: 1; }
.fx-on .feat:hover, .fx-on .step:hover { transform: translateY(-5px); border-color: rgba(232, 178, 58, .4); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.fx-on .feat-shot img { transform: scale(1.1); transition: transform 1.3s cubic-bezier(.2, .75, .2, 1); }
.fx-on .feat.in .feat-shot img { transform: scale(1); }
.fx-on .feat:hover .feat-shot img { transform: scale(1.05); }

/* ───── порядок появления: блоки в сетке выезжают по очереди ───── */
.fx-on .reveal { transition-delay: var(--d, 0s); transform: translateY(32px); transition-duration: .8s; }
.fx-on .reveal.in { transform: none; }
.fx-on .sec-head h2 { background: linear-gradient(90deg, var(--text) 40%, var(--soft)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ───── кнопки ───── */
.fx-on .btn { will-change: transform; }
.fx-on .btn-gold { position: relative; overflow: hidden; }
.fx-on .btn-gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); }
.fx-on .btn-gold:hover::after { transform: translateX(120%); transition: transform .8s ease; }

/* ───── шапка прячется при прокрутке вниз ───── */
.fx-on .top, .fx-on .h-top { transition: transform .4s cubic-bezier(.2, .75, .2, 1), background .3s; }
.fx-on .top.fx-hide { transform: translateY(-100%); }

/* ───── бегущая строка (ускоряется от прокрутки) ───── */
.marquee { overflow: hidden; border-block: 1px solid var(--border); background: var(--bg-alt); padding: 22px 0; user-select: none; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-item { display: inline-flex; align-items: center; gap: 36px; padding-right: 36px; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3.2vw, 42px); letter-spacing: -.02em; white-space: nowrap; color: var(--gold); }
.marquee-item::after { content: '✦'; font-size: .5em; color: var(--teal); -webkit-text-stroke: 0; }

/* ───── картинка «Скриншоты» увеличивается при подходе ───── */
.fx-on .show-img { will-change: transform; }

@media (hover: none) { .fx-cursor { display: none; } }
@media (max-width: 760px) { .fx-orb { opacity: .3; } .fx-on .reveal { transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) { .fx-orb, .fx-progress, .fx-cursor { display: none; } .marquee-track { transform: none !important; } }