/* Появления при прокрутке, параллакс, наведение. Всё выключается prefers-reduced-motion. */

/* Фото-панели */
.shot{position:relative; margin:0; border-radius:20px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-m); background:var(--surface-2)}
.shot img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.06);
  will-change:transform}
.shot--tall{aspect-ratio:4/4.6; max-height:560px}
.shot__veil{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(27,51,80,.10) 0%, rgba(27,51,80,.34) 62%, rgba(20,26,33,.62) 100%)}
.person__ph{aspect-ratio:4/5; display:block; background:var(--surface-2)}
.person__ph img{object-position:60% 22%}

/* Карточка, лежащая на фото */
.hero__card--float{position:absolute; inset-inline:22px; bottom:22px; padding:24px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px) saturate(140%);
  border-radius:16px; border:1px solid rgba(255,255,255,.7); box-shadow:0 20px 50px rgba(20,26,33,.22)}
.hero__art{position:relative}
@media (max-width:1100px){
  .hero__card--float{position:static; inset:auto; margin-top:-46px; margin-inline:18px; backdrop-filter:none}
  .shot--tall{aspect-ratio:16/10; max-height:340px}
}

/* Полоса-разделитель с параллаксом */
.band{position:relative; height:clamp(190px,24vw,300px); overflow:hidden; background:var(--navy)}
.band--short{height:clamp(150px,18vw,220px)}
.band img{width:100%; height:118%; object-fit:cover; display:block; will-change:transform}
.band__veil{position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(27,51,80,.72), rgba(27,51,80,.34) 55%, rgba(169,138,85,.28))}

/* Появление при прокрутке */
html.has-js [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.61,.36,1),
  transform .7s cubic-bezier(.22,.61,.36,1); transition-delay:var(--d,0ms)}
html.has-js [data-reveal="left"]{transform:translate3d(-26px,0,0)}
html.has-js [data-reveal="right"]{transform:translate3d(26px,0,0)}
html.has-js[dir="rtl"] [data-reveal="left"]{transform:translate3d(26px,0,0)}
html.has-js[dir="rtl"] [data-reveal="right"]{transform:translate3d(-26px,0,0)}
html.has-js [data-reveal].is-in{opacity:1; transform:none}

/* Наведение */
.card{position:relative; overflow:hidden}
.card::before{content:""; position:absolute; inset-inline-start:0; inset-block-start:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--brass),var(--brass-soft)); transition:width .45s cubic-bezier(.22,.61,.36,1)}
.card:hover::before{width:100%}
.card__ico{transition:transform .3s ease, background .3s ease, color .3s ease}
.card:hover .card__ico{transform:translateY(-2px) rotate(-3deg); background:var(--navy); color:#fff;
  border-color:var(--navy)}
.rev{transition:.26s ease}
.rev:hover{box-shadow:var(--shadow-m); transform:translateY(-2px); border-color:var(--brass-soft)}
.chip{transition:.2s ease}
.chip:hover{border-color:var(--brass); color:var(--navy)}
.step{transition:background .3s ease}
.step:hover{background:linear-gradient(90deg,rgba(169,138,85,.05),transparent)}
.step__n{transition:.3s ease}
.step:hover .step__n{border-color:var(--brass); background:var(--brass); color:#fff}

/* Кнопка: мягкий блик */
.btn--primary{position:relative; overflow:hidden}
.btn--primary::after{content:""; position:absolute; inset:0 auto 0 -60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg); transition:left .55s ease}
.btn--primary:hover::after{left:120%}

/* Таблица */
.table tbody tr{transition:background .2s ease}
.table tbody tr:hover{background:rgba(169,138,85,.055)}

/* FAQ: раскрытие */
.faq details p{animation:fadeUp .38s cubic-bezier(.22,.61,.36,1)}
@keyframes fadeUp{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.faq summary{transition:color .2s ease}
.faq summary:hover{color:var(--navy)}

/* Смена языка — мягкое проявление */
body.lang-fade main, body.lang-fade .hdr__in, body.lang-fade .ftr{
  animation:langIn .42s cubic-bezier(.22,.61,.36,1)}
@keyframes langIn{from{opacity:.25} to{opacity:1}}

/* Счётчики */
.hero__meta b{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  html [data-reveal]{opacity:1 !important; transform:none !important}
  .shot img,.band img{transform:none !important}
  .faq details p{animation:none}
  body.lang-fade main,body.lang-fade .hdr__in,body.lang-fade .ftr{animation:none}
}