/* ============================================================
   РАКОРД · слой анимации поверх существующей вёрстки
   Ничего не переделывает — только оживляет то, что уже есть.
   Всё на transform/opacity (не дёргает лейаут), ~2 КБ.
   ============================================================ */

/* ── ГЕРОЙ: многослойный параллакс ────────────────────────── */
.hero{ perspective:1px; }

/* слой 1 — фотография, уезжает медленнее всех */
.hero-bg{
  will-change:transform;
  transform:translate3d(0,0,0) scale(1.14);
  transform-origin:center 40%;
}
/* слой 2 — затемнение, сгущается по мере ухода со сцены */
.hero-bg::after{ transition:opacity .2s linear; }

/* слой 3 — мягкая виньетка, добавляет глубину кадру */
.hero-vig{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(120% 85% at 50% 45%, transparent 45%, rgba(0,0,0,.42) 100%);
  will-change:transform;
}
/* слой 4 — текст, идёт быстрее фона → ощущение объёма */
.hero-content{ will-change:transform,opacity; }

/* ── ГЕРОЙ: появление при загрузке ────────────────────────── */
.hero-title,.hero-subtitle,.btn-hero{ }
.hero-title{ overflow:hidden; }
.hero-title .ln{ display:block; overflow:hidden; }
.rk-js .hero-title .ln > span{
  display:inline-block;
  transform:translateY(105%);
  letter-spacing:26px;              /* трекинг «садится» к штатным 10px */
  opacity:0;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1),
             letter-spacing 1.3s cubic-bezier(.16,1,.3,1),
             opacity .8s ease;
}
.rk-js.hero-ready .hero-title .ln > span{ transform:none; letter-spacing:10px; opacity:1; }

.rk-js .hero-subtitle,.rk-js .btn-hero{
  opacity:0; transform:translateY(14px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.rk-js.hero-ready .hero-subtitle{ transition-delay:.45s; opacity:1; transform:none; }
.rk-js.hero-ready .btn-hero{ transition-delay:.62s; opacity:1; transform:none; }

/* стрелка: спокойное «дыхание» вниз */
.hero-arrow{ will-change:transform,opacity; animation:rk-breathe 2.4s ease-in-out infinite; }
@keyframes rk-breathe{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(9px)} }

/* ── ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ ──────────────────────────────── */
.rk-js [data-rk]{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
}
.rk-js [data-rk].rk-in{ opacity:1; transform:none; }

/* фотографии оживают чуть иначе — доезжают из масштаба */
.about-photo,.team-photo{ overflow:hidden; }
.about-photo img,.team-photo img{
  transform:scale(1.1); transition:transform 1.5s cubic-bezier(.16,1,.3,1);
}
.rk-in .about-photo img,.rk-in .team-photo img,
.about-photo.rk-in img,.team-photo.rk-in img{ transform:none; }

/* тонкая линия-разделитель прочерчивается */
.about-divider{ transform-origin:left center; transform:scaleX(0);
  transition:transform 1s .25s cubic-bezier(.16,1,.3,1); }
.rk-in .about-divider,.about-divider.rk-in{ transform:none; }

/* ── КАРТОЧКИ УСЛУГ: спокойный ховер ──────────────────────── */
.service-card{ transition:transform .45s cubic-bezier(.16,1,.3,1); }
.service-card:hover{ transform:translateY(-6px); }
.service-icon{ transition:transform .55s cubic-bezier(.16,1,.3,1); }
.service-card:hover .service-icon{ transform:scale(1.09) rotate(-3deg); }

/* карточки команды */
.team-card{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
.team-card:hover{ transform:translateY(-5px); }

/* ── ШАПКА: подбирается при прокрутке ─────────────────────── */
header{ transition:box-shadow .35s ease, backdrop-filter .35s ease; }
header.rk-stuck{ box-shadow:0 1px 0 rgba(0,0,0,.07), 0 6px 24px rgba(0,0,0,.05); }

/* ── МОБИЛЬНЫЕ / ДОСТУПНОСТЬ ──────────────────────────────── */
@media (max-width:820px){
  .hero-bg{ transform:none !important; scale:1; }
  .hero-vig{ display:none; }
  .hero-content{ transform:none !important; opacity:1 !important; }
  [data-rk]{ transform:translateY(18px); }
}
@media (prefers-reduced-motion:reduce){
  .hero-bg,.hero-content,.hero-vig{ transform:none !important; opacity:1 !important; }
  .hero-title .ln > span{ transform:none; opacity:1; letter-spacing:10px; }
  .hero-subtitle,.btn-hero,[data-rk]{ opacity:1 !important; transform:none !important; }
  .about-photo img,.team-photo img{ transform:none; }
  .about-divider{ transform:none; }
  .hero-arrow{ animation:none; }
}