/* ================================================================
   STRONA GLOWNA - dodatki ponad um-core-1.css

   Suwak z nagraniami siedzi w tej samej ramce co wykres frametime
   obok (proporcje bierze z .ba), wiec obie kolumny maja rowna
   wysokosc, a klipy wypelniaja kadr w calosci. Sa z dwoch roznych
   gier i maja rozne rozdzielczosci, wiec kadruje je object-fit:cover
   z warstwy bazowej. Klikniecie w lewa albo prawa polowe wlacza
   dzwiek tego klipu i lekko przybliza obraz.
   ================================================================ */
.ba[data-ba="video"] video{transition:transform .7s var(--ez)}
.ba[data-ba="video"].zoom video{transform:scale(1.08)}
.ba[data-ba="video"].zoom{border-color:color-mix(in srgb,var(--acc) 60%,transparent);
  box-shadow:0 30px 90px -46px color-mix(in srgb,var(--acc) 85%,transparent)}

.ba__snd{position:absolute;right:1.1rem;bottom:1.1rem;z-index:6;
  width:38px;height:38px;display:grid;place-items:center;pointer-events:none;
  border:1px solid var(--line);border-radius:50%;color:var(--ink3);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:color .3s var(--ez),border-color .3s var(--ez)}
.ba[data-ba="video"]:hover .ba__snd{color:var(--ink)}
.ba[data-ba="video"].zoom .ba__snd{color:var(--acc-lite);
  border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.ba__i{width:18px;height:18px;display:block}
.ba__i--on{display:none}
.ba[data-ba="video"].zoom .ba__i--on{display:block}
.ba[data-ba="video"].zoom .ba__i--off{display:none}

/* strona, ktora aktualnie gra, dostaje mocniejsza etykiete */
.ba[data-glos="przed"] .ba__lbl--l,
.ba[data-glos="po"] .ba__lbl--r{color:var(--ink);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 55%,transparent)}

@media(prefers-reduced-motion:reduce){
  .ba[data-ba="video"].zoom video{transform:none}
}