/* Taśmociąg (propozycje/tasmociag, koncepcja A „Przeciąganie”): taśma, doki, skrzynia i chorągiewki zmian w sali Magazynu
   (elementy w .tsk: procenty sali, grubości w px sali skalowane transformem) oraz pasek i wiersze zmian na telefonie.
   Grafiki malowane z arkusza TC1 (propozycje/kosmos/grafika/tnij-tasmociag.py). Animacje tylko transform i opacity, każda raz. */
:root{--tc0:#4fb8ff;--tc1:#ff9f4a}
.z0{--z:var(--tc0)}.z1{--z:var(--tc1)}

/* ---------- sala ---------- */
.tsk .tc-ts,.tsk .tc-pole,.tsk .tc-dok,.tsk .tc-skr,.tsk .tc-chor,.tsk .tc-strz,.tsk .tc-plak{position:absolute;box-sizing:border-box;max-width:none}
/* warstwy: tył doku 150, taśma, blat w ruchu z polami i celownik środka 151, skrzynia 152, rama doku (korpus, bliższa futryna i poręcz, cień wlotu) 153, lampa 154, strzałki kierunku 155.
   Doki są w rzucie 3/4: taśma wchodzi we wlot między poręczami, skrzynia wjeżdża za bliższą poręcz i w cień wnętrza */
.tsk .tc-dok{z-index:150}
.tsk .tc-dok.rama{z-index:153}
/* lampa doku, do którego dojechała skrzynia: miękka poświata w kolorze zmiany */
.tsk .tc-lampa{position:absolute;z-index:154;border-radius:50%;background:radial-gradient(closest-side,#fff 0,var(--z) 30%,transparent 100%);animation:tcMig 2.4s ease-in-out 2.6s both}
.tsk .tc-ts{z-index:151}
/* blat w ruchu: pas żeber z oznaczeniami pól, przycięty do gumy między dokami; w odsłonie jedzie o jedno pole razem ze skrzynią (ten sam czas i krzywa co tcJedz),
   a że pola i żebra powtarzają się co pole, po jeździe wszystko stoi jak przed nią. Szyna, stopki i celownik środka stoją */
.tsk .tc-blat{position:absolute;overflow:hidden;z-index:151}
.tsk .tc-jad{position:absolute;top:0;height:100%}
.tsk .tc-jad.jedzie{animation:tcBlat .9s cubic-bezier(.5,0,.3,1) 1.6s both}
.tsk .tc-gum{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none}
.tsk .tc-pole{z-index:151}
.tsk .tc-skr{z-index:152}
.tsk .tc-skr.jedzie{animation:tcJedz .9s cubic-bezier(.5,0,.3,1) 1.6s both}
/* strzałki kierunku: na blacie przed skrzynią, widać je tuż przed jazdą i gasną, gdy skrzynia rusza */
.tsk .tc-strz{z-index:155;animation:tcStrz .8s 1.1s both}
.tsk .tc-strz.l{transform:scaleX(-1)}
.tsk .tc-chor{z-index:130}
.tsk .tc-chor.wch{animation:tcPoj .4s 2.6s both}
/* plakietka zmiany: malowana tabliczka, napis w polu, dolna listwa w kolorze zmiany */
.tsk .tc-plak{z-index:160;background:url(img/orbita/tasmociag/plakietka.webp) center/100% 100% no-repeat;animation:tcPoj .3s 1.1s both}
.tsk .tc-plak span{position:absolute;left:8%;right:8%;top:14%;height:60%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--display);font-size:2.7px;line-height:1.1;letter-spacing:.05em;white-space:nowrap;color:#dfe5ff}
.tsk .tc-plak b{display:block;font-weight:400;font-size:5.4px;line-height:1.1;color:#fff}
.tsk .tc-plak i{position:absolute;left:7.5%;right:7.5%;top:80.5%;height:13%;background:var(--z)}
@keyframes tcJedz{from{transform:translateX(calc(var(--od)*100%))}to{transform:none}}
@keyframes tcBlat{to{transform:translateX(calc(var(--dx)*100%))}}
@keyframes tcPoj{from{opacity:0}to{opacity:1}}
@keyframes tcStrz{0%{opacity:0}25%,70%{opacity:1}100%{opacity:0}}
@keyframes tcMig{0%{opacity:0}12%,37%,62%,87%{opacity:.95}25%,50%,75%{opacity:.3}100%{opacity:.6}}

/* ---------- telefon: zmiana nad pytaniem, obie zmiany w odsłonie; kolor zmiany to wypełniona zakładka, nie obwódka ---------- */
.tc-zm{display:flex;align-items:center;gap:10px;background:rgba(13,16,48,.9);border:2px solid #2a3166;border-left:8px solid var(--z);padding:6px 8px 4px;margin:0 0 6px}
.tc-zm>b{flex:1;min-width:0;font:400 10px/1.3 var(--display);letter-spacing:.04em;color:var(--z)}
.tc-zm>strong{font:400 17px var(--display);color:#fff;white-space:nowrap}
.tc-tws{display:flex;gap:6px;align-items:flex-start}
.tc-tw{position:relative;display:flex;flex-direction:column;align-items:center;width:46px}
.tc-tw img{width:36px;height:36px;max-width:none;border-radius:50%;background:#0b0f1f}
.tc-tw::after{content:"";width:26px;height:5px;margin-top:2px;background:var(--z);border:1px solid #05060f}
.tc-tw em{font-style:normal;font-family:var(--tresc);font-size:9px;line-height:1.1;margin-top:1px;color:#cfd5f5;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tc-tw.cz img,.tc-tw.zle img{opacity:.38}
.tc-tw.ok::before,.tc-tw.zle::before{content:"";position:absolute;right:2px;top:-2px;z-index:2;width:14px;height:14px;background:url(img/orbita/ikony/tak.webp) center/contain no-repeat}
.tc-tw.zle::before{background-image:url(img/orbita/ikony/nie.webp)}
/* więcej niż cztery osoby w zmianie: twarze ciaśniej i bez ksywek */
.tc-tws:has(.tc-tw:nth-child(5)){gap:2px}
.tc-tws:has(.tc-tw:nth-child(5)) .tc-tw{width:28px}
.tc-tws:has(.tc-tw:nth-child(5)) .tc-tw img{width:26px;height:26px}
.tc-tws:has(.tc-tw:nth-child(5)) .tc-tw::after{width:18px}
.tc-tws:has(.tc-tw:nth-child(5)) .tc-tw em{display:none}
.tc-zm:has(.tc-tw:nth-child(5))>b{font-size:8px}
/* pasek taśmy na telefonie przy podłączonym telewizorze: doki zmian, pola, skrzynia */
.tc-pas{display:grid;gap:3px;height:42px;margin:0 0 6px}
.tc-pas i{background:url(img/orbita/tasmociag/dok-0.webp) center/contain no-repeat}
.tc-pas i.z1{background-image:url(img/orbita/tasmociag/dok-1.webp)}
.tc-pas u{position:relative;background:#1c2038;border:2px dashed rgba(255,255,255,.2);text-decoration:none}
.tc-pas u.st{border-style:solid;border-color:rgba(255,255,255,.4)}
.tc-pas u img{position:absolute;left:50%;bottom:2px;height:36px;max-width:none;transform:translateX(-50%)}
/* odsłona: jedna, dobra odpowiedź na całą szerokość */
.ans.tc-jedna{grid-template-columns:1fr}
.ans.tc-jedna .a{grid-column:1/-1}