/* ─────────────────────────────────────────────────────────────────────────
   Wuji — motion.css: движение и адаптивность поверх основных стилей.
   Подключать после <style> в index.html: <link rel="stylesheet" href="motion.css">
   Цвета, шрифты и сетку не трогает. Всё работает без JS-хуков; хуки
   (/* ── Ключевые кадры ── */
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes m-fold{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes m-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes m-ring{from{transform:scale(1);opacity:.55}to{transform:scale(1.55);opacity:0}}
@keyframes m-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes m-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes m-livebar{0%,100%{border-left-color:var(--red)}50%{border-left-color:var(--hair)}}
@keyframes m-blink{50%{opacity:.25}}

/* ── Смена экрана: хук /* ── Лента «Пульс»: карточки ──
   .sw.new — хук: JS ставит на карточки, которых не было до опроса. */
.sw{.sw.new{animation:m-rise var(--t-slow) var(--ease-out) both}
.msg{transition:border-color var(--t-mid) ease,color var(--t-mid) ease}
.sw-l,.sw-r{transition:opacity var(--t-fast) ease}
.msg .mini{transition:background-color var(--t-fast) ease,color var(--t-fast) ease}

/* ── Раскрывашка <details class="fold"> ── */
details.fold summary .ms{transition:transform var(--t-mid) var(--ease-out)}
details.fold[open]>:not(summary){animation:m-fold .28s var(--ease-out) both}
/* там, где умеют анимировать высоту details — плавное раскрытие */
@supports selector(::details-content) and (interpolate-size:allow-keywords){
  details.fold{interpolate-size:allow-keywords}
  details.fold::details-content{details.fold[open]::details-content{height:auto}
}

/* ── Отклик на нажатие ── */
.btn{transition:opacity var(--t-fast) ease,transform var(--t-fast) ease,background-color var(--t-fast) ease,color var(--t-fast) ease}
.btn:active{transform:scale(.985)}
.btn[disabled]{transition:opacity var(--t-mid) ease}
.ln.act,.truck,.tile{transition:background-color var(--t-slow) ease,color var(--t-slow) ease}
.ln.act:active,.truck:active,.tile:active{transition-duration:var(--t-fast)}
.tick{transition:background-color var(--t-fast) ease,color var(--t-fast) ease}
.x{transition:color var(--t-fast) ease}
.seg button{transition:background-color var(--t-fast) ease,color var(--t-fast) ease}
.micbig{transition:transform .15s var(--ease-out),background-color var(--t-mid) ease,color var(--t-mid) ease,opacity var(--t-mid) ease}
.cap-clear,.cap-write{transition:color var(--t-fast) ease,background-color var(--t-fast) ease}
.cap-clear:active,.cap-write:active{background:var(--fill)}

/* ── Нижний ряд ── */
.tab{transition:color var(--t-mid) ease,border-color var(--t-mid) ease}
.tab .ms{transition:transform .15s var(--ease-out)}
.tab:active .ms{transform:scale(.86)}
.tab .badge{animation:m-pop .25s var(--ease-out) both}


.navbar .bar{display:block;opacity:0;transition:opacity var(--t-mid) ease}
.navbar .bar::after{animation-play-state:paused}
.navbar.wait .bar{opacity:1}
.navbar.wait .bar::after{animation-play-state:running}
.navbar.msg #navaux{animation:m-fade var(--t-mid) ease both}
#navaux{transition:color var(--t-mid) ease}

/* ── Окна ── */
.scrim{transition:opacity var(--t-mid) ease}
.sheet{transition:opacity .2s ease,transform .26s var(--ease-sheet)}
.sheet.bottom{transform:translate3d(0,40px,0)}
.sheet.bottom.open{transform:translate3d(0,0,0)}
.tiles .tile{animation:m-rise .28s var(--ease-out) both}
.tiles .tile:nth-child(2){animation-delay:.03s}
.tiles .tile:nth-child(3){animation-delay:.06s}
.tiles .tile:nth-child(4){animation-delay:.09s}
.tiles .tile:nth-child(5){animation-delay:.12s}
.tiles .tile:nth-child(n+6){animation-delay:.14s}

/* ── Прогресс-бары ──
   .prog>i — хук для viewJob вместо inline-стилей; ширину JS меняет у живого
   элемента, тогда сработает переход (при innerHTML-перерисовке он не играет). */
.prog{height:6px;background:var(--hair);position:relative;overflow:hidden}
.prog>i{position:absolute;left:0;top:0;bottom:0;display:block;background:var(--ink);transition:width .6s var(--ease-out)}
.prog.fail>i{background:var(--red)}
.sq.run{animation:m-blink 1s infinite}

/* ── Захват: микрофон и диалог ──
   Пульс через кольцо на трансформе (компонуется GPU), вместо box-shadow. */
.micbig{position:relative}
.micbig.on{animation:none}
.micbig.on::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);pointer-events:none;animation:m-ring 1.1s ease-out infinite}
.micbig.speak .ms{animation:m-breathe 1s ease-in-out infinite}
.cap-dlg>.q:last-child,.cap-dlg>.a:last-child,.dlg>.q:last-child,.dlg>.a:last-child{animation:m-rise .25s var(--ease-out) both}
.cap-dlg .a.live,.dlg .a.live{animation:m-livebar 1.2s ease-in-out infinite}
#cap-st{transition:color var(--t-mid) ease}

/* ── Скелетоны: хук .skel для «загружаю…» ── */
.skel{position:relative;background:linear-gradient(90deg,var(--fill) 25%,var(--hair) 50%,var(--fill) 75%);background-size:200% 100%;animation:m-shimmer 1.4s linear infinite;color:transparent;pointer-events:none}
.skel.line{height:12px;margin:8px 0}
.skel.big{height:56px;margin-top:10px;width:70%}
.skel.row{min-height:var(--tap);border-bottom:1px solid var(--hair);background-clip:content-box;padding:14px 20px}
#loader .w{animation:m-fade .4s ease both}

/* ── Указатель: ховер только там, где он есть ── */
@media (hover:hover) and (pointer:fine){
  .btn:hover{opacity:.85}
  .btn.ghost:hover{opacity:1;background:var(--fill)}
  .ln.act:hover,.truck:hover,.tile:hover{background:var(--fill)}
  .x:hover{color:var(--ink)}
  .tab:not([aria-selected="true"]):not([data-tab="pulse"]):hover{color:var(--ink-2)}
  .msg .mini:hover{background:var(--fill)}
}

/* ─────────────────────────────────────────────────────────────────────────
   Адаптивность
   ───────────────────────────────────────────────────────────────────────── */

/* маленькие телефоны (320–359px): цифры чуть меньше, две колонки в одну */
@media (max-width:359px){
  .big{font-size:56px}
  .big small{font-size:32px}
  .two-col .big.mid{font-size:30px}
  .tabbar{gap:8px}
  .tab{width:54px}
  .tiles{gap:8px}
}
@media (max-width:339px){
  .two-col{grid-template-columns:1fr}
  .two-col>*:first-child{border-right:0;border-bottom:1px solid var(--hair)}
  .stats{grid-template-columns:1fr 1fr}
}

/* большие телефоны (430–599px): чуть больше воздуха */
@media (min-width:430px) and (max-width:599px){
  .big{font-size:70px}
  .tabbar{gap:22px}
  .tab{width:64px}
  .tiles{gap:12px}
}

/* планшет (600–899px): контент колонкой по центру, плитки 4 в ряд */
@media (min-width:600px) and (max-width:899px){
  #view{max-width:720px;margin:0 auto}
  .sheet{max-width:720px;margin:0 auto}
  .tabbar{gap:36px}
  .tab{width:76px}
  .tiles{grid-template-columns:repeat(4,1fr);gap:12px}
  .big{font-size:72px}
  .two-col .big.mid{font-size:40px}
  .kv b{font-size:19px}
  .kv.sub b{font-size:16px}
  .tmap{height:320px}
  .sheet.bottom{max-height:60vh}
}

/* ландшафт на телефоне (<900px, высота ≤500px): компактные шапка, ряд и цифры */
@media (orientation:landscape) and (max-height:500px) and (max-width:899px){
  :root{--head:32px}
  .navbar{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  #scroll{left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);padding-bottom:calc(52px + var(--bot))}
  .tabbar{height:calc(40px + var(--bot));gap:28px;padding-bottom:var(--bot);align-items:center}
  .tab{width:auto;height:40px;flex-direction:row;gap:8px;padding:0 6px;border-top-width:2px}
  .tab .ms{font-size:20px}
  .tab .badge{position:static;margin-left:2px}
  .blk{padding:12px 20px 10px}
  .big{font-size:44px;margin-top:6px}
  .big small{font-size:26px}
  .big.mid{font-size:32px}
  .two-col>*{padding:12px 20px 10px}
  .stats{margin-top:10px}
  .sh{padding-top:10px}
  .chart svg{max-height:96px}
  .tiles{grid-template-columns:repeat(5,1fr)}
  .tile{aspect-ratio:auto;min-height:64px;gap:4px}
  .tile .ms{font-size:24px}
  .sheet.bottom{max-height:88vh}
  .tmap{height:160px}
  .cap-dock{padding:10px 0 calc(2px + var(--bot))}
  .micbig{width:56px;height:56px}
  .micbig .ms{font-size:26px}
  .on-capture #scroll{padding-bottom:calc(110px + var(--bot))}
  .cap-clear,.cap-write{width:40px;height:40px}
}
/* ландшафт на десктопной раскладке (≥900px, низкое окно): меню слева теснее */
@media (min-width:900px) and (max-height:500px){
  .tabbar{padding:8px 0;gap:0}
  .tab{height:40px}
  .big{font-size:56px}
}

/* ─────────────────────────────────────────────────────────────────────────
   Меньше движения — выключаем всё; индикаторы ожидания остаются статичными
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .navbar .bar::after,#loader .l::after{animation:none!important;width:100%;opacity:.5;transform:none}
  .navbar .bar{display:none}
  .navbar.wait .bar{display:block}
  .micbig.on::before{display:none}
  .micbig.on{background:var(--red)}
  .skel{background:var(--fill)}
  .sw.new,#scroll{scroll-behavior:auto}
}