/* FEDORISTOV · fx — шар інтерактиву й дизайн-фішок поверх site.css. Зміст сторінки не чіпає. */

/* ---------- інтро: графік виручки малюється, точка з відсотком їде по ньому, потім колони-завіси (раз за сесію) ---------- */
.fx-intro body { overflow: hidden; }
.fx-loader { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.fx-loader__cols { position: absolute; inset: 0; display: flex; }
.fx-loader__cols i { flex: 1; height: 100%; margin-right: -1px; background: #0B0B0C; transform-origin: 50% 0; }
.fx-loader__cols::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000, transparent 75%); transition: opacity 300ms ease; }
.fx-loader__in { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.fx-loader__stage { position: relative; width: min(760px, 86vw); }
.fx-loader__chart { position: relative; height: clamp(150px, 26vw, 250px); }
.fx-loader__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-loader__chart path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fx-loader__glow { stroke: rgba(255, 199, 44, .28); stroke-width: 10; filter: blur(6px); }
.fx-loader__line { stroke: var(--sun); stroke-width: 2.5; }
.fx-loader__area { fill: url(#fx-ld-fill) !important; stroke: none !important; }
.fx-loader__dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 6px rgba(255, 199, 44, .18), 0 0 26px var(--sun); transform: translate(var(--x, 0px), var(--y, 0px)); }
.fx-loader__pct { position: absolute; left: 0; top: 0; padding: 6px 11px; border-radius: 100px; background: var(--sun); color: var(--ink); font: 600 14px var(--mono); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; transform: translate(calc(var(--x, 0px) - 100% - 12px), calc(var(--y, 0px) - 120%)); }
.fx-loader__pct::after { content: ""; position: absolute; right: -4px; bottom: -3px; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.fx-loader__logo { display: flex; align-items: center; justify-content: center; gap: 14px; margin: clamp(26px, 4vw, 42px) 0 0; font-weight: 600; font-size: clamp(30px, 5vw, 58px); letter-spacing: -.055em; color: var(--text); }
.fx-loader__logo i { width: .44em; height: .44em; border-radius: .13em; background: var(--sun); box-shadow: 0 0 40px rgba(255, 199, 44, .5); transform: scale(0) rotate(-90deg); animation: fx-logo-i 700ms var(--rv-e) 80ms forwards; }
.fx-loader__logo span { display: inline-block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.fx-loader__logo span b { display: inline-block; font-weight: inherit; transform: translateY(110%); animation: fx-up 800ms var(--rv-e) forwards; animation-delay: calc(160ms + var(--i) * 28ms); }
.fx-loader__cap { margin: 12px 0 0; text-align: center; font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); opacity: 0; animation: fade 600ms ease 450ms forwards; }
.fx-loader.is-out .fx-loader__in { opacity: 0; transform: translateY(-50px) scale(.98); transition: opacity 420ms ease, transform 800ms var(--rv-e); }
.fx-loader.is-out .fx-loader__cols::before { opacity: 0; }
.fx-loader.is-out .fx-loader__cols i { animation: fx-curtain 820ms cubic-bezier(.76, 0, .24, 1) forwards; animation-delay: calc(140ms + var(--i) * 55ms); }
@keyframes fx-curtain { to { transform: scaleY(0); } }
@keyframes fx-up { to { transform: none; } }
@keyframes fx-logo-i { to { transform: none; } }

/* ---------- прогрес скролу ---------- */
.fx-progress { position: fixed; z-index: 120; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; }
.fx-progress i { position: absolute; inset: 0; background: linear-gradient(90deg, #F2B705, var(--sun)); box-shadow: 0 0 12px rgba(255, 199, 44, .7); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- курсор: крапка + кільце ---------- */
.fx-cur { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-fx-cur .fx-cur { display: block; position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; }
  .fx-cur__dot, .fx-cur__ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
  .fx-cur__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--sun); transform: translate3d(var(--dx, -100px), var(--dy, -100px), 0); transition: opacity 200ms ease, width 250ms var(--ease), height 250ms var(--ease), margin 250ms var(--ease); }
  .fx-cur__ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; box-shadow: inset 0 0 0 1px rgba(255, 199, 44, .55); transform: translate3d(var(--rx, -100px), var(--ry, -100px), 0) scale(var(--rs, 1)); transition: opacity 250ms ease, box-shadow 250ms ease, background-color 250ms ease; }
  .fx-cur.is-link .fx-cur__ring { --rs: 1.7; background: rgba(255, 199, 44, .08); box-shadow: inset 0 0 0 1px rgba(255, 199, 44, .9); }
  .fx-cur.is-link .fx-cur__dot { opacity: 0; }
  .fx-cur.is-text .fx-cur__ring { opacity: 0; }
  .fx-cur.is-text .fx-cur__dot { width: 2px; height: 22px; margin: -11px 0 0 -1px; border-radius: 2px; }
  .fx-cur.is-down .fx-cur__ring { --rs: .8; }
  .fx-cur.is-hidden, .fx-cur.is-bubble { opacity: 0; }
  .fx-cur { transition: opacity 250ms ease; }
}

/* ---------- кнопки: текст «перекочується» (копія — це text-shadow, тож переклад мови нічого не ламає) ---------- */
.fx-roll { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; line-height: 1.3; }
.fx-roll > * { display: inline-block; text-shadow: 0 1.3em 0 currentColor; transition: transform 560ms cubic-bezier(.65, 0, .2, 1); }
@media (hover: hover) and (pointer: fine) {
  :is(.btn, .pill, .svc__go, .hero__proof, .lang button):hover .fx-roll > * { transform: translateY(-1.3em); }
}
.btn--sun, .pill { position: relative; overflow: hidden; isolation: isolate; }
.btn--sun::before, .pill::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, .55), transparent 70%); opacity: 0; transition: opacity 300ms ease; }
@media (hover: hover) and (pointer: fine) { .btn--sun:hover::before, .pill:hover::before { opacity: 1; } }

