/* =========================================================================
   SKR-EFFECTS (11.09.2026) - фишки 21st.dev, перенесённые ТЕХНИКОЙ на CSS.
   Владелец: «бери 21st.dev... все фишки: анимации, скроллинги, hover -
   максимально всё применить». Правило переноса: у каждой анимации назван
   смысл одним словом (feedback · explanation · delight · state), только
   transform / opacity / filter, ease-out на входе, linear на постоянном
   движении, prefers-reduced-motion гасит всё декоративное. Новых синих
   плоскостей нет: синий живёт в искре на кромке и в прожекторе с альфой .08.
   Движок - skr-effects.js (ставит классы и переменные, ничего не рисует сам).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ПРОЖЕКТОР ЗА КУРСОРОМ на первом экране (aceternity/spotlight).
   Назначение: delight. Слой ::after у .hero (оба псевдоэлемента героя были
   свободны - проверено grep по всем css), z-index -1 при isolation:isolate
   героя (styles.css:1174) кладёт его под контент и над фоном. Координаты
   --skr-mx / --skr-my пишет скрипт через rAF, только на (hover:hover) and
   (pointer:fine). Пятно 600px, синий .08 - ниже порога «плоскости».
   ------------------------------------------------------------------------- */
.hero.skr-spot::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:radial-gradient(600px circle at var(--skr-mx, 50%) var(--skr-my, 40%),
              rgba(79,196,233,.08), rgba(79,196,233,0) 60%);
  opacity:0;
  transition:opacity 400ms cubic-bezier(.22,1,.36,1);
}
.hero.skr-spot.is-lit::after{ opacity:1; }

/* -------------------------------------------------------------------------
   2. БЕГУЩАЯ СТРОКА под первым экраном (dillionverma/marquee).
   Назначение: explanation. Две одинаковые группы, дорожка едет на -50% своей
   ширины за 40 с linear - шов невидим. Маска по краям, пауза под курсором.
   ------------------------------------------------------------------------- */
.skr-marquee{
  position:relative;
  overflow:hidden;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.skr-marquee__track{
  display:flex; width:max-content;
  animation:skr-marquee 40s linear infinite;
  will-change:transform;
}
.skr-marquee:hover .skr-marquee__track{ animation-play-state:paused; }
.skr-marquee__group{ display:flex; align-items:center; flex:0 0 auto; }
.skr-marquee__item{
  font-family:var(--font-mono, "IBM Plex Mono", monospace);
  font-size:11.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
  white-space:nowrap;
  padding:0 8px;
}
.skr-marquee__dot{
  display:inline-block; width:4px; height:4px; border-radius:50%;
  background:rgba(79,196,233,.7);
  margin:0 18px;
  flex:0 0 auto;
}
@keyframes skr-marquee{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }
}

/* -------------------------------------------------------------------------
   3. ЗАГОЛОВКИ СЕКЦИЙ - появление СЛОВАМИ (cnippet-dev/text-reveal).
   Назначение: delight, один раз при первом появлении. Скрипт режет h2
   в .section__head на слова ТОЛЬКО когда сам жив и есть IntersectionObserver,
   поэтому без скрипта текст видим по умолчанию (контент не гейтится).
   Каждое слово: blur 6px -> 0, translateY 8px -> 0, opacity, 520 мс ease-out,
   ступенька 30 мс от слова к слову (--skr-i пишет скрипт).
   ------------------------------------------------------------------------- */
/* 🔴 Слово - inline-block (transform/filter на inline не работают), а у h2
   серебро наложено через background-clip:text. Клип по тексту НЕ проходит
   внутрь inline-block-детей: без строки ниже заголовок пропадал целиком
   (замер: «Шесть причин менять здесь» - пустое место). Поэтому каждое слово
   наследует фон родителя и клипает его по себе; градиент 158deg почти
   вертикальный, стык между словами не читается. */
.skr-words .skr-w{
  display:inline-block;
  background:inherit;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:0;
  transform:translateY(8px);
  filter:blur(6px);
  transition:opacity 520ms cubic-bezier(.22,1,.36,1),
             transform 520ms cubic-bezier(.22,1,.36,1),
             filter 520ms cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--skr-i, 0) * 30ms);
}
.skr-words.is-in .skr-w{ opacity:1; transform:none; filter:blur(0); }

/* -------------------------------------------------------------------------
   4. ИСКРА ПО КРОМКЕ карточек услуг и опций под курсором (larsen66/border-beam).
   Назначение: feedback. Ребёнок <i class="skr-beam"> (оба псевдоэлемента
   .card и .svc заняты рамками зон 3-5) едет по offset-path: inset(0 round R),
   R скрипт снимает с реального border-radius карточки. Полоска 64x2 с
   градиентом к #4FC4E9 крутится по тангенсу пути (offset-rotate auto).
   Анимация запускается только под курсором и только на точном указателе.
   ------------------------------------------------------------------------- */
.card.skr-beam-host, .svc.skr-beam-host{ position:relative; }
.skr-beam{
  position:absolute; top:0; left:0;
  width:64px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(79,196,233,0) 0%, rgba(79,196,233,.9) 55%, #FFFFFF 78%, rgba(79,196,233,0) 100%);
  filter:drop-shadow(0 0 6px rgba(79,196,233,.55));   /* свет по форме полоски, а не прямоугольник */
  offset-path:inset(0 round var(--skr-r, 16px));
  offset-rotate:auto;
  offset-distance:0%;
  opacity:0;
  pointer-events:none;
  z-index:3;
  transition:opacity 260ms cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine){
  .skr-beam-host:hover .skr-beam{
    opacity:1;
    animation:skr-beam-run 2.2s linear infinite;
  }
}
@keyframes skr-beam-run{
  from{ offset-distance:0%; }
  to{   offset-distance:100%; }
}

/* -------------------------------------------------------------------------
   5. МЕНЬШЕ ДВИЖЕНИЯ: всё декоративное стоит, контент видим.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hero.skr-spot::after{ display:none; }
  .skr-marquee__track{ animation:none; }
  .skr-words .skr-w{ opacity:1; transform:none; filter:none; transition:none; }
  .skr-beam{ display:none; }
}