/* Živý builder v hero: stage (engine) v stĺpci, kostra pred štartom, skenovanie pri čítaní, prechod medzi ukážkami, bez JS. */
.hl-stage{position:absolute;inset:0;transition:opacity .3s var(--ease),transform .3s var(--ease),filter .3s var(--ease)}
.hl-root,.hl-root.eg{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;width:auto}

/* ovládanie dní pod telefónom (engine .eg-ctl): užšie, s okrajom */
.hl .eg-ctl{width:100%;max-width:520px;margin:0 auto;padding:0 calc(var(--gut) - 6px);gap:2px}
.hl .egs-bar{min-height:28px;gap:12px}
.hl .egs-status{font-size:14px}
.hl .egs-btn{min-height:44px;margin:-8px 0;font-size:14px}
.hl .egs-sl{--dh:48px}
.hl .egs-th{font-size:16px}
.hl[data-live="reading"] .eg-ctl{opacity:.35;pointer-events:none}

/* kostra: prázdny telefón, kým sa nenačíta engine (len s JS) */
.hl-skel{position:absolute;inset:38px 0 4px;display:grid;justify-items:start;padding-left:calc(50% - 197px)}
.hl-skel i{display:block;height:100%;aspect-ratio:413/780;max-width:66%;border-radius:36px;background:#18181a;box-shadow:inset 0 0 0 2px #3a3a3e}
html:not(.js) .hl-skel{display:none}
html.rm .hl-skel{display:none}

/* čítanie: predošlá ukážka stíchne, cez telefón prechádza skenovací pás */
.hl-scan{position:absolute;left:0;right:0;top:0;height:100%;opacity:0;pointer-events:none;overflow:hidden}
.hl-scan::after{content:"";position:absolute;left:0;right:0;top:0;height:84px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.22) 80%,rgba(255,255,255,.5) 100%);transform:translateY(-84px)}
.hl[data-live="reading"] .hl-stage{opacity:.42;filter:saturate(.6)}
.hl[data-live="reading"] .hl-scan{opacity:1}
.hl[data-live="reading"] .hl-scan::after{animation:hlscan 1.7s var(--ease-io) infinite}
@keyframes hlscan{0%{transform:translateY(-84px)}100%{transform:translateY(calc(100% + 0px))}}
html.rm .hl[data-live="reading"] .hl-scan::after{animation:none;transform:translateY(30%)}
.hl-scan::after{height:84px}
.hl-stage.is-swap{opacity:0;transform:scale(.985);filter:blur(6px)}
html.rm .hl-stage{transition:none}

/* bez JS: hotový poloprodukt predvolenej ukážky v ráme telefónu */
.hl-fb{display:grid;justify-items:center;height:100%;padding-top:4px}
.hl-fb-phone{padding:6px;border-radius:34px;background:#18181a;box-shadow:inset 0 0 0 2px #3a3a3e;width:max-content;height:max-content}
.hl-fb-screen{position:relative;width:calc(393px * .56);height:calc(760px * .56);border-radius:28px;overflow:hidden}
.hl-fb-screen .pv-page{position:absolute;left:0;top:0;transform:scale(.56);transform-origin:0 0}
html:not(.js) .hl-stagewrap{min-height:calc(760px * .56 + 24px)}