/* ---------- кінетична стрічка напрямів: два різні ряди, тихі, напрямок слідує за скролом ---------- */
.fx-band { position: relative; z-index: 1; overflow: hidden; padding: clamp(24px, 3vw, 44px) 0 0; margin-bottom: calc(var(--sec) * -.45); opacity: .85; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fx-band__row { display: flex; transform: skewX(var(--sk, 0deg)); will-change: transform; }
.fx-band__row + .fx-band__row { margin-top: .5em; }
.fx-band__track { display: flex; flex: none; align-items: center; gap: .5em; padding-right: .5em; font-weight: 500; font-size: clamp(30px, 4.4vw, 68px); line-height: 1.05; letter-spacing: -.05em; white-space: nowrap; transform: translate3d(var(--tx, 0px), 0, 0); will-change: transform; }
.fx-band__track span { color: transparent; -webkit-text-stroke: 1px rgba(242, 242, 239, .16); transition: color 500ms ease, -webkit-text-stroke-color 500ms ease; }
.fx-band__track span:nth-of-type(3n+1) { color: rgba(242, 242, 239, .22); -webkit-text-stroke-color: transparent; }
.fx-band__track i { flex: none; width: .2em; height: .2em; border-radius: .05em; background: rgba(255, 199, 44, .55); transform: rotate(45deg); }
.fx-band__row--sun .fx-band__track { font-size: clamp(18px, 2.2vw, 30px); font-family: var(--mono); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; gap: 1.2em; padding-right: 1.2em; }
.fx-band__row--sun .fx-band__track span { color: rgba(255, 199, 44, .5); -webkit-text-stroke: 0; }
.fx-band__row--sun .fx-band__track i { width: .35em; height: .35em; border-radius: 50%; background: rgba(255, 199, 44, .35); transform: none; }
@media (hover: hover) and (pointer: fine) { .fx-band__track span:hover { color: var(--sun); -webkit-text-stroke-color: transparent; transition-duration: 120ms; } }

/* ---------- hero: прожектор, що підсвічує сітку під курсором ---------- */
.fx-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 600ms ease;
  background-image: linear-gradient(rgba(255, 199, 44, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 199, 44, .2) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), #000, transparent 70%);
  mask-image: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), #000, transparent 70%); }
.hero.is-spot .fx-spot { opacity: 1; }

/* ---------- 3D-нахил головних кейсів ---------- */
.fc { transform-style: preserve-3d; }
.fc.is-tilt { transition: transform 140ms linear, box-shadow 400ms ease, background-color 300ms ease !important; }
.fc::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .09), transparent 42%); opacity: 0; transition: opacity 400ms ease; }
.fc.is-tilt::after { opacity: 1; }

/* ---------- моно-підписи «розшифровуються» ---------- */
.fx-scr { font-variant-numeric: tabular-nums; }

/* ---------- футер: літери тягнуться до курсора ---------- */
.foot__word { position: relative; display: flex; justify-content: center; }
.foot__word .fl { display: inline-block; transform: translate3d(0, var(--ly, 0px), 0); color: var(--s2); transition: color 500ms ease; will-change: transform; }
.foot__word .fl.is-hot { color: var(--sun); transition-duration: 150ms; }
.js .foot__word:not(.is-in) .fl { opacity: 0; }
.js .foot__word.is-in .fl { animation: fx-foot 1300ms var(--rv-e) backwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes fx-foot { from { transform: translate3d(0, 70%, 0); opacity: 0; } }
.foot__clock { display: inline-flex; align-items: center; gap: 8px; }
.foot__clock i { width: 7px; height: 7px; border-radius: 50%; background: #2ECC71; box-shadow: 0 0 10px rgba(46, 204, 113, .7); animation: blink 2s ease-in-out infinite; }
.foot__clock b { font: 500 13.5px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.foot__clock b .col { animation: blink 1s steps(1) infinite; }

/* ---------- заголовки секцій: жовта мітка, що «малюється» ---------- */
main h2.h-l { position: relative; }

/* ---------- кліки: хвиля від пальця/курсора на картках ---------- */

@media (max-width: 900px) {
  .fx-band { margin-bottom: calc(var(--sec) * -.5); }
  .fx-band__track { font-size: clamp(28px, 9vw, 44px); }
  .fx-band__row--sun .fx-band__track { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-loader { display: none; }
  .fx-band__track { transform: none !important; }
  .js .foot__word .fl { --ly: 0px; animation: none !important; }
}

/* штамп «прийнято» стартує збільшеним — не даємо йому розсунути сторінку на телефоні */
.audit { overflow-x: clip; }