/* Движение «Линия Найма». Принцип: контент виден всегда; анимация — только улучшение.
   Скрытое состояние включает JS (класс html.vpm) и только если окно видимо и пользователь не просил меньше движения.
   Первый экран никогда не прячется: у него только сдвиг без прозрачности. */

/* 1. Без JS и без разрешения на анимации всё видно (в исходных стилях .reveal прятал блоки всегда) */
.vp-site .reveal{opacity:1;transform:none}
html.vpm .vp-site .reveal:not(.visible){opacity:0;transform:translateY(24px)}
html.vpm .vp-site .reveal{transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
html.vpm .vp-site .reveal.visible{opacity:1;transform:none}

/* 2. Первый экран: мягкий подъём элементов (только transform — текст виден сразу) */
@keyframes vpUp{from{transform:translateY(16px)}to{transform:none}}
@keyframes vpSlide{from{transform:translateX(22px)}to{transform:none}}
@keyframes vpPop{from{transform:scale(.97)}to{transform:none}}
html.vpm-on .vp-site :is(.hero,.page-hero) :is(.eyebrow,h1,.lead,.hero-actions,.hero-note,.breadcrumb,.catalog-breadcrumb,.catalog-stats,.case-category-nav){animation:vpUp .8s var(--ease) both}
html.vpm-on .vp-site :is(.hero,.page-hero) .eyebrow{animation-delay:40ms}
html.vpm-on .vp-site :is(.hero,.page-hero) h1{animation-delay:110ms}
html.vpm-on .vp-site :is(.hero,.page-hero) .lead{animation-delay:190ms}
html.vpm-on .vp-site :is(.hero,.page-hero) .hero-actions{animation-delay:270ms}
html.vpm-on .vp-site :is(.hero,.page-hero) .hero-note{animation-delay:340ms}
html.vpm-on .vp-site .route-panel{animation:vpSlide .9s var(--ease) .2s both}
html.vpm-on .vp-site .route-item{animation:vpSlide .7s var(--ease) both}
html.vpm-on .vp-site .route-item:nth-of-type(1){animation-delay:.35s}
html.vpm-on .vp-site .route-item:nth-of-type(2){animation-delay:.45s}
html.vpm-on .vp-site .route-item:nth-of-type(3){animation-delay:.55s}
html.vpm-on .vp-site .proof-item{animation:vpUp .7s var(--ease) both}
html.vpm-on .vp-site .proof-item:nth-child(2){animation-delay:.08s}
html.vpm-on .vp-site .proof-item:nth-child(3){animation-delay:.16s}
html.vpm-on .vp-site .proof-item:nth-child(4){animation-delay:.24s}

/* 3. Шапка и индикатор прокрутки */
.vp-site .site-header{transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
.vp-site .site-header .nav{transition:height .3s var(--ease)}
.vp-site .site-header.is-scrolled{box-shadow:0 10px 34px rgba(7,59,56,.10);background:rgba(247,249,248,.96)}
@media(min-width:1001px){.vp-site .site-header.is-scrolled .nav{height:64px}}
.vp-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:70;background:var(--lime,#d8f247);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;will-change:transform}

/* 4. Наведение: подъём карточек, стрелки ссылок (только для мыши) */
@media(hover:hover) and (pointer:fine){
  .vp-site :is(.card,.case-card,.step-card,.catalog-card,.case-row,.coverage-card,.scope-overview article){transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s}
  .vp-site :is(.card,.case-card,.catalog-card,.scope-overview article):hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(7,59,56,.13)}
  .vp-site a.card:hover{border-color:var(--brand)}
  .vp-site .text-link{transition:gap .25s var(--ease),color .2s}
  .vp-site .text-link:hover{text-decoration:underline;text-underline-offset:5px}
  .vp-site .btn-primary:hover{box-shadow:0 12px 28px rgba(216,242,71,.35)}
  .vp-site .btn-dark:hover{box-shadow:0 12px 28px rgba(7,59,56,.28)}
  .vp-site .route-arrow{transition:transform .3s var(--ease)}
  .vp-site .route-item:hover .route-arrow{transform:translate(3px,-3px)}
}
.vp-site .btn:active{transform:scale(.985)}
.vp-site .mobile-bar{transition:transform .35s var(--ease)}
html.vp-lead-open .vp-site .mobile-bar{transform:translateY(140%)}

/* 5. Раскрывающиеся блоки и фильтры каталога */
@keyframes vpFold{from{transform:translateY(-6px)}to{transform:none}}
.vp-site details[open]>:not(summary){animation:vpFold .3s var(--ease)}
.vp-site details>summary{transition:background-color .2s}
@keyframes vpFilter{from{transform:translateY(10px)}to{transform:none}}
.vp-site [data-catalog-card]:not([hidden]){animation:vpFilter .4s var(--ease) both}

/* 6. Мелочи оформления */
::selection{background:#d8f247;color:#073b38}
.vp-site{text-rendering:optimizeLegibility}
.vp-site .btn-primary{position:relative;overflow:hidden}
.vp-site .btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
@media(hover:hover) and (pointer:fine){.vp-site .btn-primary:hover::after{transform:translateX(120%);transition:transform .7s var(--ease)}}
.vp-lead-box input:not([type=checkbox]),.vp-lead-box textarea{transition:border-color .2s,box-shadow .2s}
.vp-lead-box input:focus:not([type=checkbox]),.vp-lead-box textarea:focus{border-color:#0b5c55;box-shadow:0 0 0 4px rgba(11,92,85,.12)}

/* 7. Уважение к настройкам пользователя */
@media(prefers-reduced-motion:reduce){
  .vp-site *,.vp-site *::before,.vp-site *::after,.vp-lead *{animation:none!important;transition:none!important}
  .vp-site .reveal{opacity:1!important;transform:none!important}
  .vp-progress{display:none}
}