/* ==========================================================
   SmartLoyal — слой движения. Общий для всех страниц.
   Всё на transform/opacity/filter → работает на GPU.
   ========================================================== */

/* ---------- 1. Заголовки: слова вылетают по очереди ---------- */
.sl-w{
  display:inline-block;
  opacity:0;
  transform:translateY(.55em) rotateX(-45deg);
  filter:blur(6px);
  transform-origin:50% 100%;
  transition:opacity .85s cubic-bezier(.16,1,.3,1),
             transform .85s cubic-bezier(.16,1,.3,1),
             filter .7s ease;
  transition-delay:var(--d,0ms);
}
.sl-split{perspective:900px}
.sl-split.sl-in .sl-w{opacity:1;transform:none;filter:blur(0)}

/* ---------- 2. Блоки: подъём с расфокусом ---------- */
.sl-rise{
  opacity:0;
  transform:translateY(38px);
  filter:blur(10px);
  transition:opacity .95s cubic-bezier(.16,1,.3,1),
             transform .95s cubic-bezier(.16,1,.3,1),
             filter .8s ease;
  transition-delay:var(--d,0ms);
}
.sl-rise.sl-in{opacity:1;transform:none;filter:blur(0)}

/* появление слева/справа — для двухколоночных секций */
.sl-slide-l{opacity:0;transform:translateX(-46px);filter:blur(8px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter .8s}
.sl-slide-r{opacity:0;transform:translateX(46px);filter:blur(8px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter .8s}
.sl-slide-l.sl-in,.sl-slide-r.sl-in{opacity:1;transform:none;filter:blur(0)}

/* ---------- 3. Блик по кнопке ---------- */
.sl-shine{position:relative;overflow:hidden;isolation:isolate}
.sl-shine::after{
  content:'';position:absolute;inset:0 auto 0 -160%;width:55%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);
  transform:skewX(-22deg);pointer-events:none;
}
.sl-shine:hover::after{animation:slShine .85s cubic-bezier(.16,1,.3,1)}
@keyframes slShine{from{left:-160%}to{left:160%}}

/* ---------- 4. Кнопки: лёгкое нажатие, без движения за курсором ---------- */
.sl-shine{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.sl-shine:active{transform:scale(.98)}

/* ---------- 6. Полоса прогресса чтения ---------- */
#slProg{
  position:fixed;top:0;left:0;height:2.5px;width:0;z-index:70;
  background:linear-gradient(90deg,#0284C7,#3B82F6 45%,#10B981);
  box-shadow:0 0 14px rgba(2,132,199,.55);
  transition:width .12s linear;
}

/* ---------- 7. Живой градиент в заголовке ---------- */
.grad-text{
  background-size:220% auto;
  animation:slGrad 9s linear infinite;
}
@keyframes slGrad{to{background-position:220% center}}

/* ---------- 8. Дыхание световых пятен ---------- */
@keyframes slOrb{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.75}
  50%    {transform:translate3d(0,-26px,0) scale(1.09);opacity:1}
}
.sl-orb{animation:slOrb 13s ease-in-out infinite;will-change:transform}
.sl-orb:nth-of-type(2){animation-duration:17s;animation-delay:-4s}

/* ---------- 9. Каскад первого экрана при загрузке ---------- */
@keyframes slEnter{
  from{opacity:0;transform:translateY(26px);filter:blur(9px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}
.sl-enter{animation:slEnter .95s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0ms)}

/* ---------- 10. Подчёркивание ссылок из-под текста ---------- */
.sl-link{position:relative}
.sl-link::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.sl-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- 11. Мягкий «пульс» у точек-индикаторов ---------- */
@keyframes slHalo{
  0%  {box-shadow:0 0 0 0 rgba(16,185,129,.55)}
  70% {box-shadow:0 0 0 12px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}
.sl-halo{animation:slHalo 2.6s ease-out infinite}

/* Аккордеоны внутри карточек всегда видимы:
   карточка имеет overflow:hidden, и любой сдвиг вложенного блока
   обрезался бы её краем. Анимируется сама карточка, не содержимое. */
.f-card details,
.ct-card details{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
}

/* ---------- Доступность ---------- */
@media (prefers-reduced-motion:reduce){
  .sl-w,.sl-rise,.sl-slide-l,.sl-slide-r{
    opacity:1!important;transform:none!important;filter:none!important;transition:none!important;
  }
  .sl-enter{animation:none}
  .grad-text{animation:none}
  .sl-orb{animation:none}
  .sl-halo{animation:none}
  .sl-shine::after{display:none}
  #slProg{display:none}
}

/* на телефонах убираем то, что зависит от курсора */
@media (hover:none){
  .sl-shine::after{display:none}
}