/* ===== Lumio animation kit - CSS (значения 1:1 с оригиналом) ===== */
:root{
  --ease-lumio: cubic-bezier(.22,.61,.36,1);  /* главный ease почти везде */
  --ease-soft:  cubic-bezier(.25,.8,.25,1);    /* nav/browser появление */
  --ease-back:  cubic-bezier(0.34,1.45,0.64,1);/* пружинистый pop крупных элементов */
}

/* --- ЗАГОЛОВКИ: 3D letter-flip с размытием --- */
/* JS разбивает текст на <span class="ch"> (пробел = .ch.sp). */
[data-anim="heading"] .ch{
  display:inline-block; opacity:0;
  transform:translateY(.9em) rotateX(-70deg) scale(.9);
  transform-origin:50% 100%;
  filter:blur(14px);
  will-change:transform,opacity,filter;
}
[data-anim="heading"] .ch.sp{width:.28em}      /* ширина пробела */
[data-anim="heading"]{opacity:0}                /* до старта скрыт целиком */
[data-anim="heading"].in{opacity:1}
[data-anim="heading"].in .ch{
  animation:introLetterUp var(--dur,.6s) var(--ease-lumio) both;
  animation-delay:calc(var(--delay,0ms) + var(--i,0) * var(--stagger,26ms));
}
/* Тайминги по месту использования:
   - Hero (первый экран):  --dur:.42s; --stagger:15ms
   - Заголовки секций:     --dur:.6s;  --stagger:26ms
   - Крупный «фичевый» h2: --dur:1.2s; --stagger:50ms
*/
@keyframes introLetterUp{
  0%  {opacity:0;filter:blur(14px);transform:translateY(.9em) rotateX(-70deg) scale(.9)}
  55% {opacity:1;filter:blur(3px); transform:translateY(.08em) rotateX(-8deg) scale(1)}
  100%{opacity:1;filter:blur(0);   transform:translateY(0) rotateX(0) scale(1)}
}

/* --- ПОДЗАГОЛОВКИ / строки текста: fade-up по строкам --- */
/* Каждую строку оберни в <span class="sub-line">…</span>; JS добавляет .in по очереди */
[data-anim] .sub-line{display:block;opacity:0;transform:translateY(18px);will-change:transform,opacity}
[data-anim] .sub-line.in{animation:introSubLine .35s var(--ease-lumio) forwards}
@keyframes introSubLine{
  0%  {opacity:0;transform:translateY(18px)}
  100%{opacity:1;transform:translateY(0)}
}

