/* ===== Článok s ilustráciami + spoločné animácie (články a podstránka "Čo dostanete") =====
   Pravidlo: základný štýl je KONEČNÝ stav. Animácie sú len "od" (from) kľúčové snímky, bežia raz a len pod .js,
   preto bez JS aj pri znížení pohybu (main.css ich vypína) je vidieť hotový stav. */

/* ---------- typografia článku: 18 px, riadok do ~62 znakov ---------- */
.page-viz .art-body{font-size:var(--fs-md);line-height:1.7}
.page-viz .art-body p{max-width:62ch}
.page-viz .art-body h2{max-width:24ch}
.page-viz .art-ol{max-width:62ch}
.art-body code{padding:.1em .3em;border-radius:var(--r-1);background:var(--surface-2);font:500 .84em var(--f-mono);overflow-wrap:anywhere}
.cite{color:var(--mute);font-size:.8em;white-space:nowrap}
.art-src-n{margin:0 0 16px;max-width:62ch;color:var(--mute);font-size:var(--fs-sm);line-height:1.5}
.art-by-org .art-by-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-1);background:var(--surface);font-size:var(--fs-md);font-weight:600;letter-spacing:-.04em}
.art-concept{margin-top:36px}
.art-concept-t{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border-radius:var(--r-pill);background:var(--fg);color:var(--bg);font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em}
.art-cta{display:grid;gap:6px;margin-top:28px;padding:22px 22px 24px;border-radius:var(--r-2);background:var(--surface);text-decoration:none;transition:background-color var(--dur-2)}
.art-cta-l{color:var(--text-3);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase}
.art-cta-t{font-size:clamp(24px,6.4vw,36px);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.art-cta-s{max-width:48ch;color:var(--mute);font-size:var(--fs-md);line-height:1.5}
.art-cta:active{background:var(--surface-2)}
@media (hover:hover) and (pointer:fine){.art-cta:hover{background:var(--surface-2)}}

/* ---------- ilustrácie v článku ---------- */
.vz{margin:2.6em 0 2.8em}
.vz-stage{position:relative;padding:18px 16px;border-radius:var(--r-2);background:var(--surface);overflow:hidden}
.vz-foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:2px 16px;margin-top:12px}
.vz-cap{flex:1 1 240px;max-width:62ch;color:var(--mute);font-size:var(--fs-sm);line-height:1.5}
.vz-replay{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:var(--r-pill);background:transparent;box-shadow:inset 0 0 0 2px var(--field);color:var(--fg);font-size:var(--fs-sm);font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vz-replay svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.vz-replay:hover{box-shadow:inset 0 0 0 2px var(--fg)}}

