/* Průvodce „Stavba v čase“ – jen /build/ (build.mjs, PAGE_ASSETS). Průběh stavby nese registrovaná proměnná --bt (0–6).
   Bez JavaScriptu: --bt 6 (hotový dům) a všechny fáze rozbalené. .is-live (build-time.mjs) zapne posuvník a jednu aktivní fázi.
   Každý prvek kresby má začátek --s a délku --d; --p je jeho průběh 0–1, --q průběh odchodu (--s2, --d2). */
@property --bt{syntax:'<number>';inherits:true;initial-value:6}
.bt-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:start}
.bt-stage{margin:0;padding:clamp(14px,2.4vw,28px) clamp(14px,2.4vw,28px) 18px;border-radius:var(--radius);background:var(--soft)}
.bt-stage .caption{margin-top:14px}
.bt-scene{display:block;width:100%;height:auto;--bt:6;transition:--bt 1s cubic-bezier(.45,0,.2,1);
  --soil:#e6dfd1;--grass:#cbd6bb;--blk:#e8dbc6;--blk-l:#d4c3a8;--render:#fbfaf6;--concrete:#d1cec6;--hole:#3a414e;--glass:#aabbce;--frame:#20242c;--oak:#c9975d;--oak-l:#aa7a45;--roofing:#30353e;--leaf:#a9bf94;--leaf2:#8ca879;--trunk:#7d6a55;--edge:#2b2f37;--sign:#fff;
  --a:clamp(0,calc((var(--bt) - 3.6) / .22),1);--b:clamp(0,calc((var(--bt) - 3.82) / .18),1);--c:clamp(0,calc((var(--bt) - 4.02) / .25),1);
  --r:clamp(0,calc((var(--bt) - 5) / .35),1);--on:clamp(0,calc((var(--bt) - 5.7) / .3),1)}
