/* Lanorix Cloud: анимации, привязанные к прокрутке. Работает вместе с scroll.js (+ motion.*, bg.*).
   Подключение: <link rel="stylesheet" href="/scroll.css"> + <script src="/scroll.js" defer></script>.
   Совместимость с motion.css: здесь не трогаются opacity и transform у карточек/кнопок/шапки —
   используются независимые свойства translate / rotate / scale, filter, clip-path и переменные.
   Палитра и тексты site.css не меняются. Без JS страница выглядит как раньше. */

@property --sc-tint { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --sc-sx   { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sc-sy   { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sc-bp   { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --mx      { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }
@property --my      { syntax: '<length-percentage>'; inherits: false; initial-value: 50%; }

:root {
  --sc-ease: cubic-bezier(.16, 1, .3, 1);
  --sc-hi: #8dbaff;
  --sc-hi: color-mix(in srgb, var(--accent, #2f81f7) 52%, #fff);
}
/* страховка от горизонтального скролла (clip не создаёт контейнер прокрутки, sticky не ломается) */
html, body { overflow-x: clip; }

/* ---------- 1. Индикатор прогресса ---------- */
.sc-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; pointer-events: none; }
.sc-progress i {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); will-change: transform;
  background: linear-gradient(90deg, var(--accent-strong, #1f6feb), var(--accent, #2f81f7) 55%, var(--sc-hi));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent, #2f81f7) 70%, transparent);
}

/* ---------- 9. Шапка: blur + тень при скролле, прячется вниз / появляется вверх ---------- */
.topbar {
  transition:
    translate .5s var(--sc-ease),
    background-color .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}
.topbar.sc-scrolled {
  background-color: rgba(15, 20, 25, .74);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7);
  border-bottom-color: color-mix(in srgb, var(--accent, #2f81f7) 22%, var(--line, #2a3441));
}
.topbar.sc-hide:not(:focus-within) { translate: 0 -101%; }
.topbar .brand {
  transform-origin: 0 50%;
  transition: transform var(--mo-dur, 260ms) var(--mo-ease-out, ease), scale .45s var(--sc-ease);
}
.topbar .nav { transform-origin: 100% 50%; transition: scale .45s var(--sc-ease); }
.topbar.sc-scrolled .brand { scale: .92; }
.topbar.sc-scrolled .nav { scale: .96; }

/* ---------- 3. Hero h1: маска + посимвольное появление, «дыхание» градиента ---------- */
.sc-split .sc-w {
  display: inline-block; position: relative; overflow: hidden; vertical-align: top; white-space: nowrap;
  padding: .12em .03em .22em; margin: -.12em -.03em -.22em;
}
.sc-split .sc-c {
  display: inline-block; will-change: transform;
  transform: translate3d(0, 115%, 0) rotate(7deg); transform-origin: 0 100%;
  transition: transform 1.05s var(--sc-ease) calc(var(--i, 0) * 24ms + 140ms);
}
.sc-split.sc-go .sc-c { transform: none; }
.sc-split.sc-done .sc-c { will-change: auto; transition: none; }

.sc-split .sc-em .sc-c { color: var(--accent, #2f81f7); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sc-split .sc-em .sc-c {
    background-image: linear-gradient(90deg, var(--accent, #2f81f7) 0%, var(--sc-hi) 50%, var(--accent, #2f81f7) 100%);
    background-repeat: repeat-x;
    background-size: calc(var(--ww, 160px) * 2) 100%;
    background-position: calc(var(--cx, 0px) * -1 + var(--sc-bp)) 0;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: sc-breathe 5.5s ease-in-out 1.8s infinite alternate;
  }
}
@keyframes sc-breathe { from { --sc-bp: 0px; } to { --sc-bp: var(--ww, 160px); } }
.sc-hero-off .sc-split .sc-em .sc-c { animation-play-state: paused; }

/* ---------- 4. Заголовки секций: wipe (clip-path из JS) + линия-подчёркивание ---------- */
.section > h2 { position: relative; }
.section > h2::after {
  content: ""; position: absolute; left: 0; bottom: -7px; height: 2px; width: min(100%, 96px); border-radius: 2px;
  background: linear-gradient(90deg, var(--accent, #2f81f7), transparent);
  transform-origin: 0 50%; transform: scaleX(var(--sc-u, 1)); pointer-events: none;
}

/* ---------- 5. Живые слои (will-change только пока элемент на экране) ---------- */
.sc-live { will-change: translate, scale; }
.section.sc-live { will-change: auto; }

/* ---------- 6. Шаги: коннектор и подсветка номеров ---------- */
.steps { position: relative; }
.steps li { z-index: 1; }
.steps::before, .steps::after {
  content: ""; position: absolute; left: 14px; top: 15px; width: 2px; height: var(--sc-track, 0px); border-radius: 2px; pointer-events: none;
}
.steps::before { background: var(--line, #2a3441); }
.steps::after {
  z-index: 0; transform-origin: 50% 0; transform: scaleY(var(--sc-fill, 0));
  background: linear-gradient(var(--accent, #2f81f7), var(--accent-strong, #1f6feb));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #2f81f7) 45%, transparent);
}
.steps li::before {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, scale .45s var(--sc-ease);
}
.steps li.sc-on::before {
  background: var(--accent-strong, #1f6feb); color: #fff; border-color: var(--accent, #2f81f7); scale: 1.07;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent, #2f81f7) 18%, transparent), 0 0 18px color-mix(in srgb, var(--accent, #2f81f7) 45%, transparent);
}

/* ---------- 7. Tilt + блик-спотлайт (включается классом sc-tilt: hover + точная мышь + ширина >= 700) ---------- */
.sc-tilt .grid { perspective: 1100px; }
.sc-tilt .panel.feature::before, .sc-tilt .panel.plan::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent, #2f81f7) 20%, transparent), transparent 65%);
  transition: opacity .4s ease;
}
.sc-tilt .panel.feature.sc-hot::before, .sc-tilt .panel.plan.sc-hot::before { opacity: 1; }
.sc-tilt .panel.feature > :not(.amb-ico):not(.amb-edge), .sc-tilt .panel.plan > :not(.amb-ico):not(.amb-edge) { position: relative; z-index: 1; }

/* ---------- 10. Мягкий акцентный оттенок секций по прогрессу ---------- */
.section { position: relative; isolation: isolate; }
.section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: var(--r-lg, 14px);
  opacity: var(--sc-tint);
  translate: var(--sc-sx) var(--sc-sy);
  background:
    radial-gradient(60% 75% at 50% 0%, color-mix(in srgb, var(--accent, #2f81f7) 10%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent-strong, #1f6feb) 4%, transparent), transparent 60%);
}
.section.sc-live::before { will-change: opacity, translate; }

/* ---------- reduced motion: всё статично и видимо ---------- */
@media (prefers-reduced-motion: reduce) {
  .topbar, .topbar .brand, .topbar .nav, .steps li::before { transition: none; }
  .topbar.sc-hide { translate: none; }
  .sc-split .sc-c { transform: none; transition: none; animation: none; }
  .section::before { display: none; }
}