/* Движение и материал.
   Отдельный файл, чтобы палитры и анимация не мешались: цвета живут в app.css,
   здесь — то, как всё это двигается и из чего сделано.

   Правило одно: анимируем только transform и opacity. Всё остальное браузер
   пересчитывает на каждом кадре и телефон начинает греться — на 15 парах с
   обновлением раз в 5 секунд это заметно сразу. */

:root{
  --dur-fast:.22s;
  --dur:.42s;
  --dur-slow:.7s;
  --out:cubic-bezier(.16,1,.3,1);          /* мягкое торможение, «дорогое» ощущение */
  --spring:cubic-bezier(.34,1.56,.64,1);   /* лёгкий перелёт — для нажатий */
  --smooth:cubic-bezier(.65,0,.35,1);
}

/* ─────────── Liquid Glass ───────────
   Включается переключателем: body[data-glass="on"]. Материал собирается слоями —
   размытие фона, спекулярный блик сверху, тонкая светящаяся кромка и медленно
   плывущее преломление. Прозрачность честная: сквозь карточку видно фон, поэтому
   под ней всегда есть подсветка, иначе текст теряет контраст. */
body[data-glass="on"]{
  --glass:blur(30px) saturate(1.8) brightness(1.06);
}
body[data-glass="on"] .card,
body[data-glass="on"] .toast,
body[data-glass="on"] .state-pill,
body[data-glass="on"] .pill,
body[data-glass="on"] input.amount{
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter:var(--glass);
  -webkit-backdrop-filter:var(--glass);
  border-color:color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent),
    0 12px 40px -18px rgba(0,0,0,.65);
  position:relative;
  overflow:hidden;
}
/* спекуляр: узкая световая полоса по верхней кромке, как на стекле */
body[data-glass="on"] .card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(160deg,
    color-mix(in srgb,#fff 16%,transparent) 0%,
    transparent 34%,
    transparent 66%,
    color-mix(in srgb,#fff 7%,transparent) 100%);
  opacity:.9;
}
/* медленно плывущий блик — «жидкость» в названии как раз про него */
body[data-glass="on"] .card::before{
  content:"";position:absolute;inset:-40%;pointer-events:none;
  background:radial-gradient(40% 30% at 30% 20%,
    color-mix(in srgb,var(--accent) 18%,transparent), transparent 70%);
  animation:liquid 14s var(--smooth) infinite alternate;
  will-change:transform;
}
@keyframes liquid{
  0%  {transform:translate3d(-6%,-4%,0) rotate(0deg) scale(1)}
  50% {transform:translate3d(8%,6%,0) rotate(8deg) scale(1.12)}
  100%{transform:translate3d(-4%,8%,0) rotate(-6deg) scale(1.05)}
}
body[data-glass="on"] nav{
  background:color-mix(in srgb, var(--bg) 45%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent),
             0 -12px 40px -20px rgba(0,0,0,.7);
}
/* на светлой теме белый блик не читается — гасим */
body[data-theme="light"][data-glass="on"] .card::after{opacity:.45}

/* ─────────── Нижняя панель ───────────
   Плавающая пилюля вместо полосы во всю ширину: не сливается с контентом,
   не спорит с системными жестами телефона и выглядит как отдельный элемент. */
nav{
  left:50%;right:auto;bottom:calc(12px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(94vw,520px);
  border-radius:26px;
  border:1px solid var(--line);
  padding:8px 6px;
  gap:2px;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.8);
  transition:transform var(--dur) var(--out), opacity var(--dur) var(--out);
}
nav.hidden{transform:translateX(-50%) translateY(150%);opacity:0}

nav button{
  position:relative;z-index:1;border-radius:20px;padding:8px 0 7px;
  transition:color var(--dur-fast) var(--out), transform var(--dur) var(--spring);
}
nav button:active{transform:scale(.92)}
nav .ico{
  font-size:21px;line-height:1;
  transition:transform var(--dur) var(--spring), filter var(--dur) var(--out);
}
nav button.on .ico{transform:translateY(-2px) scale(1.18)}
/* подпись появляется только у активной вкладки — меньше шума */
nav button span.txt{
  display:block;font-size:10px;font-weight:650;margin-top:3px;
  opacity:.55;max-height:14px;
  transition:opacity var(--dur) var(--out), transform var(--dur) var(--spring);
}
nav button.on span.txt{opacity:1;transform:translateY(-1px)}

/* индикатор, который переезжает за вкладкой */
nav .nav-pill{
  position:absolute;top:8px;bottom:8px;left:0;width:0;border-radius:20px;
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  box-shadow:0 8px 24px -14px var(--accent);
  transition:transform .52s var(--out), width .52s var(--out);
  z-index:0;pointer-events:none;
}

/* ─────────── Появление и переходы ─────────── */
@keyframes riseIn{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.985)}
  to  {opacity:1;transform:none}
}
.page.on{animation:riseIn var(--dur) var(--out) both}
.card.rise{animation:riseIn var(--dur) var(--out) both}

