/* ============================================================================
   motion.css — слой «вау»-моушна поверх базового scroll-reveal.
   Подключается ПОСЛЕ style.min.css. Ничего из базы не ломает: переопределяет
   только узлы, помеченные классами mo-* (их вешает motion.js), и добавляет
   новые декоративные элементы (прогресс-бар, коннектор шагов, ambient-фон).
   Всё на transform/opacity/filter — GPU-friendly. Полный откат при
   prefers-reduced-motion и на узких экранах (как и базовый reveal).
   ============================================================================ */

/* --- 1. Полоса прогресса чтения (верх страницы) ------------------------- */
.mo-progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--cta),var(--gold));
  z-index:9999; pointer-events:none;
  box-shadow:0 1px 6px rgba(18,163,120,.45);
  will-change:transform;
}

/* --- 2. Разнонаправленные reveal-варианты (едут на базовом .is-in) ------- */
/* Специфичность .js-reveal [data-reveal].mo-* выше базовой — корректно перебивает */
.js-reveal [data-reveal].mo-left   { transform:translateX(-46px) }
.js-reveal [data-reveal].mo-right  { transform:translateX(46px)  }
.js-reveal [data-reveal].mo-scale  { transform:scale(.9)         }
.js-reveal [data-reveal].mo-blur   { transform:translateY(20px); filter:blur(14px) }
.js-reveal [data-reveal].mo-rise   { transform:translateY(64px)  }
.js-reveal [data-reveal].mo-clip   { clip-path:inset(0 0 100% 0); transform:none }

.js-reveal [data-reveal].mo-left.is-in,
.js-reveal [data-reveal].mo-right.is-in,
.js-reveal [data-reveal].mo-scale.is-in,
.js-reveal [data-reveal].mo-rise.is-in   { transform:none }
.js-reveal [data-reveal].mo-blur.is-in   { transform:none; filter:blur(0) }
.js-reveal [data-reveal].mo-clip.is-in   { clip-path:inset(0 0 0 0) }

/* более «дорогая» кривая и чуть длиннее тайминг для вариативных узлов */
.js-reveal [data-reveal][class*="mo-"]{
  transition:opacity .85s cubic-bezier(.16,1,.3,1),
             transform .85s cubic-bezier(.16,1,.3,1),
             filter .85s ease,
             clip-path .9s cubic-bezier(.22,.61,.36,1);
}

/* --- 3. Коннектор-линия под блоком «6 шагов» (рисуется по скроллу) ------ */
.mo-steps-wrap{ position:relative }
.mo-steps-line{
  position:absolute; left:0; right:0; top:var(--mo-line-top,34px); height:2px;
  background:var(--line); overflow:hidden; border-radius:2px;
  pointer-events:none; z-index:0;
}
.mo-steps-line::before{
  content:""; position:absolute; inset:0; transform-origin:0 50%;
  transform:scaleX(var(--mo-steps-p,0));
  background:linear-gradient(90deg,var(--accent),var(--gold));
  transition:transform .15s linear;
}
.mo-steps-wrap .steps{ position:relative; z-index:1 }
@media (max-width:860px){ .mo-steps-line{ display:none } }

/* --- 4. Скраб-проявление текста по словам (лид «Холдинг…») -------------- */
.mo-words .mo-w{
  color:transparent; background:linear-gradient(90deg,var(--ink),var(--ink)) no-repeat;
  -webkit-background-clip:text; background-clip:text;
  opacity:1; transition:opacity .12s linear;
}
.mo-words .mo-w.on{ opacity:1 }

/* --- 5. Ambient mesh-градиент (без частиц): тёмный CTA + полоса цифр ----- */
.mo-mesh{ position:relative; overflow:hidden; isolation:isolate }
.mo-mesh::before{
  content:""; position:absolute; inset:-30%;
  background:
    radial-gradient(38% 50% at 18% 28%, rgba(18,163,120,.30), transparent 70%),
    radial-gradient(34% 46% at 82% 22%, rgba(184,144,85,.24), transparent 70%),
    radial-gradient(46% 60% at 62% 88%, rgba(31,168,92,.22), transparent 72%);
  filter:blur(8px); z-index:-1;
  animation:mo-mesh-drift 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes mo-mesh-drift{
  0%  { transform:translate3d(-3%,-2%,0) rotate(0deg)   scale(1.05) }
  50% { transform:translate3d(2%,3%,0)   rotate(4deg)   scale(1.12) }
  100%{ transform:translate3d(4%,-3%,0)  rotate(-3deg)  scale(1.08) }
}

/* --- 6. Hover-физика карточек (подъём + блик-сечение) ------------------- */
.price-tier,.blog-card,.referral-card,.lm-card,.team-card{
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.price-tier:hover,.blog-card:hover,.referral-card:hover,.lm-card:hover,.team-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px -22px rgba(20,35,62,.34);
  border-color:var(--accent);
}
/* косой блик-«сечение» по премиальной карточке цены */
.price-tier{ position:relative; overflow:hidden }
.price-tier::after{
  content:""; position:absolute; top:0; left:-70%; width:55%; height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg); opacity:0; pointer-events:none;
}
.price-tier:hover::after{ animation:mo-sheen 1s ease forwards }
@keyframes mo-sheen{ 0%{left:-70%;opacity:0} 12%{opacity:1} 100%{left:140%;opacity:0} }

