/* OnePROM — FLY v2: непрерывный пролёт камеры по скроллу (кадры в canvas). Всё под .fx */
.fx {
  --hx-gold: var(--gold, #C9A24E);
  --hx-gold-hi: var(--gold-hi, #E7CE86);
  --hx-text: #f4f1ea;
  --hx-dim: #b3b0a8;
  --hx-line: rgba(244, 241, 234, .16);
  --hx-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative; z-index: 1;
  height: var(--fx-len, 1200vh);
  background: #000; color: var(--hx-text);
}
.fx *, .fx *::before, .fx *::after { box-sizing: border-box; }
.fx-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.fx-canvas, .fx-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-poster { object-fit: cover; transition: opacity .6s ease; }
.fx.is-live .fx-poster { opacity: 0; }

/* затемнение: сверху стык с героем, снизу/слева — зона под текст */
.fx-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 14%),
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,0) 55%),
    linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%);
}

/* подписи остановок */
.fx-wrap { position: absolute; inset: 0; max-width: 1200px; margin: 0 auto; padding: 0 24px; pointer-events: none; }
.fx-stop {
  position: absolute; left: 24px; bottom: clamp(48px, 11vh, 120px); width: min(560px, 46vw);
  opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity .45s ease, transform .7s var(--hx-ease), visibility 0s linear .45s;
}
.fx-stop.is-on {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .55s ease, transform .8s var(--hx-ease), visibility 0s;
}
.fx-eye {
  margin: 0 0 18px; display: flex; align-items: center; gap: 12px;
  font: 500 13px/1 Manrope, system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--hx-dim);
}
.fx-eye span { color: var(--hx-gold); letter-spacing: .08em; }
.fx-h {
  margin: 0; max-width: 13em;
  font: 600 clamp(32px, 3.6vw, 60px)/1 Oswald, "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.fx-p { margin: 18px 0 0; max-width: 30em; font: 400 clamp(15px, 1.1vw, 17px)/1.6 Manrope, system-ui, sans-serif; color: var(--hx-dim); }
.fx-nums { display: flex; gap: clamp(28px, 4vw, 64px); flex-wrap: wrap; }
.fx-big { margin: 0; font: 600 clamp(64px, 7.5vw, 124px)/.9 Oswald, "Arial Narrow", Impact, sans-serif; color: #fff; }
.fx-big small { display: block; margin-top: 10px; font: 500 12px/1.3 Manrope, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--hx-dim); }
.fx-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* прогресс и загрузка */
.fx-rail { position: absolute; z-index: 3; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fx-count { font: 500 12px/1 Manrope, system-ui, sans-serif; letter-spacing: .12em; color: var(--hx-dim); writing-mode: vertical-rl; }
.fx-count b { color: #fff; font-weight: 600; }
.fx-bar { display: block; width: 1px; height: 140px; background: var(--hx-line); position: relative; }
.fx-bar em { position: absolute; inset: 0; background: var(--hx-gold); transform-origin: top; transform: scaleY(0); }
.fx-load { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.fx-load i { display: block; height: 100%; width: 0; background: var(--hx-gold); opacity: .7; transition: width .3s ease, opacity .6s ease; }
.fx-load.is-done i { opacity: 0; }

@media (max-width: 899px) {
  .fx-wrap { padding: 0 20px; }
  .fx-stop { left: 20px; right: 20px; width: auto; bottom: 40px; }
  .fx-h { font-size: clamp(28px, 8vw, 44px); }
  .fx-big { font-size: clamp(52px, 15vw, 84px); }
  .fx-p { font-size: 14px; margin-top: 12px; }
  .fx-rail { top: 18vh; right: 14px; transform: none; }
  .fx-bar { height: 80px; }
  .fx .hx-btn { flex: 1 1 auto; justify-content: center; height: 48px; padding: 0 16px; }
  .fx-shade {
    background:
      linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 12%),
      linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 38%, rgba(0,0,0,0) 62%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx *, .fx *::before, .fx *::after { transition: none !important; }
}