/* kód a riadky */
.ln{display:block;min-height:1.7em;padding:0 8px;border-radius:var(--r-1);font-family:var(--f-mono);font-size:var(--fs-xs);line-height:1.7;color:var(--text-2)}
.ln .k{color:var(--mute)}
.ln .v{color:var(--fg)}
.ty{display:inline-block;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- 1. robot a robots.txt ---------- */
.vz-bot .vz-stage{display:grid;gap:20px}
.bot-file{padding:2px 0}
.ln-dis{background:var(--surface-3)}
.bot-rows{position:relative;display:grid;gap:8px;padding-left:54px}
.bot-row{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;column-gap:10px;height:40px;padding:0 12px;border-radius:var(--r-1);background:var(--surface-2);color:var(--fg)}
.bot-p{color:var(--mute);font-size:var(--fs-xs)}
.bot-n{min-width:0;font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em}
.bot-s{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs)}
.ck{flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bot-row.is-no{background:transparent;color:var(--mute);outline:2px dashed var(--outline);outline-offset:-2px}
.bot-bar{position:absolute;left:-9px;top:-4px;bottom:-4px;width:4px;border-radius:2px;background:var(--fg)}
.bot-robot{position:absolute;left:0;top:0;width:40px;height:40px;list-style:none;transform:translate(0,192px)}
.robot-svg{display:block;fill:none;stroke:var(--fg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.robot-svg rect{fill:#0a0a0a}
.robot-svg .fl{fill:var(--fg);stroke:none}
@media (min-width:700px){
  .vz-bot .vz-stage{gap:26px;padding:28px 26px}
}

/* ---------- 2. AI roboty podľa účelu ---------- */
.lanes{display:grid;gap:18px}
.lane{display:grid;gap:6px}
.lane-h{color:var(--text-3);font-size:var(--fs-xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.lane-d{margin-bottom:4px;color:var(--text-2);font-size:var(--fs-sm);line-height:1.4}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill-w{list-style:none}
.pill{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--fg);font-size:var(--fs-xs)}
.pill[data-s="ok"]{box-shadow:inset 0 0 0 2px var(--fg)}
.pill[data-s="no"]{opacity:.55}
.pill-x{position:absolute;left:10px;right:10px;top:50%;height:2px;background:var(--fg);transform-origin:0 50%}
.lanes-ex{margin-top:22px;padding:14px 8px 8px;border-radius:var(--r-1);background:#0b0b0b}
.lanes-exh{padding:0 8px 8px;color:var(--text-3);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase}
@media (min-width:700px){
  .lanes{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .vz-lanes .vz-stage{padding:26px}
}

/* ---------- 3. JSON-LD a karta ---------- */
.vz-json .vz-stage{display:grid;gap:18px}
.jl-code{padding:4px 0}
.jl-card{display:grid;align-content:start;gap:8px;padding:18px;border-radius:var(--r-2);background:var(--surface-2)}
.jl-tag{color:var(--mute);font-size:var(--fs-xs);letter-spacing:.04em}
.jl-name{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.025em}
.jl-row{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:baseline;font-size:var(--fs-md)}
.jl-k{color:var(--text-3);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase}
@media (min-width:700px){
  .vz-json .vz-stage{grid-template-columns:1.15fr 1fr;align-items:center;gap:28px;padding:26px}
}

/* ---------- 4. odpoveď AI s citáciou ---------- */
.vz-answer .vz-stage{display:grid;gap:16px;padding:20px 18px}
.an-q{justify-self:end;max-width:92%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:var(--surface-3);font-size:var(--fs-md);line-height:1.45}
.an-a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px}
.an-spark{margin-top:3px;fill:var(--fg)}
.an-at{font-size:var(--fs-md);line-height:1.6}
.w{display:inline-block}
.cite-chip{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-1);background:var(--fg);color:var(--bg);font:600 var(--fs-xs)/1 var(--f-mono);vertical-align:2px}
.an-src{display:grid;gap:8px;margin-top:4px}
.an-src li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-1);background:var(--surface)}
.an-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--fg);color:var(--bg);font-size:var(--fs-xs);font-weight:600}
.an-sd{display:grid;min-width:0}
.an-dom{color:var(--mute);font-size:var(--fs-xs)}
.an-st{font-size:var(--fs-sm);line-height:1.35}
@media (min-width:700px){
  .vz-answer .vz-stage{padding:28px 30px;gap:20px}
  .an-src{grid-template-columns:1fr 1fr}
  .an-q{font-size:var(--fs-md)}
}

/* ---------- 5. rýchlosť ---------- */
.vz-speed .vz-stage{display:grid;gap:28px;padding:22px 18px}
.sp-grp{display:grid;gap:12px}
.sp-t{color:var(--text-3);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase}
.sp-rows{display:grid;gap:12px}
.sp-row{display:grid;gap:6px}
.sp-l{color:var(--text-2);font-size:var(--fs-sm);line-height:1.35}
.sp-track{position:relative;height:36px;border-radius:var(--r-1);background:var(--surface-2)}
.sp-fill{display:flex;align-items:center;justify-content:flex-end;height:100%;width:calc(var(--w) * 100%);padding-right:12px;border-radius:var(--r-1);background:#8a8a8a;font-style:normal}
.sp-fill.is-us{background:var(--fg)}
.sp-fill b{color:var(--bg);font-size:var(--fs-sm);font-weight:600}
.sp-track.has-lim::after{content:"";position:absolute;left:35.714%;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:repeating-linear-gradient(to bottom,var(--fg) 0 5px,transparent 5px 8px);transform-origin:50% 0}
.sp-limt{color:var(--fg);font-size:var(--fs-xs)}
@media (min-width:700px){
  .vz-speed .vz-stage{padding:28px 30px}
}

/* ---------- spoločné animácie (od: kľúčové snímky) ---------- */
@keyframes fx-up{from{opacity:0;transform:translateY(10px)}}
@keyframes fx-in{from{opacity:0}}
@keyframes fx-pop{from{opacity:0;transform:scale(.7)}}
@keyframes fx-gx{from{transform:scaleX(0)}}
@keyframes fx-gy{from{transform:scaleY(0)}}
@keyframes fx-draw{from{stroke-dashoffset:1}}
@keyframes fx-ty{from{clip-path:inset(0 100% 0 0)}}
@keyframes fx-word{from{opacity:0;transform:translateY(4px)}}
@keyframes fx-lit{from{background-color:var(--surface);color:var(--text-2)}}
@keyframes fx-ok{from{box-shadow:inset 0 0 0 2px var(--surface-3)}}
@keyframes fx-no{from{opacity:1}}
@keyframes fx-spark{from{opacity:0;transform:scale(.3) rotate(-120deg)}}
@keyframes fx-hl-a{0%{background-color:transparent}12%,88%{background-color:var(--surface-3)}100%{background-color:transparent}}
@keyframes fx-hl-d{from{background-color:transparent}}
@keyframes fx-robot{
  0%,24%{transform:translate(0,0) scale(0)}
  30.5%,42%{transform:translate(0,0) scale(1)}
  46%,54%{transform:translate(0,48px) scale(1)}
  58%,66%{transform:translate(0,96px) scale(1)}
  70%,78%{transform:translate(0,144px) scale(1)}
  82%,88%{transform:translate(0,192px) scale(1)}
  91%{transform:translate(12px,192px) scale(1)}
  94%{transform:translate(-4px,192px) scale(1)}
  100%{transform:translate(0,192px) scale(1)}
}

[data-a="gx"]{transform-origin:0 50%}
[data-a="gy"]{transform-origin:50% 100%}
[data-a="draw"]{stroke-dasharray:1}

.js :is(.vz,.cd-it.is-open) [data-a="up"]{animation:fx-up .6s var(--ease) var(--d,0s) both}
.js :is(.vz,.cd-it.is-open) [data-a="in"]{animation:fx-in .6s var(--ease) var(--d,0s) both}
.js :is(.vz,.cd-it.is-open) [data-a="pop"]{animation:fx-pop .45s cubic-bezier(.2,.9,.3,1.3) var(--d,0s) both}
.js :is(.vz,.cd-it.is-open) [data-a="gx"]{animation:fx-gx .6s var(--ease) var(--d,0s) both}
.js :is(.vz,.cd-it.is-open) [data-a="gy"]{animation:fx-gy .7s var(--ease) var(--d,0s) both}
.js :is(.vz,.cd-it.is-open) [data-a="draw"]{animation:fx-draw .6s var(--ease) var(--d,0s) both}
.js :is(.vz,.cd-it.is-open) [data-a="ty"]{animation:fx-ty calc(var(--n) * 20ms) steps(var(--n),end) var(--d,0s) both}
.js :is(.vz,.cd-it.is-open) [data-a="word"]{animation:fx-word .35s var(--ease) var(--d,0s) both}
.js :is(.vz,.cd-it.is-open) [data-a="lit"]{animation:fx-lit .5s var(--ease) var(--d,0s) both}
.js :is(.vz,.cd-it.is-open) [data-a="ok"]{animation:fx-ok .5s var(--ease) var(--d,0s) both}
.js :is(.vz,.cd-it.is-open) [data-a="no"]{animation:fx-no .5s var(--ease) var(--d,0s) both}
.js :is(.vz,.cd-it.is-open) [data-a="spark"]{animation:fx-spark .9s var(--ease) .1s both}
.js :is(.vz,.cd-it.is-open) [data-a="wipe"]{animation:fx-ty 1s var(--ease) var(--d,0s) both}
.js .vz .has-lim::after{animation:fx-gy .7s var(--ease) 2.4s both}
.js .vz [data-a="robot"]{animation:fx-robot 8.2s linear 0s both}
.js .vz-bot .ln-allow{animation:fx-hl-a 4.2s linear 2.5s both}
.js .vz-bot .ln-dis{animation:fx-hl-d .4s ease 6.7s both}

/* animácie čakajú, kým ilustrácia nevojde do výrezu (JS pridá .go); .rst ich pri "Prehrať znova" vráti na začiatok */
.js .vz:not(.go) *,.js .vz:not(.go) *::before,.js .vz:not(.go) *::after{animation-play-state:paused!important}
.js .vz.rst *{animation:none!important}

@media (prefers-reduced-motion:reduce){
  .vz *,.vz *::before,.vz *::after{animation:none!important;transition:none!important}
}