/* B, opcje sekcji (11.10, runda 2): Modele R1 „okaz" / R2 „wachlarz", Total Look T1 „z punktów" / T2 „stos".
   Wszystko wg standardu z koncepcje/jezyk-motion-design: karta 6 px z cieniem 0 30 70, wejście z głębi
   (blur 16 → 0, y 60 → 0, scale .6 → 1), wyjście w górę z rozmyciem, linie 1 px i kropki z obwódką,
   chipy mono, „wyostrzenie = przedmiot staje się tematem", ciągłość elementu, lekkie płynięcie po wejściu. */

/* litery nazwy aktywnej: wejście z rozmycia (standard tekstu); nazwy nieaktywne stoją */
.cl{display:inline-block}
.flash .cl{animation:rLet .45s var(--ease-out) both;animation-delay:calc(var(--i,0)*26ms)}
@keyframes rLet{from{opacity:0;filter:blur(10px);transform:translateY(.3em)}to{opacity:1;filter:none;transform:none}}

/* ---- Modele, wspólne: karta zamiast ramki, chip okazu, nazwa pod kartą na telefonie ---- */
.mB #reel{position:relative}
.mB #reel .reel__stage,.mB #rm3 .rm3__stage{border:0;background:transparent;border-radius:6px}
.rchip{position:absolute;left:10px;bottom:10px;z-index:5;font:400 9px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--paper);padding:4px 7px;opacity:0;filter:blur(6px);transform:translateY(4px);transition:opacity .45s var(--ease-out),filter .45s var(--ease-out),transform .45s var(--ease-out);pointer-events:none;white-space:nowrap}
.rchip.on{opacity:1;filter:none;transform:none}
.mB #reel .reel__list button{transition:color .4s var(--ease-state)}
.nm{display:inline-block}
.mB #reel .reel__list button .nm,.mB #reel .reel__list button .nm span{font:inherit;letter-spacing:inherit}
.mB #rm3 .rm3__label{display:none}
.rname{display:block;margin-top:14px;font-size:17px;color:var(--ink);line-height:1.2;min-height:1.2em}
.rname small{display:block;font:400 9px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.mB #rm3 .rm3__segs i{background:var(--line)}

/* R1 „okaz": jedna karta z cieniem, lekko płynie; stara twarz wychodzi w górę z rozmyciem (.35 s),
   nowa wchodzi z głębi (.7 s); w wierszu listy linia pomiarowa od numeru do nazwy z kropkami */
.mB.r1 #reel .reel__stage,.mB.r1 #rm3 .rm3__stage{overflow:hidden;background:var(--paper-2);box-shadow:0 30px 70px rgba(21,20,15,.22);animation:rFloat 5s ease-in-out infinite alternate}
@keyframes rFloat{from{translate:0 0}to{translate:0 -4px}}
.mB.r1 #reel .reel__img,.mB.r1 #rm3 .rm3__img{opacity:0;transform:translateY(40px) scale(.94);filter:blur(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .7s var(--ease-out)}
.mB.r1 #reel .reel__img.is-on,.mB.r1 #rm3 .rm3__img.is-on{opacity:1;transform:none;filter:none}
.mB.r1 #reel .reel__img.is-out,.mB.r1 #rm3 .rm3__img.is-out{opacity:0;transform:translateY(-24px);filter:blur(12px);transition-duration:.35s;transition-timing-function:cubic-bezier(.4,0,1,1)}
.rlink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:4}
.rlink .rl{fill:none;stroke:var(--ink);stroke-width:1;transition:stroke-dashoffset .5s var(--ease-out)}
.rlink .rd{fill:var(--ink);stroke:var(--paper);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:rDot .35s cubic-bezier(.34,1.56,.64,1) both}
@keyframes rDot{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.mB.r2 .rlink{display:none}

/* R2 „wachlarz": trzy karty w głębi; przednia ostra, dwie z tyłu rozmyte i dryfujące.
   Zmiana twarzy = przednia odchodzi w lewo-dół z rozmyciem (.45 s), następna wyostrza się i wysuwa do przodu (.8 s),
   nowa pojawia się z tyłu. Żadnej podmiany obrazu: każda karta niesie swoją twarz. */
.mB.r2 #reel .reel__stage,.mB.r2 #rm3 .rm3__stage{overflow:visible;background:transparent}
.mB.r2 #reel .reel__img,.mB.r2 #rm3 .rm3__img{border-radius:6px;box-shadow:0 30px 70px rgba(21,20,15,.22);background:var(--paper-2);transform-origin:0% 100%;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s var(--ease-out);opacity:0;transform:translate(14%,-14%) scale(.84);filter:blur(16px)}
.mB.r2 #reel .reel__img.p0,.mB.r2 #rm3 .rm3__img.p0{opacity:1;transform:scale(.88);filter:none;z-index:3}
.mB.r2 #reel .reel__img.p1,.mB.r2 #rm3 .rm3__img.p1{opacity:.92;transform:translate(6%,-6%) scale(.88);filter:blur(5px);z-index:2;animation:rDrift1 7s ease-in-out infinite alternate}
.mB.r2 #reel .reel__img.p2,.mB.r2 #rm3 .rm3__img.p2{opacity:.8;transform:translate(12%,-12%) scale(.88);filter:blur(9px);z-index:1;animation:rDrift2 9s ease-in-out infinite alternate}
.mB.r2 #reel .reel__img.px,.mB.r2 #rm3 .rm3__img.px{opacity:0;transform:translate(-10%,10%) scale(.88);filter:blur(12px);transition-duration:.45s;transition-timing-function:cubic-bezier(.4,0,1,1);z-index:4}
@keyframes rDrift1{from{translate:0 0}to{translate:0 -6px}}
@keyframes rDrift2{from{translate:0 0}to{translate:0 -9px}}
.mB.r2 .rchip{left:10px;bottom:10px}
.mB.r2 #reel .reel__bar{display:none}

/* ---- Total Look: kafle i kadr jako karty, własna choreografia zamiast produkcyjnego wygaszania ---- */
.mB .tlgrid{position:relative}
.mB .tlin,.mB .tlwin__out{border-radius:6px;box-shadow:0 30px 70px -24px rgba(21,20,15,.22)}
.mB .tlwin.play .tlin,.mB .tlwin.play .tlwin__out,.mB .tlwin.play .tlwin__status{animation:none}
.mB .tlwin__status{opacity:0;z-index:3;transition:opacity .4s var(--ease-state)}
.tlov{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}
.tghost{position:absolute;background-size:cover;background-position:center;border-radius:50%;box-shadow:0 6px 18px rgba(21,20,15,.18);transform-origin:center;will-change:transform,opacity;opacity:.6;filter:blur(.6px)}
.tdot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--paper);animation:tDot .5s var(--ease-out) backwards;transition:opacity .35s,filter .35s}
.tchipw{position:absolute;transform:translateY(-50%);font:400 9px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--paper);padding:4px 7px;white-space:nowrap;animation:tChip .6s var(--ease-out) backwards;transition:opacity .35s,filter .35s}
@keyframes tChip{from{opacity:0;transform:translateY(-50%) translateX(-4px)}to{opacity:1;transform:translateY(-50%)}}
@keyframes tDot{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.tdot.off,.tchipw.off{opacity:0;filter:blur(6px)}

/* ---- Total Look na telefonie (<=760 px): kadr u gory, cztery kafle jako miniatury w jednym rzedzie pod nim;
   calosc miesci sie na jednym ekranie, wiec widac naraz cztery rzeczy i jeden kadr ---- */
@media(max-width:760px){
  .mB.tlm .tlgrid{grid-template-columns:repeat(4,1fr);grid-template-areas:"out out out out" "t1 t2 t3 t4";gap:8px;align-items:start}
  .mB.tlm .tlgrid .tlwin__out{grid-area:out;align-items:center}
  .mB.tlm .tlgrid .tlwin__out .tlin__img{width:min(70%,260px)}
  .mB.tlm .tlgrid .tlwin__out figcaption{align-self:stretch;text-align:center}
  .mB.tlm .tlin--1{grid-area:t1}.mB.tlm .tlin--2{grid-area:t2}.mB.tlm .tlin--3{grid-area:t3}.mB.tlm .tlin--4{grid-area:t4}
  .mB.tlm .tlin figcaption{padding:7px 5px;font-size:8px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tchipw{font-size:8px;padding:3px 5px}
}

@media(prefers-reduced-motion:reduce){
  .mB.r1 #reel .reel__stage,.mB.r1 #rm3 .rm3__stage,.mB.r2 #reel .reel__img.p1,.mB.r2 #reel .reel__img.p2,.mB.r2 #rm3 .rm3__img.p1,.mB.r2 #rm3 .rm3__img.p2{animation:none}
  .flash .cl,.rlink .rd,.tdot,.tchipw{animation:none}
}