/* Obrazovky produktů v zařízeních (zadání § 4.9 B a C): písma a modely zařízení.
   Tahle část blokuje první vykreslení (zařízení v heru). Obsah obrazovek je v obrazovky-ui.css: načte ho site.js
   hned po HTML bez blokování (W5, výkon), bez JS <noscript> v hlavičce. Rámeček zařízení je ve vizuálu webu. */

@font-face{font-family:"Bebas Neue";src:url(../fonts/bebas-neue.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Share Tech Mono";src:url(../fonts/share-tech-mono.woff2) format("woff2");font-weight:400;font-display:swap}

/* ---------- zařízení ----------
   Bez JS jednoduchý rámeček v poměrech skutečného zařízení. S JS (třída dv3) z něj zarizeni.js postaví model
   z vrstev v CSS 3D: plochy mají počátek vlevo nahoře a matici počítá skript, --mm = px na milimetr. */
.dev{position:relative;margin:0;flex:none}
.scr{position:relative;container-type:inline-size;overflow:hidden;background:#000}
/* obrazovky víkendu a pracoviště (pod úvodní obrazovkou): mimo obraz se nerozvrhují, první vykreslení stránky je o polovinu rychlejší (W5) */
.wk .scr,.wb .scr{content-visibility:auto}
.dev:not(.dv3){width:100%}
.dev-win:not(.dv3){background:linear-gradient(#2a2c30,#222428);border-radius:1.5% 1.5% .8% .8% / 2.2% 2.2% 1.2% 1.2%;padding:4.7% 1.9% 14.7%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.dev-win:not(.dv3) .scr{aspect-ratio:16/9}
.dev-mac:not(.dv3){background:#0a0a0b;border-radius:3.1% 3.1% .8% .8% / 4.5% 4.5% 1.2% 1.2%;padding:2.9% 2.3% 7.6%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 0 0 3px #b8bcc1}
.dev-mac:not(.dv3) .scr{aspect-ratio:2560/1664;border-radius:1% 1% 0 0}
.dev-ipad:not(.dv3){background:#08090a;border-radius:6.8% / 4.8%;padding:4.8%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 0 0 2px #3a3b3f}
.dev-ipad:not(.dv3) .scr{aspect-ratio:1668/2420;border-radius:2.2% / 1.5%}
.dev-phone:not(.dv3){background:#050506;border-radius:17.3% / 8.3%;padding:3.4%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 0 0 3px #a29e95}
.dev-phone:not(.dv3) .scr{aspect-ratio:402/874;border-radius:15.5% / 7.1%}
.dev-and:not(.dv3){background:#050506;border-radius:13.3% / 6.3%;padding:4.9%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),inset 0 0 0 3px #2d2e31}
.dev-and:not(.dv3) .scr{aspect-ratio:412/925;border-radius:9.5% / 4.2%}
.dev-reader:not(.dv3){display:none}
.dev-phone .island{position:absolute;left:50%;top:1.26%;width:31.1%;height:4.24%;border-radius:999px;background:#000;transform:translateX(-50%);z-index:36}
.dev-and .punch{position:absolute;left:50%;top:1.3%;width:4.9%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 38%,#1d2633 0 22%,#050506 40%);transform:translateX(-50%);z-index:36}
.dev-mac .notch{position:absolute;left:50%;top:0;width:11.4%;height:calc(100cqw / 40);background:#000;border-radius:0 0 calc(100cqw / 110) calc(100cqw / 110);transform:translateX(-50%);z-index:36}
.dev-mac .notch::after{content:"";position:absolute;left:50%;top:38%;width:9%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 38%,#26324a 0 25%,#08090b 45%);transform:translate(-50%,-50%)}

/* model (zarizeni.js) */
.dv3{position:absolute;left:0;top:0;width:0;height:0;margin:0}
.dv3 .f{position:absolute;left:0;top:0;transform-origin:0 0;box-sizing:border-box}
.dv3.moving .f{will-change:transform}
.dv3 .scr{position:absolute;z-index:1}
.dv3 .dv-shd{position:absolute;inset:0;background:#000;opacity:0;border-radius:inherit;pointer-events:none;z-index:50}
/* vypnutý displej: černé sklo (jemný přechod a odraz), nikdy plochá černá; světlou hranu dává rámeček */
.dv3 .dv-dk{position:absolute;inset:0;opacity:1;z-index:40;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,0) 0 30%,rgba(255,255,255,.07) 36%,rgba(255,255,255,.02) 44%,rgba(255,255,255,0) 52%),linear-gradient(165deg,#1d2026 0%,#0c0d10 38%,#060708 72%,#0d0f12 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
/* zamčená obrazovka při odchodu telefonu a iPadu: tapeta, zámek a čas */
.dv3 .dv-lock{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;visibility:hidden;color:#fff;text-align:center;font:600 calc(100cqw / 25) / 1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  background:linear-gradient(118deg,transparent 38%,rgba(240,192,0,.16) 38.4%,rgba(240,192,0,.16) 41%,transparent 41.4%),linear-gradient(165deg,#25344d 0%,#141b2a 45%,#0a0d14 100%)}
.dv3 .dv-lock-ic{display:block;position:relative;width:1em;height:1.35em;margin:3.6em auto 0}
.dv3 .dv-lock-ic::before{content:"";position:absolute;left:.17em;right:.17em;top:0;height:.62em;border:.13em solid #fff;border-bottom:0;border-radius:.4em .4em 0 0}
.dv3 .dv-lock-ic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.74em;border-radius:.18em;background:#fff}
.dv3 .dv-lock-t{display:block;margin-top:.3em;font-size:4.6em;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.dv3.dev-ipad .dv-lock{font-size:calc(100cqw / 38)}
.dv3 .dv-gl{position:absolute;top:0;bottom:0;left:-100%;width:300%;pointer-events:none;z-index:41;opacity:.55;
  background:linear-gradient(113deg,transparent 0 41%,rgba(255,255,255,.08) 46.5%,rgba(255,255,255,.03) 51%,transparent 57%),linear-gradient(113deg,transparent 0 56%,rgba(255,255,255,.035) 58%,transparent 61%)}
.dv3 .dv-band,.dv3 .dv-btn{background-image:linear-gradient(transparent calc(100% - 1.3px),rgba(255,255,255,.42))}
.dv3 .dv-barrel{background-image:linear-gradient(rgba(255,255,255,.08),transparent)}
/* pracoviště (W7): pant pod víkem bez desky a stín na neviditelné podložce */
.dv3 .dv-hinge{border-radius:0 0 calc(var(--mm) * 2.6) calc(var(--mm) * 2.6);background:linear-gradient(#0d0e10,#2a2c30 38%,#16171a 78%,#0b0c0d)}
.dv3.dev-win .dv-hinge{border-radius:0 0 calc(var(--mm) * 3.5) calc(var(--mm) * 3.5);background:linear-gradient(#111214,#3a3d42 42%,#1c1d20 80%,#0e0f10)}
.dv3 .dv-pod{border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.30),rgba(0,0,0,.14) 55%,rgba(0,0,0,0))}
/* stíny: předkreslené vrstvy, při pohybu se jen posouvají */
.dv3 .dv-flr{background:radial-gradient(closest-side,rgba(0,0,0,.36),rgba(0,0,0,.15) 62%,rgba(0,0,0,0))}
.dv3 .dv-flc{border-radius:calc(var(--mm) * 9);background:rgba(0,0,0,.45);box-shadow:0 0 calc(var(--mm) * 3) calc(var(--mm) * 1) rgba(0,0,0,.38)}
.dv3 .dv-amb{background:radial-gradient(closest-side,rgba(0,0,0,.34),rgba(0,0,0,.2) 45%,rgba(0,0,0,.06) 78%,rgba(0,0,0,0))}
/* telefon: iPhone 16 Pro (titan, Dynamic Island), Pixel 9 (hliník, průstřel kamery) */
.dv3 .dv-front{overflow:hidden;background:#050506}
.dv3.dev-phone .dv-front{border-radius:calc(var(--mm) * 12.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 0 0 calc(var(--mm) * .75) #a39f96,inset 0 0 0 calc(var(--mm) * .75 + 1px) #121212}
.dv3.dev-phone .scr{border-radius:calc(var(--mm) * 10.3)}
.dv3.dev-and .dv-front{border-radius:calc(var(--mm) * 9.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 0 0 calc(var(--mm) * .9) #2c2d30,inset 0 0 0 calc(var(--mm) * .9 + 1px) #0c0c0d}
.dv3.dev-and .scr{border-radius:calc(var(--mm) * 6.2)}
/* iPad Pro 11″: stejné rámečky, kamera na delší hraně */
.dv3.dev-ipad .dv-front{border-radius:calc(var(--mm) * 12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 0 0 calc(var(--mm) * .6) #3b3c40,inset 0 0 0 calc(var(--mm) * .6 + 1px) #070708}
.dv3.dev-ipad .dv-front::after{content:"";position:absolute;right:calc(var(--mm) * 3.4);top:50%;width:calc(var(--mm) * 2);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 38%,#24324a 0 22%,#0b0c0e 46%);transform:translateY(-50%);z-index:2}
.dv3.dev-ipad .scr{border-radius:calc(var(--mm) * 3.5)}
/* MacBook Air 13″: hliník, černý rámeček s hliníkovou hranou, výřez kamery, zaoblené horní rohy displeje */
.dv3.dev-mac .dv-lidin{overflow:hidden;border-radius:calc(var(--mm) * 9.5) calc(var(--mm) * 9.5) calc(var(--mm) * 2.5) calc(var(--mm) * 2.5);
  background:linear-gradient(to top,#18191b 0,#18191b calc(var(--mm) * 3.5),#09090a calc(var(--mm) * 3.5));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 0 0 calc(var(--mm) * 1.1) #b7bbc0,inset 0 0 0 calc(var(--mm) * 1.1 + 1px) #050505}
.dv3.dev-mac .scr{border-radius:calc(var(--mm) * 3.2) calc(var(--mm) * 3.2) 0 0}
.dv3.dev-mac .dv-lidout{border-radius:calc(var(--mm) * 2.5) calc(var(--mm) * 2.5) calc(var(--mm) * 9.5) calc(var(--mm) * 9.5);background:linear-gradient(170deg,#e2e5e9,#cbcfd4 55%,#bfc3c8)}
.dv3.dev-mac .dv-deck{border-radius:calc(var(--mm) * 9.5);background:linear-gradient(#d1d4d9,#d9dce0 30%,#cfd3d8)}
/* notebook s Windows: grafitový plast, silnější rámeček a brada, kamera s krytkou, pant přes celou šířku */
.dv3.dev-win .dv-lidin{overflow:hidden;border-radius:calc(var(--mm) * 4.5) calc(var(--mm) * 4.5) calc(var(--mm) * 2.5) calc(var(--mm) * 2.5);background:linear-gradient(#26282c,#1f2124);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 0 0 calc(var(--mm) * .8) #2e3034}
.dv3.dev-win .dv-lidin::before{content:"";position:absolute;left:50%;top:calc(var(--mm) * 4.8);width:calc(var(--mm) * 2.4);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 38%,#2b3a52 0 24%,#0a0b0d 50%);transform:translate(-50%,-50%);box-shadow:0 0 0 calc(var(--mm) * .5) #17181a}
.dv3.dev-win .dv-lidin::after{content:"";position:absolute;left:calc(50% + var(--mm) * 3);top:calc(var(--mm) * 4.8);width:calc(var(--mm) * 5);height:calc(var(--mm) * 1.6);border-radius:calc(var(--mm) * .8);background:#2c2e32;transform:translateY(-50%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dv3.dev-win .scr{border-radius:0}
.dv3.dev-win .dv-lidout{border-radius:calc(var(--mm) * 2.5) calc(var(--mm) * 2.5) calc(var(--mm) * 4.5) calc(var(--mm) * 4.5);background:linear-gradient(170deg,#41444a,#33363b 55%,#2d3034)}
.dv3.dev-win .dv-deck{border-radius:calc(var(--mm) * 6.5);background:linear-gradient(#303338,#383b40 30%,#33363b)}
.dv3 .kb{position:absolute;inset:0;width:100%;height:100%;display:block}
/* ruční 2D čtečka čárových kódů */
.dv3 .dv-rd svg,.dv3 .rd-s{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
/* vrstva efektů: kabel čtečky, záměrná čára a blik osvětlení */
.dv-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.dv-fx .cab{fill:none;stroke:#141517;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dv-fx .cab-h{fill:none;stroke:rgba(255,255,255,.16);stroke-width:.8;stroke-linecap:round}
.dv-fx .aim{fill:none;stroke:#ff2a1a;stroke-width:2;stroke-linecap:round;opacity:0}
.dv-fx .aim-g{fill:none;stroke:rgba(255,40,20,.35);stroke-width:8;stroke-linecap:round;opacity:0}
.dv-fx .ill{opacity:0}
.dv-fx .plug{fill:none;stroke:#1b1c1f;stroke-linecap:round}