/* ИТС: доводка движения по аудиту 25.10.2026. Ставится ПОСЛЕ its.css. Только transform/opacity/clip-path.
   Кривые Эмиля Ковальски: вход = ease-out, движение на экране = ease-in-out. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}

/* 1. Появление: одна кривая на opacity и transform, каскад по колонкам (на телефоне без задержек) */
.rv{transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
@media (min-width:621px){
  .g3>.rv:nth-child(3n+2){transition-delay:60ms}
  .g3>.rv:nth-child(3n){transition-delay:120ms}
}

/* 2. Первый экран: текст не ждёт 0,6 с в нуле (LCP на 390 был 648 мс), каскад 60 мс; фото раскрываются шторкой */
.hero .rv{opacity:1;transform:none;transition:none}
.hero .rv:not(.hshow)>*{animation:itsIn .6s var(--ease-out) both}
.hero .rv:not(.hshow)>:nth-child(2){animation-delay:60ms}
.hero .rv:not(.hshow)>:nth-child(3){animation-delay:120ms}
.hero .rv:not(.hshow)>:nth-child(4){animation-delay:180ms}
.hero .rv:not(.hshow)>:nth-child(5){animation-delay:240ms}
@keyframes itsIn{from{opacity:.001;transform:translateY(14px)}}
.hshow__frame{animation:itsFig .9s var(--ease-in-out) both}
.hshow__bar{animation:itsIn .6s var(--ease-out) .35s both}
@keyframes itsFig{from{clip-path:inset(100% 0 0 0 round 22px)}to{clip-path:inset(0 0 0 0 round 22px)}}
/* перелив: два прохода после входа и стоп (бесконечный background-position = перерисовка каждый кадр) */
.shine{animation:shine 3.2s linear 1s 2 both}

/* 3. Фон первого экрана. Выбрать ОДИН: --contours (рекомендую) или --aurora. Разметка: первым ребёнком .hero
   <div class="hero__bg hero__bg--contours" aria-hidden="true"><i></i><i></i></div> */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero__grid{position:relative;z-index:1}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__bg i{position:absolute;display:block;will-change:transform}
/* C · Контуры: изолинии как в CAD-моделировании, файл img/brand/contours.svg (15 КБ, 6,7 КБ gzip) */
.hero__bg--contours i{aspect-ratio:1;background:url('../img/brand/contours.svg') center/contain no-repeat}
.hero__bg--contours i:nth-child(1){width:min(78vw,980px);right:-22%;top:-34%;animation:itsC1 40s ease-in-out infinite alternate}
.hero__bg--contours i:nth-child(2){width:min(46vw,560px);left:-20%;bottom:-48%;opacity:.7;animation:itsC2 46s ease-in-out infinite alternate}
@keyframes itsC1{to{transform:rotate(9deg) translate3d(-2vw,2vh,0)}}
@keyframes itsC2{to{transform:rotate(-12deg) translate3d(2vw,-2vh,0)}}
/* A · Аврора: шалфейные пятна, радиальные градиенты без filter:blur */
.hero__bg--aurora{-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
.hero__bg--aurora i{border-radius:50%;aspect-ratio:1}
.hero__bg--aurora i:nth-child(1){width:min(70vw,860px);right:-14%;top:-38%;background:radial-gradient(closest-side,rgba(168,207,176,.62),rgba(168,207,176,0));animation:itsA1 26s ease-in-out infinite alternate}
.hero__bg--aurora i:nth-child(2){width:min(60vw,720px);left:-18%;bottom:-55%;background:radial-gradient(closest-side,rgba(205,232,213,.9),rgba(205,232,213,0));animation:itsA2 32s ease-in-out infinite alternate}
@keyframes itsA1{to{transform:translate3d(-9vw,10vh,0) scale(1.12)}}
@keyframes itsA2{to{transform:translate3d(12vw,-8vh,0) scale(1.18)}}
@media (max-width:900px){
  .hero__bg i:nth-child(2){display:none}
  .hero__bg--contours i:nth-child(1){width:150vw;right:-70%;top:-18%}
  .hero__bg--aurora i:nth-child(1){width:120vw;right:-50%;top:-20%}
}
/* вне экрана снимаем анимацию совсем: пауза (animation-play-state) в Chrome продолжает гонять главный поток 120 раз/с */
.hero.is-off .hero__bg i,.hero.is-off .shine{animation:none}

/* 4. Изделия: «стопка → раскладка» (вместо burst). Разметка: у #works data-sp-start="0.6" data-sp-end="1.45",
   у .asm__grid убрать data-sp-scatter и data-sp-amount. Позиции стопки считает its-motion.js */
@media (min-width:768px) and (min-height:681px){.asm{min-height:230vh}}
.asm__grid{position:relative}
.asm .sp-fade{opacity:1;transform:none}   /* заголовок не висит призраком, пока карточки летят */
.asm .sp-card{filter:none}

/* 5. Как работаем: рельса прогресса между точками, неактивные карточки светлее (фото не серые) */
.how__nav{position:relative}
.how__nav::before,.how__nav::after{content:'';position:absolute;left:4px;top:10px;bottom:10px;width:2px;border-radius:2px;background:#d7e4db}
.how__nav::after{background:var(--green);transform-origin:top;transform:scaleY(var(--p,0))}
.how__nav li{position:relative;z-index:1}
.how__nav li.done i{background:var(--green)}
.how__card{background:rgba(255,255,255,.55);box-shadow:none;transform:scale(.98);transition:background .4s ease,box-shadow .4s ease,transform .4s var(--ease-out),border-color .4s ease}
.how__card.on{background:#fff;box-shadow:var(--shadow)}   /* 26.10 доступность: неактивный шаг приглушён фоном, не прозрачностью текста */
@media (min-width:821px){.how__right{gap:18vh}}

/* 6. Галерея: фото раскрываются шторкой при появлении, по очереди */
.rv .gal button{clip-path:inset(0 0 100% 0 round 12px);transition:clip-path .9s var(--ease-in-out),transform .18s ease-out}
.rv.in .gal button{clip-path:inset(0 0 0 0 round 12px)}
.rv.in .gal button:nth-child(2){transition-delay:90ms,0s}.rv.in .gal button:nth-child(3){transition-delay:180ms,0s}

/* 7. Лицензия: страницы ложатся веером → в ряд */
.lic__pages.rv button{transform-origin:50% 100%;transition:transform .7s var(--ease-out)}
.lic__pages.rv:not(.in) button:nth-child(1){transform:rotate(-6deg) translate3d(30%,8px,0)}
.lic__pages.rv:not(.in) button:nth-child(3){transform:rotate(6deg) translate3d(-30%,8px,0)}
.lic__pages.rv.in button:nth-child(3){transition-delay:80ms}

/* 8. Кнопки: отклик на нажатие */
.btn{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform 160ms var(--ease-out)}
.btn:active{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  .hero .rv>*,.hshow__frame,.hshow__bar,.shine,.hero__bg i{animation:none !important}
  .rv .gal button,.lic__pages.rv button{clip-path:none;transform:none;transition:none}
  .how__card{opacity:1;transform:none}
}
@media (max-width:820px){.how__card{opacity:1;transform:none}}