/* AUTOGENEROVANO CORALEM, neupravovat.
 * Zdroj pravdy je stejnojmenny .less soubor, tento .css se pri kazde
 * synchronizaci prepisuje. Upravy delej v .less souboru. */
/* Zlatá hodinka, obraz na zdi (body 82 a 83). Skutečné interiéry, v každém
   výtisk z tiskárny ve střídmém rámu ve skutečné velikosti vůči nábytku,
   ve světle místnosti a se stínem na zdi. Šipky stojí těsně u rámu, pod
   rámem název místnosti a rozměr obrazu. */
/* .zh-scena z komponenty má min-height 100vh a načítá se později, proto dvojitá třída.
   Zlatá hodinka 100: delší zastavení, ať je výtisk na zdi chvíli vidět.
   Zlatá hodinka 146: výtisk se do rámu vkládá až po dosednutí scény. */
.zh-scena.zh-mock {
  min-height: 270vh;
  overflow: clip;
  /* vodorovné tažení prstem přepíná místnosti, svislé roluje stránku */
  touch-action: pan-y;
}
/* ─────────────────────────────  geometrie  ───────────────────────── */
/* Každá místnost nese svoje čísla (007-mockupy.php): a poměr stran fotky,
   ax a ay střed rámu na fotce, f výška rámu na fotce, r poměr stran rámu,
   p výška rámu na obrazovce. Rám stojí nahoře v okně (--zh-t), napravo od
   karty kroku (šířka --zh-karta-sirka z jádra, Zlatá hodinka 117), a fotka
   místnosti je přesně tak velká, aby na ní rám měl skutečnou velikost
   a zároveň pokryla celé okno. Když pokrytí chce víc, roste
   s fotkou i rám (--zh-P), velikost vůči nábytku tak sedí vždycky.
   Stejná čísla nese ovládání, šipky a štítek tak stojí u rámu.
   --zh-kx a --zh-ky je místo na fotce, kde rám visí; na telefonu může
   místnost viset jinde (--zh-tel-ax a --zh-tel-ay, Zlatá hodinka 147). */
.zh-mock__prostredi,
.zh-mock__ovladani {
  --zh-kx: var(--zh-ax);
  --zh-ky: var(--zh-ay);
  --zh-t: 8vh;
  --zh-P0: min(calc(var(--zh-p) * 100vh), calc(86vh - 72px), calc((90vw - var(--zh-karta-sirka) - 164px) / var(--zh-r)));
  /* Zlatá hodinka 218: místnost s rámem daleko u kraje fotky (garáž) posune
     rám v okně víc doprava (--zh-x), jinak by fotku musela přiblížit. */
  --zh-X: min(max(var(--zh-x, 50vw), calc(5vw + var(--zh-karta-sirka) + 94px + var(--zh-P0) * var(--zh-r) / 2)), max(50vw, calc(100vw - var(--zh-P0) * var(--zh-r) / 2 - 110px)));
  --zh-Y: max(calc(var(--zh-t) + var(--zh-P0) / 2), calc(100vh - (1 - var(--zh-ky)) * var(--zh-P0) / var(--zh-f)));
  --zh-Hk: max(calc(var(--zh-P0) / var(--zh-f)), calc(var(--zh-Y) / var(--zh-ky)), calc((100vh - var(--zh-Y)) / (1 - var(--zh-ky))), calc(var(--zh-X) / (var(--zh-kx) * var(--zh-a))), calc((100vw - var(--zh-X)) / ((1 - var(--zh-kx)) * var(--zh-a))));
  --zh-H: var(--zh-Hk);
  --zh-P: calc(var(--zh-H) * var(--zh-f));
  --zh-F: calc(var(--zh-P) * var(--zh-r));
}
/* ─────────────────────────────  místnosti  ───────────────────────── */
.zh-mock__pozadi {
  overflow: hidden;
  background: #1B1224;
}
/* Živá místnost je vidět, ostatní čekají skryté; při přepnutí nová místnost
   najede přes starou (007-mockupy.js). Viditelnost se dědí, skrytá vrstva
   scény tak schová i živou místnost. */
/* Bod 97: skrytá místnost se při rolování nepřepočítává ani nekreslí
   (content-visibility), jinak by každý snímek počítal všech sedm. */