/* картинка внутри карточки слегка наезжает */
.blog-card{ overflow:hidden }
.blog-card img{ transition:transform .7s cubic-bezier(.16,1,.3,1) }
.blog-card:hover img{ transform:scale(1.06) }

/* --- 7. Магнитная primary-CTA (motion.js двигает через --mx/--my) ------- */
.mo-magnetic{ transition:transform .25s cubic-bezier(.16,1,.3,1) }
.mo-magnetic{ transform:translate(var(--mx,0),var(--my,0)) }

/* --- 8. Подчёркивание-сечение под числом счётчика ----------------------- */
.js-reveal .stat[data-reveal]{ position:relative }
.js-reveal .stat[data-reveal]::after{
  content:""; position:absolute; left:50%; bottom:-2px; height:3px; width:0;
  transform:translateX(-50%); border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  transition:width .8s cubic-bezier(.22,.61,.36,1) .35s;
}
.js-reveal .stat[data-reveal].is-in::after{ width:46px }

/* --- 9. Периодический мягкий блик по зелёной hero-карточке -------------- */
.offer-card{ position:relative; overflow:hidden }
.offer-card::after{
  content:""; position:absolute; top:-40%; left:-30%; width:50%; height:180%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-16deg); pointer-events:none;
  animation:mo-card-sheen 7s ease-in-out 2s infinite;
}
@keyframes mo-card-sheen{ 0%,72%{left:-30%;opacity:0} 78%{opacity:1} 100%{left:160%;opacity:0} }

/* --- 10. Параллакс hero-фото (motion.js задаёт --py) -------------------- */
.mo-parallax{ transform:translateY(var(--py,0)); will-change:transform }

/* ============================ ОТКЛЮЧЕНИЯ ================================ */
@media (prefers-reduced-motion: reduce){
  .mo-progress,.mo-steps-line,.offer-card::after,.mo-mesh::before{ display:none!important; animation:none!important }
  .js-reveal [data-reveal][class*="mo-"]{ opacity:1!important; transform:none!important; filter:none!important; clip-path:none!important }
  .mo-words .mo-w{ opacity:1!important }
  .mo-magnetic,.mo-parallax{ transform:none!important }
}
/* на мобиле база отключает reveal — выключаем и варианты, чтобы не зависли */
@media (max-width:760px){
  .js-reveal [data-reveal][class*="mo-"]{ opacity:1; transform:none; filter:none; clip-path:none }
  .mo-words .mo-w{ opacity:1 }
  .mo-parallax{ transform:none }
}

/* ===================== MOTION v2 (доп. слой, append) =====================
   stagger-каскад (JS), золото-underline H2, float-бейдж, pop номеров шагов,
   sheen-блик primary-кнопок. Только transform/opacity. Guard ниже. */

/* v2.1 непрерывный float бейджа «5,5 млрд» (живость, desktop/hover) */
@media (hover:hover) and (pointer:fine){
  .hero-badge{ animation:mo-float 6.5s ease-in-out infinite; will-change:transform }
}
@keyframes mo-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* v2.2 золотое подчёркивание заголовков секций при появлении */
.mo-h2{ position:relative }
.mo-h2::after{
  content:""; position:absolute; left:0; bottom:-12px; height:3px; width:0;
  border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--gold));
  transition:width .9s cubic-bezier(.22,.61,.36,1);
}
.mo-h2.is-lit::after{ width:64px }

/* v2.3 pop-in номеров шагов */
.steps .step .step-num{ transition:transform .55s cubic-bezier(.34,1.56,.64,1) .12s, opacity .5s ease }
.js-reveal .steps .step[data-reveal] .step-num{ transform:scale(.45); opacity:0 }
.js-reveal .steps .step[data-reveal].is-in .step-num{ transform:scale(1); opacity:1 }

/* v2.4 sheen-блик по primary-кнопкам при наведении */
.btn-offer,.btn-primary,.price-tier-btn--accent{ position:relative; overflow:hidden; isolation:isolate }
.btn-offer::after,.btn-primary::after,.price-tier-btn--accent::after{
  content:""; position:absolute; top:0; left:-80%; width:55%; height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg); pointer-events:none; opacity:0;
}
.btn-offer:hover::after,.btn-primary:hover::after,.price-tier-btn--accent:hover::after{ animation:mo-btn-sheen .85s ease forwards }
@keyframes mo-btn-sheen{ 0%{left:-80%;opacity:0} 14%{opacity:1} 100%{left:150%;opacity:0} }

/* отключения v2 */
@media (prefers-reduced-motion:reduce){
  .hero-badge{ animation:none!important }
  .mo-h2::after{ display:none!important }
  .js-reveal .steps .step[data-reveal] .step-num{ transform:none!important; opacity:1!important }
  .btn-offer::after,.btn-primary::after,.price-tier-btn--accent::after{ display:none!important }
}
@media (max-width:760px){
  .js-reveal .steps .step[data-reveal] .step-num{ transform:none; opacity:1 }
}


/* ===================== MOTION v3 — hover карточек шагов ===================== */
.step{ transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease }
.step:not(.step--primary):hover{ transform:translateY(-6px); box-shadow:0 22px 44px -20px rgba(20,35,62,.30) }
.step:hover .step-num{ transform:scale(1.12); box-shadow:0 8px 22px rgba(18,163,120,.38) }
@media (prefers-reduced-motion:reduce){ .step:hover,.step:hover .step-num{ transform:none!important } }