html[data-appearance=night] .bt-scene{--soil:#1b2130;--grass:#24332b;--blk:#4a443c;--blk-l:#5c5449;--render:#c4c9d3;--concrete:#7e828b;--hole:#0e1219;--glass:#2c3951;--frame:#0b0e13;--oak:#90694a;--oak-l:#705136;--roofing:#12161d;--leaf:#3f5e48;--leaf2:#334d3b;--trunk:#5a4d3f;--edge:#aab3c3;--sign:#1b2130}
.bt-scene [data-t]{--p:clamp(0,calc((var(--bt) - var(--s)) / var(--d)),1);--q:clamp(0,calc((var(--bt) - var(--s2,99)) / var(--d2,1)),1)}
.bt-scene .grow{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--p))}
.bt-scene .rise{opacity:var(--p);transform:translateY(calc((1 - var(--p)) * 18px))}
.bt-scene .fade{opacity:var(--p)}
.bt-scene .pop{transform-box:fill-box;transform-origin:50% 100%;transform:scale(var(--p))}
.bt-scene .draw{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p))}
.bt-scene .build{clip-path:inset(calc((1 - var(--p)) * 100%) -4px 0 -4px)}
.bt-scene .io{opacity:calc(var(--p) * (1 - var(--q)))}
/* terén, vytyčení, tabule stavby */
.bt-soil{fill:var(--soil)}.bt-grass{fill:var(--grass)}
.bt-post{fill:none;stroke:var(--edge);stroke-width:3;stroke-linecap:round}
.bt-flag{fill:var(--blue)}
.bt-string{fill:none;stroke:var(--blue);stroke-width:1.4}
.bt-sign{fill:var(--sign);stroke:var(--edge);stroke-width:1.5}
.bt-sign-ico{fill:none;stroke:var(--edge);stroke-width:1.6;stroke-linejoin:round}
.bt-stamp{transform-box:fill-box;transform-origin:50% 50%;transform:scale(calc(1.8 - .8 * var(--p)))}
.bt-stamp-c{fill:var(--sign);stroke:var(--blue);stroke-width:2}
.bt-stamp-t{fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* základy, zdi, rozvody */
.bt-slab{fill:var(--concrete);stroke:var(--edge);stroke-width:1.2}
.bt-pipe{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bt-block{fill:url(#bt-blocks)}.bt-blk{fill:var(--blk)}.bt-blk-l{fill:none;stroke:var(--blk-l);stroke-width:1}
.bt-render{fill:var(--render);opacity:var(--p)}
.bt-concrete{fill:var(--concrete)}.bt-hole{fill:var(--hole)}
.bt-edge{fill:none;stroke:var(--edge);stroke-width:1.5;stroke-linejoin:round}
.bt-wires{opacity:calc(1 - var(--r))}
.bt-wire{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bt-box{fill:var(--sign);stroke:var(--blue);stroke-width:1.5}
/* okna, dveře, garáž */
.bt-glass{fill:var(--glass)}.bt-frame{fill:none;stroke:var(--frame);stroke-width:2.5}
.bt-shine{fill:none;stroke:#ffffff80;stroke-width:3;stroke-linecap:round}
.bt-shutter{fill:#6e747d;stroke:var(--frame);stroke-width:1.5}.bt-slats{stroke:#8d939c;stroke-width:1.5}
.bt-oak{fill:var(--oak)}.bt-oak-l{stroke:var(--oak-l);stroke-width:1}.bt-handle{stroke:var(--frame);stroke-width:2;stroke-linecap:round}
.bt-num{font:600 11px Inter,Arial,sans-serif;fill:var(--frame)}
.bt-gdoor{fill:#5f656e;stroke:var(--frame);stroke-width:1.5}.bt-gdoor-l{stroke:#4a5058;stroke-width:1.2}
/* zahrada, střecha, jeřáb */
.bt-trunk{fill:var(--trunk)}.bt-branch{stroke:var(--trunk);stroke-width:2.5;stroke-linecap:round}
.bt-leaf{fill:var(--leaf)}.bt-leaf2,.bt-bush{fill:var(--leaf2)}
.bt-chimney{fill:#8e8b85;stroke:var(--edge);stroke-width:1.2}.bt-roofing{fill:var(--roofing)}
.bt-roof{opacity:clamp(0,calc((var(--bt) - 3.56) / .06),1);transform:translate(calc((1 - var(--a)) * 170px),calc((1 - var(--b)) * -30px))}
.bt-crane{transform:translateX(calc((1 - var(--p)) * -150px + var(--q) * -200px))}
.bt-crane-m{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linejoin:round}
.bt-crane-s{fill:var(--blue)}
.bt-crane-t{fill:none;stroke:var(--blue);stroke-width:1.2}
.bt-trolley{transform:translateX(calc((1 - var(--a)) * 170px))}
.bt-cable{fill:var(--edge);transform-box:fill-box;transform-origin:50% 0;transform:scaleY(calc((38 - (1 - var(--b)) * 30 - var(--c) * 26) / 38))}
.bt-hook{fill:none;stroke:var(--edge);stroke-width:2;stroke-linecap:round;transform:translateY(calc(((1 - var(--b)) * -30 - var(--c) * 26) * 1px))}
/* noc: po dokončení se rozsvítí okna a světlo u dveří */
.bt-lights{display:none}
html[data-appearance=night] .bt-stage.is-lit .bt-lights{display:inline;opacity:var(--on)}
.bt-lit{fill:url(#bt-warm)}.bt-lit-glow{fill:#ffcf6e;filter:url(#bt-glow);opacity:.5}.bt-lamp{fill:#fff4d8}
html[data-appearance=night] .bt-stage.is-lit .bt-shine{opacity:calc(1 - var(--on))}
/* posuvník pod ilustrací */
.bt-control{margin-top:18px}
.bt-label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.bt-range{--v:6;display:block;width:100%;height:26px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.bt-range::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--blue) calc((var(--v) - 1) / 5 * 100%),var(--line) 0)}
.bt-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--bg);border:3px solid var(--blue);box-shadow:0 3px 10px #0000002e;transition:transform .2s}
.bt-range:active::-webkit-slider-thumb{transform:scale(1.12)}
.bt-range::-moz-range-track{height:4px;border-radius:4px;background:var(--line)}
.bt-range::-moz-range-progress{height:4px;border-radius:4px;background:var(--blue)}
.bt-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--blue);box-shadow:0 3px 10px #0000002e}
.bt-range:focus-visible{outline:2px solid var(--blue);outline-offset:6px;border-radius:6px}
.bt-ticks{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.bt-ticks span{width:22px;text-align:center}
/* fáze */
.bt-phases{list-style:none;margin:0;padding:0}
.bt-phase{border-top:1px solid var(--line)}
.bt-phase:last-child{border-bottom:1px solid var(--line)}
.bt-step{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:10px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.bt-no{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;transition:background .35s,border-color .35s,color .35s,box-shadow .35s}
.bt-name{font-size:16px;font-weight:560;letter-spacing:-.015em}
.bt-step:disabled{cursor:default}
.bt-step:not(:disabled):hover .bt-no,.bt-step:focus-visible .bt-no{border-color:var(--blue);color:var(--blue)}
.bt-step:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
.bt-detail{padding:0 0 18px 44px}
.bt-detail p{margin:0 0 6px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.bt-detail b{display:inline-block;min-width:26px;font-weight:700;color:var(--ink)}
.bt-link{display:inline-block;margin-top:6px;font-size:13px}
.bt.is-live .bt-phase:not(.is-active) .bt-detail{display:none}
.bt.is-live .bt-phase.is-active .bt-detail{animation:btIn .45s ease both}
@keyframes btIn{from{opacity:0;transform:translateY(-4px)}}
.bt.is-live .bt-phase.is-done .bt-no{border-color:var(--blue);color:var(--blue)}
.bt.is-live .bt-phase.is-active .bt-no{background:var(--blue);border-color:var(--blue);color:#fff}
.bt-replay{margin-top:18px;font-size:13px}
html[data-appearance=night] .bt.is-live .bt-phase.is-active .bt-no{background:var(--g-warm);border-color:var(--g-warm);color:#2a1c00;box-shadow:0 0 14px #ffb54766}
html[data-appearance=night] .bt.is-live .bt-phase.is-done .bt-no{border-color:#ffcf6e99;color:var(--g-warm)}
html[data-appearance=night] .bt-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--g-warm) calc((var(--v) - 1) / 5 * 100%),var(--line) 0)}
html[data-appearance=night] .bt-range::-webkit-slider-thumb{border-color:var(--g-warm)}
html[data-appearance=night] .bt-range::-moz-range-progress{background:var(--g-warm)}
html[data-appearance=night] .bt-range::-moz-range-thumb{border-color:var(--g-warm)}
@media(max-width:900px){.bt-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.bt-detail{padding-left:0}.bt-name{font-size:15px}}