/* =========================================================
   АОС — анимации интерфейса
   - hero entrance с задержками
   - scroll-reveal через IntersectionObserver (.in-view)
   - header shrink при прокрутке (.is-scrolled)
   - hover-lift для карточек
   - respect prefers-reduced-motion
   ========================================================= */

/* ---- утилитарный easing ---- */
:root{
  --ease-out-soft:cubic-bezier(.22,.61,.36,1);
  --ease-out-back:cubic-bezier(.34,1.56,.64,1);
}

/* ===========================================================
   1. Hero entrance (срабатывает один раз при загрузке)
   =========================================================== */
.hero .eyebrow,
.hero h1,
.hero p,
.hero .hero-cta,
.hero .hero-bullets,
.hero .hero-meta,
.hero .hero-visual{
  opacity:0;
  transform:translateY(14px);
  animation:aos-rise .7s var(--ease-out-soft) forwards;
}
.hero .eyebrow      { animation-delay: .05s; }
.hero h1            { animation-delay: .15s; }
.hero p             { animation-delay: .28s; }
.hero .hero-bullets { animation-delay: .42s; }
.hero .hero-cta     { animation-delay: .55s; }
.hero .hero-meta    { animation-delay: .68s; }
.hero .hero-visual  { animation-delay: .18s; animation-duration:.9s; transform:translateY(20px) scale(.98); }

@keyframes aos-rise{
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ===========================================================
   2. Logo mark — лёгкий «штамп» при загрузке
   =========================================================== */
.logo-mark{
  animation:aos-stamp .9s var(--ease-out-back) both;
}
@keyframes aos-stamp{
  0%   { transform:scale(.6) rotate(-8deg); opacity:0; }
  60%  { transform:scale(1.06) rotate(0); opacity:1; }
  100% { transform:scale(1) rotate(0); }
}

/* ===========================================================
   3. Sticky header shrink на скролле
   =========================================================== */
.header{
  transition:padding .22s var(--ease-out-soft),
             box-shadow .22s var(--ease-out-soft),
             background-color .22s var(--ease-out-soft);
}
.header.is-scrolled{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 rgba(15,23,42,.05), 0 6px 24px rgba(15,23,42,.04);
}
.header.is-scrolled .nav{ padding:10px 0; }
.header .nav{ transition:padding .22s var(--ease-out-soft); }

/* ===========================================================
   4. Scroll-reveal — добавляется JS-ом классом .in-view
   =========================================================== */
[data-anim]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .7s var(--ease-out-soft),
             transform .7s var(--ease-out-soft);
  will-change:opacity, transform;
}
[data-anim].in-view{
  opacity:1;
  transform:translateY(0);
}

/* stagger детей внутри grid'ов, помеченных data-anim-children */
[data-anim-children] > *{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--ease-out-soft),
             transform .55s var(--ease-out-soft);
}
[data-anim-children].in-view > *{
  opacity:1;
  transform:translateY(0);
}
[data-anim-children].in-view > *:nth-child(1){ transition-delay:.04s; }
[data-anim-children].in-view > *:nth-child(2){ transition-delay:.11s; }
[data-anim-children].in-view > *:nth-child(3){ transition-delay:.18s; }
[data-anim-children].in-view > *:nth-child(4){ transition-delay:.25s; }
[data-anim-children].in-view > *:nth-child(5){ transition-delay:.32s; }
[data-anim-children].in-view > *:nth-child(6){ transition-delay:.39s; }
[data-anim-children].in-view > *:nth-child(7){ transition-delay:.46s; }
[data-anim-children].in-view > *:nth-child(8){ transition-delay:.53s; }
[data-anim-children].in-view > *:nth-child(n+9){ transition-delay:.6s; }

/* ===========================================================
   5. Hover-lift для карточек
   =========================================================== */
