/* ============================================================
   Затягивание заголовков наверх (top-sink).

   Прием перенесен из каталога анимаций, demos/headline.html (вскрыт из
   бандла bridge.surf): блок уезжает вверх с прищипом к верхней кромке
   (perspective + rotateX), слегка сжимается, косит по X, теряет немного
   прозрачности и расплывается «чернильным» SVG-фильтром.

   Все числа приема живут в js/headsink.js – здесь только подготовка слоя.
   Момент запуска: у «Карты компетенций» – конец ленты плит, у «О подходе» –
   уход блока вверх, к следующему разделу.
   ============================================================ */

.competence__head,
.about__head,
.about__lead,
.competence__closing {
  /* трансформ и фильтр меняются каждый кадр – просим свой слой заранее */
  will-change: transform, opacity, filter;
  /* пивот у верхней кромки: так наклон читается затягиванием, а не качанием */
  transform-origin: center top;
}

/* Без движения: скрипт при этом признаке ничего не применяет, но правило
   страхует и старое состояние, если признак включили уже на странице */
@media (prefers-reduced-motion: reduce) {
  .competence__head,
  .about__head {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
}