/* Плавные анимации. Включаются только классом .motion на <html> (его ставит motion.js),
   поэтому без JS и при «уменьшить движение» контент виден сразу. */
:root{--ease-out:cubic-bezier(.22,.7,.18,1)}

/* Первый экран: фото проявляется с лёгким «наездом», текст выходит по очереди */
@keyframes m-room{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}
@keyframes m-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.motion .hero .room>img{animation:m-room 2.2s var(--ease-out) both}
.motion .hero-card .in>*,.motion .hero-bottom{animation:m-up 1s var(--ease-out) both}
.motion .hero-card .in>:nth-child(1){animation-delay:.25s}
.motion .hero-card .in>:nth-child(2){animation-delay:.38s}
.motion .hero-card .in>:nth-child(3){animation-delay:.52s}
.motion .hero-card .in>:nth-child(4){animation-delay:.66s}
.motion .hero-card .in>:nth-child(n+5){animation-delay:.78s}
.motion .hero-bottom{animation-delay:.95s}

/* Появление при прокрутке */
.motion [data-r]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--rd,0ms)}
.motion [data-r="img"]{transform:translateY(24px) scale(.985)}
.motion [data-r].is-in{opacity:1;transform:none}

/* Стрелки в кнопках и ссылках слегка уходят по направлению */
.btn span[aria-hidden],.hero-text-link span[aria-hidden],.link span[aria-hidden]{display:inline-block;transition:transform .35s var(--ease-out)}
.btn:hover span[aria-hidden]{transform:translate(3px,-3px)}
.hero-text-link:hover span[aria-hidden]{transform:translateY(3px)}


/* Переключение машин в «Наших работах» */
@keyframes m-swap-img{from{opacity:0;transform:translateX(calc(var(--dir,1) * 48px))}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
.motion .folder.m-swap .top{animation:m-fade .5s ease both}
.motion .folder.m-swap .body>figure{animation:m-swap-img .75s var(--ease-out) both}
.motion .folder.m-swap .txt>*{animation:m-up .7s var(--ease-out) both}
.motion .folder.m-swap .txt>:nth-child(1){animation-delay:.08s}
.motion .folder.m-swap .txt>:nth-child(2){animation-delay:.16s}
.motion .folder.m-swap .txt>:nth-child(3){animation-delay:.24s}
.motion .folder.m-swap .txt>:nth-child(n+4){animation-delay:.32s}

@media (prefers-reduced-motion:reduce){
  .motion [data-r]{opacity:1!important;transform:none!important}
}