/* ===========================================================
   AIEco — моушн-слой
   Всё, что двигается: прелоадер, реалы, курсор, магнетизм,
   параллакс, переходы. Полностью выключается по
   prefers-reduced-motion.
   =========================================================== */

/* -----------------------------------------------------------
   1. Прелоадер
   ----------------------------------------------------------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  transition: opacity .7s var(--ease-out), visibility .7s;
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: preIn .8s var(--ease-out) both;
}
.preloader__mark .brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
.preloader__mark .brand-name { font-size: 20px; }

.preloader__rail {
  width: min(220px, 54vw);
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.preloader__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--acc), var(--acc-pale));
  border-radius: 2px;
  transition: width .35s var(--ease-out);
}
.preloader__pct {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-35);
  font-variant-numeric: tabular-nums;
}

@keyframes preIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------
   2. Индикатор прокрутки
   ----------------------------------------------------------- */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 80;
  background: transparent;
  pointer-events: none;
}
.progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--acc), var(--acc-pale), var(--gold));
  box-shadow: 0 0 14px rgba(63, 207, 151, .6);
  transform-origin: left;
}

/* -----------------------------------------------------------
   3. Курсор
   ----------------------------------------------------------- */

.cursor,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 190;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s ease;
  will-change: transform;
}
.cursor {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(63, 207, 151, .55);
  transition: opacity .3s ease, width .35s var(--ease-out), height .35s var(--ease-out),
              margin .35s var(--ease-out), background .35s ease, border-color .35s ease;
}
.cursor-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--acc);
}
.cursor.is-on, .cursor-dot.is-on { opacity: 1; }
.cursor.is-hot {
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  background: rgba(63, 207, 151, .12);
  border-color: rgba(63, 207, 151, .8);
}
.cursor.is-down { width: 24px; height: 24px; margin: -12px 0 0 -12px; }

@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none; }
}

/* -----------------------------------------------------------
   4. Реалы по скроллу
   ----------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="blur"]  { filter: blur(10px); transform: translateY(20px); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* маска-раскрытие заголовков */
.mask-line { display: block; overflow: hidden; padding-bottom: .06em; }
.mask-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-out);
  will-change: transform;
}
.mask-line.is-in > span { transform: none; }

/* пословный реал (страницы кейсов) */
[data-word] {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-word].is-in { opacity: 1; transform: none; }

/* побуквенная подсветка абзаца по скроллу */
[data-chars] span { transition: opacity .3s linear, color .3s linear; }

/* -----------------------------------------------------------
   5. Магнитные элементы и лёгкий tilt
   ----------------------------------------------------------- */

[data-magnetic] { will-change: transform; }

[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

/* блик, следующий за курсором */
[data-spot] { position: relative; overflow: hidden; }
[data-spot]::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(63, 207, 151, .16),
    transparent 62%
  );
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
[data-spot]:hover::before { opacity: 1; }

/* -----------------------------------------------------------
   6. Hero — вход
   ----------------------------------------------------------- */

.hero__badge,
.hero__sub,
.hero__actions,
.stat-strip {
  opacity: 0;
  transform: translateY(26px);
}
.is-ready .hero__badge  { animation: rise .9s var(--ease-out) .10s both; }
.is-ready .hero__sub    { animation: rise .9s var(--ease-out) .55s both; }
.is-ready .hero__actions{ animation: rise .9s var(--ease-out) .70s both; }
.is-ready .stat-strip   { animation: rise .9s var(--ease-out) .85s both; }
.is-ready .hero__title .mask-line > span { transform: none; }
.hero__title .mask-line > span { transition-delay: calc(var(--i, 0) * .12s + .18s); }

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* переливающийся градиент в заголовке */
.grad-text {
  animation: gradshift 9s ease-in-out infinite;
}
@keyframes gradshift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* -----------------------------------------------------------
   7. Экосистема — смена ядра
   ----------------------------------------------------------- */

