/* моушен вкладок шапки (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; } }

/* въезд контента: tfx-in-r — со стороны справа (едем вправо), tfx-in-l — слева */
body > main.tfx-in-r { animation:tfx-in-r .18s ease-out both; }
body > main.tfx-in-l { animation:tfx-in-l .18s ease-out both; }
@keyframes tfx-in-r { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:none; } }
@keyframes tfx-in-l { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  .tn-pill, .tn-ghost { transition:none; }
  .tn.pop .tn-i, body > main.tfx-in-r, body > main.tfx-in-l { animation:none; }
  .tabs-nav.tfx .tn { transition:background-color .15s, color .15s, box-shadow .15s; }
  .tabs-nav.tfx .tn:active { transform:none; }
}