/* --- КНОПКИ --- */
/* Главная кнопка: «выстреливает» через перелёт масштаба */
.btn-pop{transform:scale(0);transform-origin:center center;will-change:transform}
.btn-pop.in{animation:introBtnPop .35s var(--ease-lumio) forwards}
@keyframes introBtnPop{
  0%  {transform:scale(0)}
  60% {transform:scale(1.2)}
  100%{transform:scale(1)}
}
/* Вторичная кнопка / pill / chip: мягкий bounce */
.btn-bounce{opacity:0;transform:scale(0);transform-origin:center center;will-change:transform,opacity}
.btn-bounce.in{animation:introBounceIn .55s var(--ease-lumio) forwards}
@keyframes introBounceIn{
  0%  {opacity:0;transform:scale(0)}
  40% {opacity:1}
  65% {transform:scale(1.1)}
  85% {transform:scale(0.95)}
  100%{opacity:1;transform:scale(1)}
}
/* CTA в навбаре: раскрытие с двойным перелётом */
.cta-expand{opacity:0;transform-origin:center center}
.cta-expand.in{animation:introCtaExpand .7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes introCtaExpand{
  0%  {opacity:0;transform:scale(0.6)}
  30% {opacity:1;transform:scale(1.2)}
  65% {transform:scale(1.2)}
  80% {transform:scale(0.9)}
  90% {transform:scale(0.9)}
  100%{opacity:1;transform:scale(1)}
}

/* --- ЭЛЕМЕНТЫ (карточки, статы, плашки) --- */
/* Простой подъём */
.el-fade-up{opacity:0;transform:translateY(22px);will-change:transform,opacity}
.el-fade-up.in{animation:elFadeUp .7s var(--ease-lumio) forwards}
@keyframes elFadeUp{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:translateY(0)}}
/* Карточка снизу */
.el-card-up{opacity:0;transform:translateY(60px);will-change:transform,opacity}
.el-card-up.in{animation:elCardUp .8s var(--ease-lumio) forwards}
@keyframes elCardUp{0%{opacity:0;transform:translateY(60px)}100%{opacity:1;transform:translateY(0)}}
/* Pop с перелётом (статы/иконки) */
.el-pop{opacity:0;transform:scale(0);transform-origin:center center;will-change:transform,opacity}
.el-pop.in{animation:elPop 1.1s var(--ease-lumio) forwards}
@keyframes elPop{0%{opacity:0;transform:scale(0)}40%{opacity:1}60%{transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
/* Сигнатурный reveal: круг → скруглённый прямоугольник с перелётом */
.el-circle{opacity:0;transform:scale(0);border-radius:50%;will-change:transform,opacity,border-radius}
.el-circle.in{animation:elCircle .85s var(--ease-lumio) forwards}
@keyframes elCircle{
  0%  {opacity:0;transform:scale(0);border-radius:50%}
  40% {opacity:1}
  65% {opacity:1;transform:scale(1.1);border-radius:24px}
  85% {opacity:1;transform:scale(0.9);border-radius:24px}
  100%{opacity:1;transform:scale(1);border-radius:24px}
}
/* 3D «прилёт» крупной панели/дашборда (как браузер-мокап) */
.el-flip3d{opacity:0;transform:translateY(-150px) rotateX(85deg);transform-origin:bottom center}
.el-flip3d.in{animation:elFlip3d 2.2s cubic-bezier(.50,1,.3,1) forwards}
@keyframes elFlip3d{
  0%  {opacity:0;transform:translateY(-150px) rotateX(85deg)}
  15% {opacity:1}
  100%{opacity:1;transform:translateY(0) rotateX(0deg)}
}

/* --- BORDER-BEAM: бегущий световой блик по рамке (на кнопках/карточках) --- */
.bb-wrap{
  pointer-events:none;position:absolute;inset:0;border-radius:inherit;
  padding:var(--bb-ring,1px);box-sizing:border-box;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;z-index:0;
}
.bb-beam{
  position:absolute;aspect-ratio:1;width:var(--bb-size,80px);
  background:radial-gradient(circle at center,
    rgba(255,255,255,1) 0%,rgba(255,255,255,.7) 6%,rgba(255,255,255,.3) 18%,
    rgba(255,255,255,.1) 32%,rgba(255,255,255,0) 50%);
  filter:blur(0.6px);
  offset-path:rect(0 auto auto 0 round var(--bb-radius,14px));
  offset-distance:0%;offset-rotate:0deg;
  animation:bb-travel 6s linear infinite;
}
.bb-beam-2{animation-delay:-3s}
@keyframes bb-travel{to{offset-distance:100%}}
/* На каждый элемент с лучом задай свои переменные, напр.:
   .my-btn{position:relative;overflow:hidden;isolation:isolate;
           --bb-radius:14px;--bb-size:80px;--bb-ring:1px}
   и положи внутрь: <span class="bb-wrap"><span class="bb-beam bb-beam-1"></span><span class="bb-beam bb-beam-2"></span></span>
   Контент элемента подними над лучом: .my-btn > *:not(.bb-wrap){position:relative;z-index:1} */

/* --- Доступность --- */
@media (prefers-reduced-motion: reduce){
  [data-anim],[data-anim] .ch,[data-anim] .sub-line,
  .btn-pop,.btn-bounce,.cta-expand,
  .el-fade-up,.el-card-up,.el-pop,.el-circle,.el-flip3d{
    animation:none !important;opacity:1 !important;filter:none !important;transform:none !important;
  }
  .bb-beam{animation:none !important;opacity:0 !important}
}