.zh-mock__prostredi {
  position: absolute;
  inset: 0;
  z-index: 0;
  visibility: hidden;
  content-visibility: hidden;
}
.zh-mock__prostredi--zive {
  z-index: 1;
  visibility: inherit;
  content-visibility: visible;
}
.zh-mock__prostredi--prichazi {
  z-index: 2;
  visibility: inherit;
  content-visibility: visible;
}
.zh-mock .zh-mock__foto {
  position: absolute;
  left: calc(var(--zh-X) - var(--zh-H) * var(--zh-a) * var(--zh-kx));
  top: calc(var(--zh-Y) - var(--zh-H) * var(--zh-ky));
  width: calc(var(--zh-H) * var(--zh-a));
  height: var(--zh-H);
  max-width: none;
}
/* ─────────────────────────────  rám  ─────────────────────────────── */
/* Rám: lišta (--zh-l), stín na zdi podle světla místnosti. Hrana lišty se
   leskne ze strany, odkud svítí zdroj (--zh-hx, --zh-hy).
   Zlatá hodinka 236: rám leží na zdi, nelevituje. --zh-s je centimetr
   (výška rámu ve skutečných cm), stín se tak nemění s velikostí obrazu.
   Zadní hrana lišty se zdi dotýká, přední je asi 3 cm od ní: stín je
   složený z vrstev od zadní hrany (u rámu, ostrý a tmavý) po přední
   (posunutý o stin-x a stin-y, nejměkčí); tma přímo u lišty dokola je
   světlo, které rám ke zdi nepustí. Měkkost podle zdroje (--zh-stin-mekkost:
   lampa blízko ostře, okno měkce).
   Zlatá hodinka 238: rám je ze čtyř lišt spojených v rozích na pokos.
   Svislé lišty kreslí rám sám (--zh-ram-svisle), vodorovné vrstva
   zh-mock__lista ořezaná na lichoběžníky (--zh-ram-vodorovne); dřevo má
   kresbu podél lišty ve skutečných cm. --zh-ram-profil jsou barvy průřezu
   lišty od vnější hrany k vnitřní a strana ke zdroji světla je světlejší. */
/* Kresba dřeva: protáhlý šum, tmavé žilky a široké pruhy barvy; dlaždice
   je 40 × 4 cm podél lišty. */
.zh-mock__ram {
  --zh-l: max(2px, calc(var(--zh-P) * var(--zh-lista)));
  --zh-s: calc(var(--zh-P) * var(--zh-centimetr, 0.01));
  --zh-m: var(--zh-stin-mekkost, 1);
  position: absolute;
  left: calc(var(--zh-X) - var(--zh-F) / 2);
  top: calc(var(--zh-Y) - var(--zh-P) / 2);
  width: var(--zh-F);
  height: var(--zh-P);
  isolation: isolate;
  background: linear-gradient(90deg, rgb(255 255 255 / clamp(0, var(--zh-hx) * -0.1, 0.1)) 50%, rgb(255 255 255 / clamp(0, var(--zh-hx) * 0.1, 0.1)) 50%), linear-gradient(90deg, rgb(0 0 0 / clamp(0, var(--zh-hx) * 0.18, 0.18)) 50%, rgb(0 0 0 / clamp(0, var(--zh-hx) * -0.18, 0.18)) 50%), linear-gradient(90deg, var(--zh-ram-profil)) 0 0 / var(--zh-l) 100% no-repeat, linear-gradient(270deg, var(--zh-ram-profil)) 100% 0 / var(--zh-l) 100% no-repeat, var(--zh-ram-svisle, var(--zh-ram-povrch));
  box-shadow: inset calc(var(--zh-hx) * -1.5px) calc(var(--zh-hy) * -1.5px) 0 var(--zh-ram-lesk), inset 0 0 0 2px var(--zh-ram-linka), 0 0 calc(var(--zh-s) * 0.7) calc(var(--zh-s) * 0.05) rgb(0 0 0 / calc(var(--zh-stin-sila) * 0.5)), calc(var(--zh-stin-x) * var(--zh-s) * 0.25) calc(var(--zh-stin-y) * var(--zh-s) * 0.25) calc(var(--zh-s) * (0.3 + 0.25 * var(--zh-m))) rgb(0 0 0 / calc(var(--zh-stin-sila) * 0.6)), calc(var(--zh-stin-x) * var(--zh-s) * 0.6) calc(var(--zh-stin-y) * var(--zh-s) * 0.6) calc(var(--zh-s) * (0.5 + 0.8 * var(--zh-m))) rgb(0 0 0 / calc(var(--zh-stin-sila) * 0.34)), calc(var(--zh-stin-x) * var(--zh-s)) calc(var(--zh-stin-y) * var(--zh-s)) calc(var(--zh-s) * (0.8 + 1.8 * var(--zh-m))) calc(var(--zh-s) * -0.2) rgb(0 0 0 / calc(var(--zh-stin-sila) * 0.3));
}
.zh-mock__lista {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / clamp(0, var(--zh-hy) * -0.1, 0.1)) 50%, rgb(255 255 255 / clamp(0, var(--zh-hy) * 0.1, 0.1)) 50%), linear-gradient(180deg, rgb(0 0 0 / clamp(0, var(--zh-hy) * 0.18, 0.18)) 50%, rgb(0 0 0 / clamp(0, var(--zh-hy) * -0.18, 0.18)) 50%), linear-gradient(180deg, var(--zh-ram-profil)) 0 0 / 100% var(--zh-l) no-repeat, linear-gradient(0deg, var(--zh-ram-profil)) 0 100% / 100% var(--zh-l) no-repeat, var(--zh-ram-vodorovne, var(--zh-ram-povrch));
  box-shadow: inset calc(var(--zh-hx) * -1.5px) calc(var(--zh-hy) * -1.5px) 0 var(--zh-ram-lesk), inset 0 0 0 2px var(--zh-ram-linka);
  clip-path: polygon(0 0, var(--zh-l) var(--zh-l), var(--zh-l) calc(100% - var(--zh-l)), 0 100%, 100% 100%, calc(100% - var(--zh-l)) calc(100% - var(--zh-l)), calc(100% - var(--zh-l)) var(--zh-l), 100% 0);
}
/* Zlatá hodinka 235: zeď, která se na fotce sbíhá (garáž), natočí i rám.
   Oko stojí ve středu fotky na obzoru úběžníku, ohnisko je násobek výšky
   fotky a úhel spočítá 007-mockupy.php z úběžníku. Rám se otočí kolem
   svislé osy (vlastnost rotate, transform rámu píše skript), papír, světlo
   i stín na zdi jdou s ním. Výtisk z tiskárny se natočí stejně
   (006-tiskarna.js čte úhel a perspektivu odsud). */