/* каскад: каждая следующая карточка стартует чуть позже предыдущей */
#desks .card:nth-child(1),#positions .card:nth-child(1),#top .card:nth-child(1),
#pairs .card:nth-child(1),#trades .card:nth-child(1),#news .card:nth-child(1){animation-delay:.02s}
#desks .card:nth-child(2),#positions .card:nth-child(2),#top .card:nth-child(2),
#pairs .card:nth-child(2),#trades .card:nth-child(2),#news .card:nth-child(2){animation-delay:.06s}
#desks .card:nth-child(3),#positions .card:nth-child(3),#top .card:nth-child(3),
#pairs .card:nth-child(3),#trades .card:nth-child(3),#news .card:nth-child(3){animation-delay:.10s}
#pairs .card:nth-child(n+4),#trades .card:nth-child(n+4),#news .card:nth-child(n+4){animation-delay:.14s}

/* ─────────── Микровзаимодействия ─────────── */
/* волна от пальца по нажатию */
.ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:color-mix(in srgb,var(--text) 22%,transparent);
  animation:ripple .6s var(--out) forwards}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}
.card,.pill,.btn,.theme{position:relative;overflow:hidden}

/* вспышка при изменении числа: зелёная на росте, красная на падении */
@keyframes flashUp{0%{color:var(--up);transform:translateY(-2px)}100%{transform:none}}
@keyframes flashDown{0%{color:var(--down);transform:translateY(2px)}100%{transform:none}}
.flash-up{animation:flashUp .8s var(--out)}
.flash-down{animation:flashDown .8s var(--out)}

/* полоска силы наливается плавно */
.bar > i{transition:width 1s var(--out), background .4s var(--out)}
/* кольцо процента доезжает с пружиной */
.gauge .arc{transition:stroke-dashoffset 1.1s var(--out), stroke .4s}
/* бегунок цены на шкале */
.track i{transition:left .9s var(--out)}

/* карточка пары выезжает снизу с лёгким затемнением фона */
.sheet{transition:transform .52s var(--out)}
.sheet::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);
  opacity:0;transition:opacity .5s var(--out);pointer-events:none}
.sheet.on::before{opacity:1}

/* графики появляются мягче */
img.chart,#botbox,#tvbox,.dealbox{animation:riseIn var(--dur-slow) var(--out) both}

/* уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ─────────── Спарклайны и мини-графики ───────────
   Рисуем инлайновым SVG, а не картинкой: он масштабируется под любой экран,
   красится темой через currentColor и не требует запроса к серверу. */
.spark{display:block;width:76px;height:26px;overflow:visible}
.spark path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw 1.1s var(--out) forwards}
.spark .fill{fill:currentColor;opacity:.12;stroke:none;animation:fadeIn .8s var(--out) .3s both}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:.12}}

.equity-mini{width:100%;height:56px;display:block;margin:6px 0 2px;overflow:visible}
.equity-mini path.line{fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw 1.4s var(--out) forwards}
.equity-mini path.area{stroke:none;fill:url(#eqgrad);animation:fadeIn 1s var(--out) .4s both}

/* ─────────── Тепловая карта ─────────── */
.heat{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.heat .tile{border-radius:12px;padding:10px 8px;text-align:center;
  animation:pop .5s var(--spring) both;transition:transform .3s var(--spring)}
.heat .tile:active{transform:scale(.94)}
.heat .tile b{display:block;font-size:13px;font-weight:700}
.heat .tile span{font-size:11px;opacity:.85;font-variant-numeric:tabular-nums}

/* ─────────── Кольцо распределения ─────────── */
.donut{width:132px;height:132px;flex:0 0 132px}
.donut circle{fill:none;stroke-width:16;transition:stroke-dasharray 1s var(--out)}
.legend{flex:1;display:flex;flex-direction:column;gap:7px;justify-content:center}
.legend .item{display:flex;align-items:center;gap:8px;font-size:13px}
.legend .swatch-sm{width:10px;height:10px;border-radius:3px;flex:0 0 10px}

/* ─────────── Таймлайн сделки ─────────── */
.timeline{position:relative;padding-left:22px;margin-top:10px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--accent),transparent);border-radius:1px}
.timeline .ev{position:relative;padding:7px 0;font-size:13px;
  animation:riseIn .45s var(--out) both}
.timeline .ev::before{content:"";position:absolute;left:-20px;top:12px;width:10px;height:10px;
  border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.timeline .ev.win::before{border-color:var(--up)}
.timeline .ev.loss::before{border-color:var(--down)}
.timeline .ev .t{color:var(--muted);font-size:11px}

/* ─────────── Бенчмарк ─────────── */
.vs{display:flex;gap:10px;align-items:stretch;margin-top:10px}
.vs .col{flex:1;text-align:center;padding:12px 8px;border-radius:14px;background:var(--surface-2)}
.vs .col b{display:block;font-size:19px;font-weight:750;font-variant-numeric:tabular-nums}
.vs .col span{font-size:11px;color:var(--muted)}
.star{font-size:15px;line-height:1;opacity:.35;transition:opacity .25s,transform .3s var(--spring)}
.star.on{opacity:1;transform:scale(1.15)}