.outcome-card,
.benefit-card,
.audience-card,
.service-card,
.aos-pill,
.review-card,
.compare-col,
.stat-card,
.advantage-card,
.why-card,
.roadmap-step{
  transition:transform .22s var(--ease-out-soft),
             box-shadow .22s var(--ease-out-soft),
             border-color .22s var(--ease-out-soft);
}
.outcome-card:hover,
.benefit-card:hover,
.audience-card:hover,
.service-card:hover,
.aos-pill:hover,
.review-card:hover,
.compare-col:hover,
.stat-card:hover,
.advantage-card:hover,
.why-card:hover,
.roadmap-step:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(15,23,42,.08), 0 4px 10px rgba(15,23,42,.04);
}

/* мягкая подсветка иконки в карточке при hover */
.outcome-card:hover .outcome-icon,
.benefit-card:hover .benefit-icon,
.service-card:hover .service-icon,
.aos-pill:hover .aos-pill-icon{
  transform:scale(1.06) rotate(-2deg);
}
.outcome-icon, .benefit-icon, .service-icon, .aos-pill-icon{
  transition:transform .25s var(--ease-out-back);
}

/* ===========================================================
   6. Кнопки — pulse при первом появлении CTA-секции
   =========================================================== */
@keyframes aos-cta-pulse{
  0%   { box-shadow:0 6px 18px rgba(240,122,42,.28), 0 0 0 0 rgba(240,122,42,.0); }
  50%  { box-shadow:0 6px 18px rgba(240,122,42,.28), 0 0 0 10px rgba(240,122,42,.18); }
  100% { box-shadow:0 6px 18px rgba(240,122,42,.28), 0 0 0 0 rgba(240,122,42,.0); }
}
.cta-section.in-view .btn-primary,
section.cta.in-view .btn-primary{
  animation:aos-cta-pulse 2s var(--ease-out-soft) .4s 2;
}

/* ===========================================================
   7. Stats — счёт-апы через CSS counter animation
   (значение подменяет JS, добавляющий .counted)
   =========================================================== */
.stat-num{
  display:inline-block;
  transition:color .3s var(--ease-out-soft);
}

/* ===========================================================
   8. Hero фон — медленный «дыхательный» градиент
   (только для главной — не задевает подстраницы)
   =========================================================== */
.hero{
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:-20% -10% auto auto;
  width:60vmax;height:60vmax;
  background:radial-gradient(closest-side, rgba(58,173,110,.10), transparent 70%);
  filter:blur(10px);
  z-index:0;
  pointer-events:none;
  animation:aos-breathe 16s ease-in-out infinite alternate;
}
.hero::after{
  content:'';
  position:absolute;
  inset:auto auto -25% -15%;
  width:55vmax;height:55vmax;
  background:radial-gradient(closest-side, rgba(240,122,42,.08), transparent 70%);
  filter:blur(10px);
  z-index:0;
  pointer-events:none;
  animation:aos-breathe 20s ease-in-out infinite alternate-reverse;
}
.hero > *{ position:relative; z-index:1; }
@keyframes aos-breathe{
  0%   { transform:translate3d(0,0,0) scale(1); }
  100% { transform:translate3d(-4%, 3%, 0) scale(1.08); }
}

/* ===========================================================
   9. Подчёркивание ссылок навигации — slide-in
   =========================================================== */
.nav-links a{
  position:relative;
}
.nav-links a::after{
  content:'';
  position:absolute; left:14px; right:14px; bottom:5px;
  height:2px; background:var(--orange);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s var(--ease-out-soft);
}
.nav-links a:hover::after,
.nav-links a.is-active::after{
  transform:scaleX(1);
}
.nav-links a.nav-macet::after{ display:none; } /* спец-пилюля */

/* ===========================================================
   10. Plюс-аккордеоны (FAQ-detail blocks) — плавнее
   =========================================================== */
details > summary{
  cursor:pointer;
  transition:color .18s var(--ease-out-soft);
}
details[open] > summary{
  color:var(--green-deep);
}

/* ===========================================================
   11. Возможность отключить через prefers-reduced-motion
   =========================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero::before, .hero::after{ animation:none; }
}