/* КОТировка — система движения "decelerate-and-lock".
 *
 * Единый слой микро-взаимодействий и анимаций для лендинга и кабинета.
 * Философия: всё, что прибывает (числа, карточки, ценовой блок), резко
 * тормозит у финала — как котировка, которая садится на место.
 *
 * CSP: только CSS (style-src 'self' 'unsafe-inline'). Скрипты — в motion.js.
 * Прогрессивное улучшение: пред-состояния reveal включаются ТОЛЬКО когда
 * motion.js добавил html.js и пользователь не просил reduced-motion, иначе
 * контент виден сразу (без FOUC и без зависимости от JS).
 */

:root{
  /* длительности */
  --dur-instant:90ms;   /* press/active */
  --dur-fast:150ms;     /* hover */
  --dur-base:240ms;
  --dur-slow:420ms;     /* reveal карточек */
  --dur-slower:680ms;   /* count-up обычных чисел */
  --dur-price:1050ms;   /* фирменный count-up справедливой цены */
  --dur-ticker:46s;     /* лента котировок */

  /* изинги — это "голос" системы */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);   /* "защёлк" */
  --ease-in-out:cubic-bezier(.76,0,.24,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1); /* не более 1 места на экран */

  /* геометрия/тени */
  --reveal-y:16px;
  --stagger:60ms;
  --stagger-dense:40ms;
  --shadow-1:0 2px 8px -3px rgba(38,36,31,.10);
  --shadow-2:0 14px 30px -18px rgba(38,36,31,.22);
  --shadow-3:0 24px 50px -24px rgba(38,36,31,.30);
  --glow-orange:0 8px 24px -8px rgba(221,122,60,.38);
  --ring:0 0 0 2px var(--cream,#FAF3E7),0 0 0 4px rgba(221,122,60,.55);
}

/* ---------- reveal при скролле ---------- */
/* Пред-состояние применяется только с JS и без reduced-motion. */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(var(--reveal-y));
  transition:opacity var(--dur-slow) var(--ease-out-quart),
             transform var(--dur-slow) var(--ease-out-expo);
  transition-delay:calc(min(var(--i,0),6) * var(--stagger));
  will-change:opacity,transform;
}
html.js [data-reveal].stagger-dense{
  transition-delay:calc(min(var(--i,0),6) * var(--stagger-dense));
}
html.js [data-reveal].is-in{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* ---------- count-up: резерв ширины, чтобы 0 layout-shift ---------- */
.count{font-variant-numeric:tabular-nums}

/* ---------- единый язык кнопок ---------- */
.btn{
  transition:transform var(--dur-fast) var(--ease-standard),
             background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:var(--dur-instant)}
.btn-orange:hover,.btn.primary:hover{box-shadow:var(--glow-orange)}

/* ---------- фокус с клавиатуры (не зависит от motion, WCAG) ---------- */
a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible{
  outline:none;
  box-shadow:var(--ring);
  border-radius:var(--radius-btn,10px);
}

/* ---------- растущее подчёркивание навигации ---------- */
.nav-links a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size var(--dur-base) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
  padding-bottom:2px;
}
.nav-links a:hover{background-size:100% 1px}

/* ---------- поля ввода (сердце fintech-продукта) ---------- */
input,select,textarea{
  transition:box-shadow var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--orange,#DD7A3C);
  box-shadow:0 0 0 3px rgba(221,122,60,.14);
  outline:none;
}

/* ---------- CSS-спиннер загрузки (кнопка "идёт анализ") ---------- */
.spinner{
  display:inline-block;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:kot-spin .7s linear infinite;vertical-align:-2px
}
@keyframes kot-spin{to{transform:rotate(360deg)}}

/* ---------- бегущий шиммер поверх реального прогресса ---------- */
.shimmer{position:relative;overflow:hidden}
.shimmer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transform:translateX(-100%);animation:kot-shimmer 1.3s ease-in-out infinite
}
@keyframes kot-shimmer{to{transform:translateX(100%)}}

/* ---------- лента котировок (marquee) ---------- */
.ticker{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;width:max-content;gap:0;animation:kot-marquee var(--dur-ticker) linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes kot-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- одноразовый "лок" ценового блока ---------- */
@keyframes kot-lock{
  0%{box-shadow:0 0 0 0 rgba(221,122,60,0)}
  30%{box-shadow:0 0 0 4px rgba(221,122,60,.28)}
  100%{box-shadow:0 0 0 0 rgba(221,122,60,0)}
}
.locked{animation:kot-lock var(--dur-price) var(--ease-out-expo)}

/* ---------- мягкое дыхание аватара Финика (только в футере) ---------- */
@keyframes kot-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.02)}}
.finik-avatar img{animation:kot-breathe 6s var(--ease-in-out) infinite}

/* ---------- reveal-панели кабинета появляются мягко ---------- */
html.js .panel[data-reveal]{transition:opacity var(--dur-slow) var(--ease-out-quart),transform var(--dur-slow) var(--ease-out-expo)}

/* ---------- pop бейджа результата ---------- */
@keyframes kot-pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
html.js .badge.pop{animation:kot-pop var(--dur-base) var(--ease-spring)}

/* ---------- отключаем тактильные эффекты там, где они неуместны ---------- */
@media (hover:none),(pointer:coarse){
  .tiltable{transform:none !important}
}

/* ---------- reduced-motion: мастер-тормоз, все финальные состояния целы ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html.js [data-reveal]{opacity:1 !important;transform:none !important}
  .ticker-track{animation:none !important;flex-wrap:wrap;width:auto}
  .finik-avatar img{animation:none !important}
}