.core__main > *,
.core__metric > * { transition: opacity .35s ease, transform .45s var(--ease-out); }

.core.is-swapping .core__main > *,
.core.is-swapping .core__metric > * {
  opacity: 0;
  transform: translateY(10px);
}

.core__metric { transition: box-shadow .5s var(--ease-out); }
.core.is-swapping .core__metric { box-shadow: 0 0 0 6px rgba(63, 207, 151, .1); }

/* тонкие «провода» от карточек к ядру */
.eco-wires {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.eco-wires path {
  fill: none;
  stroke: rgba(63, 207, 151, .25);
  stroke-width: 1;
  stroke-dasharray: 4 7;
  animation: wireflow 22s linear infinite;
}
@keyframes wireflow { to { stroke-dashoffset: -220; } }

/* -----------------------------------------------------------
   8. Кейсы — переключение вкладок
   ----------------------------------------------------------- */

.tabs__pill {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  background: var(--acc);
  transition: transform .55s var(--ease-out), width .55s var(--ease-out), height .55s var(--ease-out), opacity .3s ease;
  pointer-events: none;
  opacity: 0;
}
.tabs.is-ready .tabs__pill { opacity: 1; }
.tabs.is-ready .tab.is-on { background: transparent; border-color: transparent; }

.case-panel { display: none; }
.case-panel.is-active { display: block; animation: caseIn .7s var(--ease-out) both; }

@keyframes caseIn {
  from { opacity: 0; transform: translateY(22px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

.ring__arc {
  transition: stroke-dashoffset .1s linear;
}

.bar__fill { transition: width .1s linear; }

/* -----------------------------------------------------------
   9. Кнопки — заливка при наведении
   ----------------------------------------------------------- */

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 140% at 50% 120%, rgba(255, 255, 255, .32), transparent 60%);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.btn:hover::after { opacity: 1; }

/* рябь по клику */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform: scale(0);
  animation: ripple .65s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* -----------------------------------------------------------
   10. Карточки — подъём
   ----------------------------------------------------------- */

.mod:hover,
.step:hover,
.trust:hover,
.prob-card:hover { transform: translateY(-4px); }

.prob-card {
  transition: transform .5s var(--ease-out), border-color .4s ease, box-shadow .5s var(--ease-out);
}
.prob-card:hover { box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.step:hover { box-shadow: 0 26px 60px rgba(0, 0, 0, .45); }
.flow__card:hover { transform: translateY(-5px); box-shadow: 0 26px 60px rgba(0, 0, 0, .5); }

/* -----------------------------------------------------------
   11. Форма — успех
   ----------------------------------------------------------- */

.form-body { transition: opacity .4s ease, transform .5s var(--ease-out); }
.form-body.is-out { opacity: 0; transform: translateY(-12px); pointer-events: none; }

.form-done { animation: rise .7s var(--ease-out) both; }
.form-done .check { animation: popIn .6s var(--ease-out) both; }
.form-done .check path { animation: draw .55s var(--ease-out) .35s forwards; }

@keyframes popIn {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* -----------------------------------------------------------
   12. Прочее
   ----------------------------------------------------------- */

/* число «перекатывается» при смене */
.roll { display: inline-block; transition: transform .3s var(--ease-out), opacity .3s ease; }
.roll.is-bump { animation: bump .4s var(--ease-out); }
@keyframes bump {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* наклон бегущей строки от скорости прокрутки */
.marquee__track { will-change: transform; }

/* мягкое появление секций-фонов */
.sec { will-change: auto; }

/* -----------------------------------------------------------
   13. Уважение к настройкам доступности
   ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-word] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .mask-line > span { transform: none !important; }
  .hero__badge, .hero__sub, .hero__actions, .stat-strip { opacity: 1 !important; transform: none !important; }
  .cursor, .cursor-dot { display: none !important; }
  .preloader { display: none !important; }
  [data-chars] span { opacity: 1 !important; }
}