/* Sekcia „Ako funguje zmena“ (#zmeny) na svenity.sk: animácia „jedna veta → zmena na webe“ (schválený smer A,
   docs/GRAFIKY-HERO-UX.md; pôvodne v úvode, presunutá 20. 10. 2026, v úvode je späť koláž).
   Scénu skladá hero-zmena.js podľa <html lang>; výška je rezervovaná, aby sa stránka pri načítaní neposunula.
   Pekáreň je vymyslená. Tokeny sú zo svenity.css. */
.hz{position:relative;margin:0 0 clamp(2.6rem,5vw,3.6rem);padding:0 0 3rem}
html:not(.js) .hz{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hz-scena{position:relative;height:392px;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:1.5rem;align-items:center;text-align:left;contain:layout style}
.hz-vlavo{position:relative;z-index:2;display:grid;gap:.9rem;justify-items:start}
.hz-bublina{width:100%;background:var(--card);border:1px solid var(--line);border-radius:20px 20px 20px 6px;padding:.95rem 1.05rem 1.05rem;box-shadow:0 14px 30px -22px rgba(20,23,28,.35)}
.hz-hlava{display:flex;align-items:center;gap:.55rem;font-size:.86rem;color:var(--ink-3);line-height:1.3}
.hz-hlava b{color:var(--ink);font-weight:600}
.hz-av{width:1.75rem;height:1.75rem;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.8rem;flex:none}
.hz-kanal{margin-left:auto;font-size:.78rem;border:1px solid var(--line-2);border-radius:999px;padding:.05rem .5rem}
.hz-txt{margin-top:.6rem;font-size:1.08rem;line-height:1.45;height:4.35em;font-weight:500;text-wrap:wrap}
.hz-txt mark{white-space:nowrap;background:linear-gradient(var(--accent-soft),var(--accent-soft)) no-repeat 0 0/0% 100%;color:inherit;border-radius:4px;padding:0 .08em;box-shadow:inset 0 -2px 0 0 transparent}
.hz-txt mark.on{box-shadow:inset 0 -2px 0 0 var(--accent)}
.hz-caret{display:inline-block;width:2px;height:1.05em;background:var(--ink);vertical-align:-.15em;margin-left:1px}
.hz-pill{position:relative;height:2.75rem;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 24px -18px rgba(20,23,28,.4);overflow:hidden;opacity:0}
.hz-p{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;gap:.7rem;padding:0 .35rem 0 1rem;white-space:nowrap;font-size:.95rem;font-weight:500}
.hz-live{padding-right:1.1rem;font-weight:600;gap:.55rem}
.hz-live .ph{display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:.85rem;vertical-align:0}
.hz-btn{background:var(--ink);color:#fff;border-radius:999px;padding:.42rem .95rem;font-weight:600;font-size:.9rem}
.hz-okno{container-type:inline-size;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(20,23,28,.45)}
.hz-lista{display:flex;align-items:center;gap:.35rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);background:#FBFBFC;line-height:1.4}
.hz-lista>i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.hz-url{margin-left:.6rem;font-size:.82rem;color:var(--ink-3);background:var(--paper);border-radius:999px;padding:.12rem .75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hz-tag{margin-left:auto;font-size:.78rem;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:.1rem .6rem;opacity:0}
.hz-web{padding:1rem 1.1rem 1.1rem;font-size:.92rem;line-height:1.5}
.hz-whead{display:flex;align-items:baseline;gap:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.hz-logo{font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.hz-nav{margin-left:auto;display:flex;gap:.9rem;color:var(--ink-3);font-size:.84rem}
.hz-h{margin:.9rem 0 .85rem;font-weight:600;font-size:1.22rem;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.hz-cols{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.hz-box{border:1px solid var(--line);border-radius:10px;padding:.65rem .7rem .55rem;min-width:0}
.hz-bt{font-size:.8rem;font-weight:600;color:var(--ink-3);margin-bottom:.3rem}
.hz-row{white-space:nowrap;display:flex;justify-content:space-between;gap:.6rem;padding:.24rem .35rem;margin:0 -.35rem;border-radius:6px}
.hz-row>span:last-child{font-variant-numeric:tabular-nums;font-weight:500}
.hz-swap{display:inline-grid;justify-items:end}
.hz-swap>*{grid-area:1/1;white-space:nowrap}
.hz-swap s{text-decoration:none;background:linear-gradient(var(--ink-2),var(--ink-2)) no-repeat 0 55%/0% 1.5px}
.hz-swap b{font-weight:600;opacity:0}
.hz-novy{opacity:0}
/* úzke okno webu (tablet, mobil): jeden stĺpec a v ponuke len dve položky */
@container (max-width:480px){.hz-cols{grid-template-columns:1fr;gap:.6rem}.hz-navyse{display:none}.hz-web{padding:.85rem .9rem 1rem}.hz-h{font-size:1.1rem;margin:.75rem 0 .7rem}}
.hz-foot{margin-top:.8rem;flex-wrap:wrap;white-space:normal;color:var(--ink-2);font-size:.86rem;padding:.3rem .4rem;margin-left:-.4rem;margin-right:-.4rem}
.hz-foot>span:last-child{font-weight:400}
.hz-foot .hz-swap{color:var(--ink)}
.hz-conn{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0}
.hz-conn path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.hz-conn circle{fill:var(--accent)}
.hz-kurzor{position:absolute;z-index:4;left:0;top:0;width:22px;height:22px;pointer-events:none;transform-origin:3px 2px;opacity:0}
.hz-kurzor svg{display:block;filter:drop-shadow(0 2px 3px rgba(20,23,28,.3))}
.hz-hra .hz-kurzor{opacity:1}
/* WCAG 2.2.2: slučku, ktorá beží dlhšie ako 5 s, sa dá zastaviť */
.hz-pauza{position:absolute;right:0;bottom:0;width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;font:inherit;transition:border-color .15s var(--ease),color .15s var(--ease)}
.hz-pauza:hover{border-color:var(--ink);color:var(--ink)}
.hz-pauza .ph{font-size:1rem;vertical-align:0}
.hz-pauza[aria-pressed="true"] .ph-pause,.hz-pauza[aria-pressed="false"] .ph-play{display:none}
html:not(.js) .hz-pauza{display:none}
@media(prefers-reduced-motion:reduce){.hz-pauza{display:none}}
@media(max-width:1100px){.hz-scena{height:430px}}
@media(max-width:900px){.hz-scena{height:452px;gap:1.2rem}.hz-nav{display:none}}
/* pod sebou: bublina nad webom, bez spojnice cez celý web (oba konce sa zvýraznia rovnakou farbou) */
@media(max-width:760px){
  .hz{padding:0 0 3rem}
  .hz-scena{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:.9rem;height:600px;max-width:34rem;margin:0 auto}
  .hz-vlavo{gap:.7rem}
  .hz-txt{font-size:1rem}
}
@media(max-width:540px){.hz-scena{height:660px}}
@media(max-width:340px){.hz-scena{height:690px}}
@media(max-width:360px){.hz-p{font-size:.86rem;gap:.5rem}.hz-btn{padding:.38rem .75rem;font-size:.84rem}}