.zh-mock__prostredi--stena {
  perspective: calc(var(--zh-H) * var(--zh-ohnisko));
  perspective-origin: calc(var(--zh-X) + var(--zh-H) * var(--zh-a) * (0.5 - var(--zh-kx))) calc(var(--zh-Y) + var(--zh-H) * (var(--zh-obzor) - var(--zh-ky)));
}
.zh-mock__prostredi--stena .zh-mock__ram {
  rotate: y var(--zh-stena);
}
/* Střídmé rámy (část 27): tenká lišta, matný povrch, žádné zdobení. */
.zh-mock__ram {
  --zh-ram-profil: transparent, transparent;
}
.zh-mock__ram--cerna {
  --zh-ram-povrch: linear-gradient(160deg, #2A2724 0%, #161412 42%, #0D0C0B 100%);
  --zh-ram-profil: rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.03) 30%, transparent 55%, rgb(0 0 0 / 0.35);
  --zh-ram-lesk: rgba(138, 127, 114, 0.3);
  --zh-ram-linka: rgba(0, 0, 0, 0.55);
}
.zh-mock__ram--kov {
  --zh-ram-povrch: linear-gradient(135deg, #2E2E31 0%, #0F0F11 40%, #3A3A3F 55%, #131315 100%);
  --zh-ram-lesk: rgba(154, 154, 166, 0.22);
  --zh-ram-linka: rgba(154, 154, 166, 0.14);
}
.zh-mock__ram--grafit {
  --zh-ram-povrch: linear-gradient(135deg, #5E6167 0%, #3B3E43 45%, #6A6D73 58%, #43464B 100%);
  --zh-ram-lesk: rgba(169, 172, 179, 0.3);
  --zh-ram-linka: rgba(21, 22, 26, 0.55);
}
.zh-mock__ram--orech {
  --zh-ram-povrch: #4E3220;
  --zh-ram-vodorovne: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27400%27 height=%2740%27%3E%3Cfilter id=%27d%27 x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.004 0.18%27 numOctaves=%274%27 seed=%275%27 stitchTiles=%27stitch%27 result=%27t%27/%3E%3CfeColorMatrix in=%27t%27 values=%270 0 0 0 0.17 0 0 0 0 0.09 0 0 0 0 0.03 2.8 0 0 0 -1.2%27 result=%27l%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.0025 0.05%27 numOctaves=%272%27 seed=%279%27 stitchTiles=%27stitch%27 result=%27u%27/%3E%3CfeColorMatrix in=%27u%27 values=%270 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.04 1.4 0 0 0 -0.55%27 result=%27v%27/%3E%3CfeMerge%3E%3CfeMergeNode in=%27v%27/%3E%3CfeMergeNode in=%27l%27/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width=%27400%27 height=%2740%27 filter=%27url(%23d)%27/%3E%3C/svg%3E') 0 0 / calc(var(--zh-s) * 40) calc(var(--zh-s) * 4), linear-gradient(90deg, #553624 0%, #4A2E1C 24%, #5C3B27 49%, #452A19 73%, #523422 100%);
  --zh-ram-svisle: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2740%27 height=%27400%27%3E%3Cfilter id=%27d%27 x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.18 0.004%27 numOctaves=%274%27 seed=%276%27 stitchTiles=%27stitch%27 result=%27t%27/%3E%3CfeColorMatrix in=%27t%27 values=%270 0 0 0 0.17 0 0 0 0 0.09 0 0 0 0 0.03 2.8 0 0 0 -1.2%27 result=%27l%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.05 0.0025%27 numOctaves=%272%27 seed=%2711%27 stitchTiles=%27stitch%27 result=%27u%27/%3E%3CfeColorMatrix in=%27u%27 values=%270 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.04 1.4 0 0 0 -0.55%27 result=%27v%27/%3E%3CfeMerge%3E%3CfeMergeNode in=%27v%27/%3E%3CfeMergeNode in=%27l%27/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width=%2740%27 height=%27400%27 filter=%27url(%23d)%27/%3E%3C/svg%3E') 0 0 / calc(var(--zh-s) * 4) calc(var(--zh-s) * 40), linear-gradient(180deg, #523422 0%, #472C1B 31%, #5A3926 60%, #432918 100%);
  --zh-ram-profil: rgb(20 10 2 / 0.45), rgb(255 220 180 / 0.12) 22%, transparent 45%, rgb(20 10 2 / 0.1) 80%, rgb(20 10 2 / 0.5);
  --zh-ram-lesk: rgba(176, 128, 96, 0.3);
  --zh-ram-linka: rgba(30, 15, 5, 0.6);
}
/* Dub: světlé dřevo s kresbou podél lišty (Zlatá hodinka 238). */
.zh-mock__ram--dub {
  --zh-ram-povrch: #C8A87E;
  --zh-ram-vodorovne: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27400%27 height=%2740%27%3E%3Cfilter id=%27d%27 x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.004 0.18%27 numOctaves=%274%27 seed=%275%27 stitchTiles=%27stitch%27 result=%27t%27/%3E%3CfeColorMatrix in=%27t%27 values=%270 0 0 0 0.17 0 0 0 0 0.09 0 0 0 0 0.03 2.8 0 0 0 -1.2%27 result=%27l%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.0025 0.05%27 numOctaves=%272%27 seed=%279%27 stitchTiles=%27stitch%27 result=%27u%27/%3E%3CfeColorMatrix in=%27u%27 values=%270 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.04 1.4 0 0 0 -0.55%27 result=%27v%27/%3E%3CfeMerge%3E%3CfeMergeNode in=%27v%27/%3E%3CfeMergeNode in=%27l%27/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width=%27400%27 height=%2740%27 filter=%27url(%23d)%27/%3E%3C/svg%3E') 0 0 / calc(var(--zh-s) * 40) calc(var(--zh-s) * 4), linear-gradient(90deg, #CFB088 0%, #C6A47A 22%, #D4B58D 47%, #C09D72 71%, #CCAD84 100%);
  --zh-ram-svisle: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2740%27 height=%27400%27%3E%3Cfilter id=%27d%27 x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.18 0.004%27 numOctaves=%274%27 seed=%276%27 stitchTiles=%27stitch%27 result=%27t%27/%3E%3CfeColorMatrix in=%27t%27 values=%270 0 0 0 0.17 0 0 0 0 0.09 0 0 0 0 0.03 2.8 0 0 0 -1.2%27 result=%27l%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.05 0.0025%27 numOctaves=%272%27 seed=%2711%27 stitchTiles=%27stitch%27 result=%27u%27/%3E%3CfeColorMatrix in=%27u%27 values=%270 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.04 1.4 0 0 0 -0.55%27 result=%27v%27/%3E%3CfeMerge%3E%3CfeMergeNode in=%27v%27/%3E%3CfeMergeNode in=%27l%27/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width=%2740%27 height=%27400%27 filter=%27url(%23d)%27/%3E%3C/svg%3E') 0 0 / calc(var(--zh-s) * 4) calc(var(--zh-s) * 40), linear-gradient(180deg, #CBAB82 0%, #C3A176 30%, #D1B28A 58%, #BE9B70 100%);
  --zh-ram-profil: rgb(70 40 12 / 0.38), rgb(255 240 210 / 0.2) 22%, transparent 45%, rgb(70 40 12 / 0.08) 80%, rgb(70 40 12 / 0.42);
  --zh-ram-lesk: rgba(242, 222, 192, 0.35);
  --zh-ram-linka: rgba(90, 60, 28, 0.45);
}
/* Mosaz: stará broušená mosaz jako držák lampy v klubovně, oblý profil
   s leskem na hraně (Zlatá hodinka 238). */
.zh-mock__ram--mosaz {
  --zh-ram-povrch: linear-gradient(135deg, #A07C3E 0%, #876630 42%, #A9854A 58%, #745628 100%);
  --zh-ram-profil: rgb(45 28 6 / 0.6), rgb(255 228 160 / 0.5) 20%, rgb(255 240 200 / 0.28) 32%, transparent 55%, rgb(45 28 6 / 0.22) 82%, rgb(45 28 6 / 0.62);
  --zh-ram-lesk: rgba(255, 226, 150, 0.45);
  --zh-ram-linka: rgba(40, 26, 8, 0.6);
}
/* Světlo místnosti (Zlatá hodinka 147), skládá se jako vrstvy ve Photoshopu.
   Násobit: od zdroje (--zh-zx, --zh-zy vůči rámu) do dosahu světla barva
   --zh-blizko přechází do --zh-daleko, obraz tak dostane barvu světla
   a odvrácená strana potemní; lampa blízko rámu má jádro (--zh-jadro) a za
   ním světlo slábne jako 1/vzdálenost (--zh-ohyb je polovina cesty).
   Závoj: záře u zdroje výtisk zesvětlí.
   Totéž světlo padá na lištu rámu (pod otvorem) i na výtisk (nad papírem). */
.zh-mock__ram::before,
.zh-mock__ram::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.zh-mock__ram::before {
  background: radial-gradient(ellipse calc(var(--zh-dosah) * var(--zh-roztazeni) / var(--zh-r) * 100%) calc(var(--zh-dosah) * 100%) at calc(var(--zh-zx) * 100%) calc(var(--zh-zy) * 100%), var(--zh-blizko) var(--zh-jadro, 0%), var(--zh-ohyb, 40%), var(--zh-daleko));
  mix-blend-mode: multiply;
}
.zh-mock__ram::after {
  background: radial-gradient(ellipse calc(var(--zh-dosah) * var(--zh-roztazeni) * var(--zh-zare-dosah, 0.6) / var(--zh-r) * 100%) calc(var(--zh-dosah) * var(--zh-zare-dosah, 0.6) * 100%) at calc(var(--zh-zx) * 100%) calc(var(--zh-zy) * 100%), var(--zh-zare), 35%, transparent);
  mix-blend-mode: screen;
}
/* Otvor rámu: bez výtisku je vidět zadní deska ve stínu lišty, tmavá, ať
   při dosedání výtisku nesvítí světlý podklad (Zlatá hodinka 267). */
.zh-mock__otvor {
  position: absolute;
  inset: var(--zh-l);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #1D1A18 0%, #141211 100%);
  box-shadow: inset 0 calc(var(--zh-s) * 0.4) calc(var(--zh-s) * 0.9) rgb(0 0 0 / 0.55);
}
/* ─────────────────────────────  výtisk  ──────────────────────────── */
/* Ten samý výtisk, který vyjel z tiskárny: bílý okraj 6 % šířky fotky nahoře
   a po stranách, dole 15 % s podpisem a jménem auta. Jas podle místnosti. */
.zh-mock__papir {
  position: absolute;
  inset: 0;
  background: #F2ECE3;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  filter: brightness(var(--zh-jas));
}
.zh-mock__papir::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.5;
  pointer-events: none;
}
/* Bod 97: výtisk sjíždí do rámu s rolováním, posun papíru a rámu zapisuje
   007-mockupy.js rovnou jim (papír ve vlastní vrstvě, ať se při tom nic
   nepřekresluje). Tady jen stav před skriptem: prázdný rám čeká nad scénou,
   ve scéně je obraz. */
.zh-mock {
  --zh-mz: 0;
}
.zh-mock--prazdny {
  --zh-mz: 1;
}
.zh-mock__papir {
  transform: translateY(calc(var(--zh-mz) * -102%));
  will-change: transform;
}
/* Zlatá hodinka 146 a 183: výtisk do rámu přiletí z tiskárny
   (006-tiskarna.js). Papír v rámu jede s kopií výtisku nad rámem (posun
   zapisuje 007-mockupy.js), v prázdném rámu není. */
.zh-mock--let .zh-mock__papir {
  transform: none;
}
.zh-mock--let.zh-mock--prazdny .zh-mock__papir {
  visibility: hidden;
}
.zh-mock__tisk {
  position: absolute;
  left: 5.357%;
  right: 5.357%;
  top: 3.888%;
  height: 86.39%;
  overflow: hidden;
  background: #1B1320;
}
.zh-mock .zh-mock__plakat {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: saturate(var(--zh-sytost, 0.94)) contrast(var(--zh-kontrast, 0.96));
}
.zh-mock__okraj {
  position: absolute;
  left: 5.357%;
  right: 5.357%;
  bottom: 0;
  height: 9.720000000000001%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Zlatá hodinka 251: popisek na okraji výtisku se zmenšuje s rámem bez
     dolní hranice, jinak na malém rámu telefonu přetekl (TOYOTA SU). */
  gap: calc(var(--zh-F) * 0.03);
  font-size: calc(var(--zh-F) * 0.024);
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8C8190;
  white-space: nowrap;
  overflow: hidden;
}
/* Bod 98: výtisk bez okrajů (tlačítko na tiskárně), fotka přes celý papír. */
.zh-mock__papir--bez .zh-mock__tisk {
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
}
.zh-mock__papir--bez .zh-mock__okraj {
  display: none;
}
/* Světlo místnosti na výtisku: vrstva Násobit (barva a pokles světla)
   a nad ní Závoj (záře u zdroje). */
.zh-mock__svetlo,
.zh-mock__zare {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.zh-mock__svetlo {
  background: radial-gradient(ellipse calc(var(--zh-dosah) * var(--zh-roztazeni) / var(--zh-r) * 100%) calc(var(--zh-dosah) * 100%) at calc(var(--zh-zx) * 100%) calc(var(--zh-zy) * 100%), var(--zh-blizko) var(--zh-jadro, 0%), var(--zh-ohyb, 40%), var(--zh-daleko));
  mix-blend-mode: multiply;
}
.zh-mock__zare {
  background: radial-gradient(ellipse calc(var(--zh-dosah) * var(--zh-roztazeni) * var(--zh-zare-dosah, 0.6) / var(--zh-r) * 100%) calc(var(--zh-dosah) * var(--zh-zare-dosah, 0.6) * 100%) at calc(var(--zh-zx) * 100%) calc(var(--zh-zy) * 100%), var(--zh-zare), 35%, transparent);
  mix-blend-mode: screen;
}
/* Sklo: odraz zdroje světla (--zh-odlesk-*) a stín lišty dovnitř rámu ze
   strany světla. */
.zh-mock__sklo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse calc(var(--zh-odlesk-s) * 100%) calc(var(--zh-odlesk-v) * 100%) at calc(var(--zh-odlesk-x) * 100%) calc(var(--zh-odlesk-y) * 100%), rgb(255 248 238 / var(--zh-odlesk-sila)), transparent);
  box-shadow: inset calc(var(--zh-stin-x) * var(--zh-s) * 0.3) calc(var(--zh-stin-y) * var(--zh-s) * 0.3) calc(var(--zh-s) * 0.9) rgb(0 0 0 / 0.32), inset 0 0 0 2px rgb(0 0 0 / 0.14);
  pointer-events: none;
}
/* Záblesk přes sklo, když výtisk dosedne (jen tehdy, přepnutí místnosti
   ho nemá). Zlatá hodinka 264: přejede rovnoměrně a zhasne dřív, než dojde
   k pravé liště; dřív se zdržel u pravé vnitřní hrany a pak zmizel naráz,
   což vypadalo jako bílé probliknutí. */
.zh-mock__sklo::after {
  content: "";
  position: absolute;
  inset: -30% -60%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 228, 0.26) 50%, transparent 62%);
  opacity: 0;
  transform: translateX(-50%);
}
.zh-mock--lesk .zh-mock__prostredi--zive .zh-mock__sklo::after {
  animation: zh-mock-lesk 1.15s linear;
}
@keyframes zh-mock-lesk {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  20% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(30%);
  }
}
/* Svislá čára, která jede s hranou nové místnosti při přepnutí (jako řez mezi scénami). */
.zh-mock__cara {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(250, 129, 185, 0.85) 16%, #FDE0B5 50%, rgba(250, 129, 185, 0.85) 84%, transparent);
  box-shadow: 0 0 22px 2px rgba(250, 129, 185, 0.55);
  opacity: 0;
  pointer-events: none;
}
/* ─────────────────────────────  ovládání  ────────────────────────── */
/* Ovládání patří živé scéně a přijde až po zasunutí výtisku. */
.zh-mock__ovladani {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.zh-scena--ziva .zh-mock__ovladani {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease 0.1s, visibility 0s;
}
/* Zlatá hodinka 96: když přes scénu přijíždějí balíčky, ovládání nezhasne,
   odnese ho čára řezu i se zdí. */
.zh-scena--drzena .zh-mock__ovladani {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.zh-mock.zh-mock--prazdny .zh-mock__ovladani,
.zh-mock.zh-mock--zasouva .zh-mock__ovladani {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
/* Šipky těsně u rámu, uprostřed jeho výšky; s rámem se přesunou. */
.zh-mock .zh-mock__sipka {
  position: absolute;
  top: calc(var(--zh-Y) - var(--zh-sipka) / 2);
  pointer-events: auto;
  transition: left 0.95s cubic-bezier(0.77, 0, 0.18, 1), top 0.95s cubic-bezier(0.77, 0, 0.18, 1), box-shadow 0.25s ease, background 0.25s ease, scale 0.2s ease;
}
/* Natočený rám (Zlatá hodinka 235) je v obraze užší: --zh-pl a --zh-pr
   jsou jeho promítnuté půlky v šířkách rámu. */
.zh-mock .zh-mock__sipka--vlevo {
  left: calc(var(--zh-X) - var(--zh-F) * var(--zh-pl, 0.5) - 16px - var(--zh-sipka));
}
.zh-mock .zh-mock__sipka--vpravo {
  left: calc(var(--zh-X) + var(--zh-F) * var(--zh-pr, 0.5) + 16px);
}
.zh-mock.zh-scena--ziva:not(.zh-mock--zasouva) .zh-mock__sipka::after {
  animation: zh-sipka-zar 0.6s ease 0.3s 3;
}
/* Pod rámem: název místnosti, rozměr obrazu a tečky místností. */
.zh-mock__stitek {
  position: absolute;
  left: var(--zh-X);
  top: calc(var(--zh-Y) + var(--zh-P) / 2 + 16px);
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 6px 0 18px;
  border-radius: 999px;
  background: rgba(18, 8, 24, 0.8);
  box-shadow: inset 0 0 0 1px rgba(250, 129, 185, 0.28), 0 8px 18px rgba(8, 4, 16, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: auto;
  transition: left 0.95s cubic-bezier(0.77, 0, 0.18, 1), top 0.95s cubic-bezier(0.77, 0, 0.18, 1);
}
.zh-mock__popis {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.zh-mock__nazev {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FDE0B5;
}
.zh-mock__rozmer {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #C9A6BC;
}
.zh-mock__tecky {
  display: flex;
}
.zh-mock__tecka {
  position: relative;
  width: 26px;
  height: 40px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
}
/* Zlatá hodinka 195 a 185: místnost jen pro telefon (garáž a dvojčata
   s fotkou na výšku) nemá na počítači tečku; na telefonu jsou tečky
   schované všechny. */
.zh-mock__tecka[data-zh-mock-jen="telefon"] {
  display: none;
}
.zh-mock__tecka::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  translate: -50% -50%;
  border-radius: 999px;
  background: rgba(253, 224, 181, 0.4);
  transition: background 0.3s ease, width 0.3s ease;
}
.zh-mock__tecka:hover::after,
.zh-mock__tecka:focus-visible::after {
  background: rgba(250, 129, 185, 0.75);
}
.zh-mock__tecka--ziva::after {
  width: 18px;
  background: #FA81B9;
  animation: zh-mock-tecka 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Zlatá hodinka 167: tečka nové místnosti se rozsvítí jako dílek cesty
   kroku: vzplane a vyšle modrou vlnu (vlna z jádra). */
.zh-mock__tecka::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 7px;
  translate: -50% -50%;
  border-radius: 999px;
  box-shadow: 0 0 0 1.5px rgba(111, 227, 222, 0.9), 0 0 14px rgba(111, 227, 222, 0.75);
  opacity: 0;
  pointer-events: none;
  --zh-vlna: 2.8;
}
.zh-mock__tecka--ziva::before {
  animation: zh-vlna 0.85s 0.1s ease-out forwards;
}
@keyframes zh-mock-tecka {
  0%,
  100% {
    filter: none;
    box-shadow: none;
  }
  30% {
    filter: brightness(1.6);
    box-shadow: 0 0 10px rgba(253, 224, 181, 0.9), 0 0 22px rgba(250, 129, 185, 0.85);
  }
}
@media (prefers-reduced-motion: reduce) {
  .zh-mock__tecka--ziva::before,
  .zh-mock__tecka--ziva::after {
    animation: none;
  }
}
/* ─────────────────────────────  okno na výšku  ───────────────────── */
/* Okno na výšku (od 768 px): karta jde dolů přes šířku, rám nahoru doprostřed. */
@media (min-width: 768px) and (max-aspect-ratio: 5/4) {
  .zh-mock {
    --zh-karta-sirka: min(560px, 100%);
  }
  .zh-mock .zh-text--karta {
    align-items: flex-end;
    justify-content: center;
    padding: 0 5vw 28px;
  }
  /* Zlatá hodinka 186: rám visící nízko na zdi (fotka musí sahat až dolů)
     dostane aspoň takovou velikost, aby pod ním zbylo místo na štítek
     a mezeru nad kartou: spodek rámu je nad spodkem fotky o
     ((1 - ky) / f - 1/2) * P. */
  .zh-mock__prostredi,
  .zh-mock__ovladani {
    --zh-t: 7vh;
    --zh-P0: min(max(calc(var(--zh-p) * 76vh), calc((var(--zh-karta-v, 220px) + 68px) / ((1 - var(--zh-ky)) / var(--zh-f) - 0.5))), calc((90vw - 140px) / var(--zh-r)), calc(93vh - var(--zh-karta-v, 220px) - 80px));
    --zh-X: 50vw;
  }
  /* Zlatá hodinka 186: štítek nezajede pod kartu dole. */
  .zh-mock__stitek {
    top: min(calc(var(--zh-Y) + var(--zh-P) / 2 + 16px), calc(100vh - var(--zh-karta-v, 220px) - 52px));
  }
}
/* ─────────────────────────────  telefon  ─────────────────────────── */
/* Zlatá hodinka 251: karta kroku je ve všech místnostech dole a fotka
   místnosti stojí nad ní: spodek okna pro fotku je --zh-V (horní hrana
   karty a kousek pod ni), nad ním se fotka v pásu --zh-L prolne do prázdna
   (tma pozadí jako mezi O mně a foťákem). Rám, šipky i štítek se počítají
   jen v okně nad kartou, štítek a šipky rostou a zmenšují se s rámem. */
@media (max-width: 767px) {
  .zh-scena.zh-mock {
    min-height: 300vh;
  }
  /* Zlatá hodinka 147: místnost může mít na telefonu vlastní místo rámu,
     velikost i odstup shora (garáž visí nad autem, ať je to vidět). */
  .zh-mock__prostredi,
  .zh-mock__ovladani {
    --zh-V: calc(100vh - var(--zh-karta-v, 188px) + 4px);
    --zh-L: 11vh;
    --zh-kx: var(--zh-tel-ax, var(--zh-ax));
    --zh-ky: var(--zh-tel-ay, var(--zh-ay));
    --zh-t: var(--zh-tel-t, 12vh);
    --zh-P0: calc(var(--zh-tel-cela, 0) * var(--zh-f) * var(--zh-Hc) + (1 - var(--zh-tel-cela, 0)) * min(calc(var(--zh-tel-p, var(--zh-p)) * 76vh), calc((100vw - 116px) / var(--zh-r)), calc(var(--zh-V) - var(--zh-L) / 2 - var(--zh-t) - 52px)));
    --zh-X: 50vw;
    --zh-Y: calc(var(--zh-tel-cela, 0) * (var(--zh-V) - (var(--zh-tel-dno, 1) - var(--zh-ky)) * var(--zh-Hc)) + (1 - var(--zh-tel-cela, 0)) * max(calc(var(--zh-t) + var(--zh-P0) / 2), calc(var(--zh-V) - (1 - var(--zh-ky)) * var(--zh-P0) / var(--zh-f))));
    --zh-Hk: max(calc(var(--zh-P0) / var(--zh-f)), calc(var(--zh-Y) / var(--zh-ky)), calc((var(--zh-V) - var(--zh-Y)) / (1 - var(--zh-ky))), calc(var(--zh-X) / (var(--zh-kx) * var(--zh-a))), calc((100vw - var(--zh-X)) / ((1 - var(--zh-kx)) * var(--zh-a))));
    /* Zlatá hodinka 240: celá místnost (--zh-tel-cela, garáž) má fotku jen
       tak velkou, aby se do šířky okna vešel zlomek --zh-tel-sirka (auto
       celé i s okrajem). Zlatá hodinka 251: na spodku okna nad kartou je
       místo fotky --zh-tel-dno (pod autem jen podlaha, ta zmizí v prolnutí),
       horní hrana fotky může být nad oknem i pod ním, tam ji doplní tma. */
    --zh-Hc: max(calc(100vw / (var(--zh-tel-sirka, 1) * var(--zh-a))), calc(var(--zh-X) / (var(--zh-kx) * var(--zh-a))), calc((100vw - var(--zh-X)) / ((1 - var(--zh-kx)) * var(--zh-a))));
    --zh-H: calc(var(--zh-tel-cela, 0) * var(--zh-Hc) + (1 - var(--zh-tel-cela, 0)) * var(--zh-Hk));
  }
  /* Horní hrana fotky celé místnosti přechází do tmy pozadí. */
  .zh-mock__prostredi--cela::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: calc(var(--zh-Y) - var(--zh-H) * var(--zh-ky) - 1px);
    height: calc(var(--zh-H) * 0.16);
    background: linear-gradient(180deg, #1B1224, rgba(27, 18, 36, 0));
    pointer-events: none;
  }
  /* Prolnutí fotky do prázdna nad kartou, pod ním už jen tma pozadí. */
  .zh-mock__prostredi::after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: calc(var(--zh-V) - var(--zh-L));
    bottom: 0;
    background: linear-gradient(180deg, rgba(27, 18, 36, 0) 0, rgba(27, 18, 36, 0.55) calc(var(--zh-L) * 0.5), #1B1224 var(--zh-L));
    pointer-events: none;
  }
  /* Šipky a štítek mají velikost podle rámu: u malého rámu (garáž) jsou
     menší i s písmem, cíl dotyku šipky drží aspoň 44 px (::before). */
  .zh-mock__ovladani {
    --zh-stitek-v: clamp(28px, calc(var(--zh-P) * 0.15), 40px);
    --zh-stitek-pismo: clamp(9px, calc(var(--zh-P) * 0.047), 12px);
    --zh-mezera-ramu: clamp(6px, calc(var(--zh-P) * 0.045), 12px);
  }
  .zh-mock .zh-mock__sipka {
    --zh-sipka: clamp(30px, calc(var(--zh-P) * 0.17), 44px);
  }
  .zh-mock .zh-mock__sipka svg {
    width: calc(var(--zh-sipka) * 0.5);
    height: calc(var(--zh-sipka) * 0.5);
  }
  .zh-mock .zh-mock__sipka::before {
    content: '';
    position: absolute;
    inset: min(0px, calc((var(--zh-sipka) - 44px) / 2));
    border-radius: 50%;
  }
  /* Zlatá hodinka 95: šipky těsně u rámu, jen když je rám moc široký,
     zůstanou u kraje obrazovky. */
  .zh-mock .zh-mock__sipka--vlevo {
    left: max(6px, calc(var(--zh-X) - var(--zh-F) / 2 - var(--zh-mezera-ramu) - var(--zh-sipka)));
  }
  .zh-mock .zh-mock__sipka--vpravo {
    left: min(calc(100vw - 6px - var(--zh-sipka)), calc(var(--zh-X) + var(--zh-F) / 2 + var(--zh-mezera-ramu)));
  }
  /* Zlatá hodinka 186: štítek s místností a rozměrem nikdy nezajede do
     prolnutí nad kartou. Zlatá hodinka 240: pod rámem garáže je střecha
     auta, štítek tam visí nad rámem (--zh-tel-nad). */
  .zh-mock__stitek {
    --zh-stitek-pod: min(calc(var(--zh-Y) + var(--zh-P) / 2 + var(--zh-mezera-ramu)), calc(var(--zh-V) - var(--zh-L) / 2 - var(--zh-stitek-v)));
    --zh-stitek-nad: calc(var(--zh-Y) - var(--zh-P) / 2 - var(--zh-mezera-ramu) - var(--zh-stitek-v));
    top: calc((1 - var(--zh-tel-nad, 0)) * var(--zh-stitek-pod) + var(--zh-tel-nad, 0) * var(--zh-stitek-nad));
    gap: calc(var(--zh-stitek-v) * 0.3);
    height: var(--zh-stitek-v);
    padding: 0 calc(var(--zh-stitek-v) * 0.45);
  }
  .zh-mock__popis {
    gap: calc(var(--zh-stitek-v) * 0.25);
  }
  .zh-mock__nazev,
  .zh-mock__rozmer {
    font-size: var(--zh-stitek-pismo);
  }
  .zh-mock__tecky {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zh-mock .zh-mock__sipka,
  .zh-mock__stitek {
    transition: none;
  }
}