/* моушен вкладок шапки (tabsfx.js): скользящая пилюля, подсветка наведения, «оживающая» иконка, въезд контента.
   Только position/z-index/transform/opacity — размеры и отступы вкладок не меняются. Без класса .tfx на .tabs-nav всё как в rec.css */
.tabs-nav.tfx { position:relative; isolation:isolate; }
.tabs-nav.tfx .tn { position:relative; z-index:1; transition:background-color .15s, color .15s, box-shadow .15s, transform .12s; }
.tabs-nav.tfx .tn:active { transform:scale(.96); }
/* активную вкладку рисует пилюля, сама вкладка — прозрачная */
.tabs-nav.tfx .tn.on, html.tfx-wait .tabs-nav .tn.on { background:transparent; box-shadow:none; }

/* пилюля: left/width/transform задаёт JS; высота — на всю вкладку (под padding навигации) */
.tn-pill { position:absolute; z-index:0; top:3px; bottom:3px; left:0; width:0; border-radius:16px; pointer-events:none;
  background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.1), 0 0 0 1px var(--line);
  transition:transform .28s cubic-bezier(.3,1.25,.5,1), width .28s cubic-bezier(.3,1.25,.5,1); will-change:transform; }
.tn-pill.no-anim, .tn-ghost.no-anim { transition:none; }
@media (prefers-color-scheme: dark) { .tn-pill { background:var(--line); box-shadow:0 1px 3px rgba(0,0,0,.4); } }
/* те же цвета, что у .tn.on на этих страницах */
.dl .tabs-nav.tfx .tn-pill { background:#2A2A2E; box-shadow:0 1px 3px rgba(0,0,0,.4); }
/* в заголовке окна приложения у навигации padding 2px */
html.dk-tb .bar .tabs-nav.tfx .tn-pill, html.dk-tb .bar .tabs-nav.tfx .tn-ghost { top:2px; bottom:2px; }

/* подсветка наведения — только мышь */
.tn-ghost { display:none; }
@media (hover:hover) and (pointer:fine) {
  .tn-ghost { display:block; position:absolute; z-index:0; top:3px; bottom:3px; left:0; width:0; border-radius:16px; pointer-events:none; opacity:0;
    background:color-mix(in srgb, var(--text) 7%, transparent);
    transition:transform .2s ease, width .2s ease, opacity .15s; }
  .tn-ghost.show { opacity:1; }
}

/* иконка «оживает» на ~420 мс после выбора вкладки (анимируется сам svg) */
.tn.pop .tn-i { animation:tn-pop .42s ease-out; transform-origin:50% 50%; }
.tn.pop[data-tab=rec] .tn-i { animation-name:tn-pop-rec; transform-origin:50% 100%; }
.tn.pop[data-tab=talk] .tn-i { animation-name:tn-pop-talk; }
.tn.pop[data-tab=live] .tn-i { animation-name:tn-pop-live; }
@keyframes tn-pop-rec { 0% { transform:none; } 25% { transform:translateY(-3px) scaleY(1.2); } 50% { transform:scaleY(.9); } 75% { transform:translateY(-1.5px) scaleY(1.1); } 100% { transform:none; } }
@keyframes tn-pop-talk { 0% { transform:rotate(0); } 20% { transform:rotate(-12deg); } 45% { transform:rotate(9deg); } 70% { transform:rotate(-5deg); } 100% { transform:rotate(0); } }
@keyframes tn-pop-live { 0% { transform:scale(1); opacity:1; } 30% { transform:scale(1.18); opacity:.55; } 50% { transform:scale(1.12); opacity:1; } 70% { transform:scale(1.06); opacity:.75; } 100% { transform:scale(1); opacity:1; } }

/* 🔍 появление контента при смене вкладки — лёгкое приближение из чуть прозрачного (шапка не анимируется).
   Начальное состояние: html.tfx-wait (браузер, ставит i18n-boot.js до первой отрисовки) или .tfx-pre (приложение: скрытая вкладка
   держит его, пока скрыта). .tfx-zoom — переход; его первый кадр совпадает с начальным состоянием. Центр — верх экрана (JS уточняет) */
html.tfx-wait body > main, body > main.tfx-pre { opacity:.6; transform:scale(.985); transform-origin:50% 30vh; }
body > main.tfx-zoom { animation:tfx-zoom .24s cubic-bezier(.2,.8,.2,1) both; transform-origin:50% 30vh; }
@keyframes tfx-zoom { from { opacity:.6; transform:scale(.985); } to { opacity:1; transform:none; } }
@keyframes tfx-fade { from { opacity:.6; } to { opacity:1; } }

@media (prefers-reduced-motion: reduce) {
  .tn-pill, .tn-ghost { transition:none; }
  .tn.pop .tn-i { animation:none; }
  /* без масштаба — только короткое проявление */
  html.tfx-wait body > main, body > main.tfx-pre { transform:none; }
  body > main.tfx-zoom { animation:tfx-fade .15s ease-out both; }
  .tabs-nav.tfx .tn { transition:background-color .15s, color .15s, box-shadow .15s; }
  .tabs-nav.tfx .tn:active { transform:none; }
}

/* 🪶 приложение: страницу не видно (вкладка не на экране, окно в трее или свёрнуто — titlebar.js ставит html.dk-away) — все
   CSS-анимации на паузе: Chromium в приложении скрытую страницу не прячет и рисовал бы их кадры (волна, блики, точки) */
html.dk-away *, html.dk-away *::before, html.dk-away *::after { animation-play-state:paused !important; }

/* страница без своей вкладки (/download): ни одна .tn не .on — пилюлю не показываем (иначе она стоит на первой вкладке, будто выбрана) */
.tabs-nav.tfx:not(:has(.tn.on)) .tn-pill { opacity:0; }