/* PILL — generuje tools/osad_pill.py zo štýlov návrhu (navrh_pill, navrh_pill_blister), NEUPRAVOVAŤ RUČNE */
/* KAPSULA (01 a 03) — 21. 10. (Martin): variant C, ale „úplne strokovo, v náznakoch“: len obrys, bez výplne; bez 4 štvorčekov
   (z celej stránky); vpravo načítací kruh priebehu — oblúk v prechode FUTUR ONE na jemnej stope */

/* MIKROANIMÁCIA (21. 10., Martin: „nech sa to zatočí celé rýchlejšie dokola a potom to nejak zmizne“): pri zobrazení ilustrácie
   (.lp-frame.is-on) sa čierny oblúk rýchlo dokreslí okolo celého kruhu a hneď za ním sa dotiahne chvost → zmizne;
   ostane len jemná stopa. V 03 postupne podľa riadku (--d). */
@property --pr { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --ps { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes pill-spin { 0% { --ps: 0%; --pr: 0%; } 55% { --ps: 0%; --pr: 100%; } 100% { --ps: 100%; --pr: 100%; } }

/* izometrická kapsula v toku (02) — bez štvorčekov, kruh = oblúk v prechode FUTUR ONE */

/* KRUH PRIEBEHU (21. 10., Martin: „tú animáciu prerob nanovo… a o 1 px to koliesko tenšie“): hrúbka 4,5 → 3,5;
   animácia ako v 2D (pill-spin): HLAVA obehne celý kruh zhora v smere hodín, potom CHVOST dobehne za ňou → oblúk zmizne,
   ostane čistá stopa. Rovné konce (butt) + dĺžka 0 na začiatku aj na konci → žiadna bodka ani zvyšok. Spúšťa sa až klikom. */
/* 22. 10. (Martin: „Pill zjednotený, konzistentný“): hrúbka kruhu z kresby (vz_web.PILL_SW = h · 4/56), nie z CSS;
   zaoblené konce + krátke prelínanie na začiatku a konci (bez bodky) — ako Pill v blistri */
html body .vz-flow .fw-cap .cap-track { fill: none; stroke: var(--v-fg); stroke-opacity: .18; }
/* oblúk BEZ non-scaling-stroke: s ním prehliadač v izometrii zle prepočíta pathLength → čiara sa rozpadla na kúsky */
html body .vz-flow .fw-cap .cap-arc { fill: none; stroke-linecap: round; stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 0; }
html body .vz-flow .fw-cap.is-active .cap-arc { animation: cap-run var(--t-dlhy) var(--f-ease) var(--t-zmena) both; }
@keyframes cap-run {
  0%   { stroke-dasharray: 0 100;   stroke-dashoffset: 0; opacity: 0; }
  8%   { opacity: 1; }
  50%  { stroke-dasharray: 100 0;   stroke-dashoffset: 0; }
  92%  { opacity: 1; }
  100% { stroke-dasharray: 0 100;   stroke-dashoffset: -100; opacity: 0; } }
html body .vz-flow .fw-cap .cap-num { font-family: var(--font-f-font-mono); font-size: 11px; letter-spacing: .08em; fill: var(--v-mute); transition: fill var(--t-zmena); }
html body .vz-flow .fw-cap.is-active .cap-num { fill: var(--v-act-fg); }
@media (prefers-reduced-motion: reduce) { html body .vz-flow .fw-cap.is-active .cap-arc { animation: none; } }
html body .vz-flow .fw-cap .pl-edge, html body .vz-flow .fw-cap .pl-top { fill: var(--v-plate); stroke: var(--v-plate-s); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill var(--t-zmena); }
html body .vz-flow .fw-cap.is-active .pl-top { fill: var(--v-act); }

 html body .vz-flow .fw-cap.is-active .cap-track { stroke: var(--v-act-fg); }
html body .vz-flow .fw-cap { transition: transform var(--t-nabeh) var(--f-ease); cursor: pointer; }
html body .vz-flow .fw-cap.is-active { transform: translateY(-8px); }
/* STOH kontextu (21. 10., Martin: „izometrickú dosku so 4, napr. na sebe“) — 4 dosky nad sebou, názov vrstvy naplocho */

/* 4 DOŠTIČKY V PRERUŠOVANOM OBRYSE (21. 10., Martin: „alebo 4 menšie doštičky a dať ich dokopy čiarkovanou čiarou“) */
html body .vz-flow .fw-tiles .ts-dash { fill: none; stroke: var(--v-fg); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; transition: stroke-opacity var(--t-zmena); }
html body .vz-flow .fw-tiles .pl-edge, html body .vz-flow .fw-tiles .pl-top { fill: var(--v-plate); stroke: var(--v-plate-s); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill var(--t-zmena); }
html body .vz-flow .fw-tiles .pl-num { font-family: var(--font-f-font-mono); font-size: 11px; letter-spacing: .08em; fill: var(--v-mute); transition: fill var(--t-zmena); }

/* 21. 10. (Martin): efekt ako predtým — rozsvietia a zdvihnú sa doštičky; prerušovaná plocha je len KLIKATEĽNÁ (priehľadná výplň) */
html body .vz-flow .fw-tiles .ts-dash { fill: transparent; pointer-events: all; }
html body .vz-flow .fw-tiles.is-active .ts-dash { stroke-opacity: .9; }
html body .vz-flow .fw-tiles.is-active .pl-top { fill: var(--v-act); }

html body .vz-flow .fw-tiles.is-active > .pl-num { fill: var(--v-fg); }
html body .vz-flow .fw-tiles > .pl { transition: transform var(--t-nabeh) var(--f-ease); }
html body .vz-flow .fw-tiles.is-active > .pl { transform: translateY(-6px); }
html body .vz-flow .fw-tiles { cursor: pointer; }

/* BLISTER (Pill, „Web si nazbieral priveľa widgetov“) — tools/navrh_pill_blister.py; dosky = štýl vz-iso webu */
html body .vz-blister .bx-hole{fill:none;stroke:var(--v-plate-s);stroke-width:1;stroke-dasharray:4 5;opacity:.7;vector-effect:non-scaling-stroke}
/* 21. 10. (Martin: „na aktíve vyfarbi tie pills, nie to okolie“): blister ostáva tmavý, aktívny krok rozsvieti TABLETKY */
html body .vz-blister .bx-be,html body .vz-blister .bx-bt,html body .vz-blister .bx-te,html body .vz-blister .bx-tt{fill:var(--v-plate);stroke:var(--v-plate-s);stroke-width:1;vector-effect:non-scaling-stroke}
html body .vz-blister .bx-tt{transition:fill var(--t-zmena)}
html body .vz-blister .pl.is-active .bx-tt{fill:var(--v-act)}
/* alternatívy aktívneho 01 vo svetlej verzii: A = len pohyb (tabletky ostanú svetlé), B = jemná sivá namiesto čiernej */

html body .vz-blister .pl.is-active .pl-num{fill:var(--v-fg)}
/* D (22. 10., Martin: „namiešaj tie pilulky v 01 … nie tie farby — také, čo bežne používame na webe, čo majú svetlý odtieň,
   nevymýšľaj nové“): len farby, ktoré web naozaj používa — paper, neutral (sekcie) a SVETLÉ konce prechodov projektov
   (MAX, STUDIO, BOX, X; tools/farby_projektov.py). Hrana = tmavý koniec toho istého prechodu. FUTUR ONE (modrá) vynechaná —
   patrí len Pill. 22. 10. (Martin: „prvý stav tabletiek bude bezfarebný a až keď sú aktívne, tak sa vyfarbia“):
   v pokoji ako blister (v-plate), pri aktívnom 01 sa povyťahujú a plynulo vyfarbia. */
html body .vz-blister.bx-vd .bx-te{transition:fill var(--t-zmena)}
html body .vz-blister.bx-vd .pl.is-active .bx-c0 .bx-tt{fill:var(--f-paper)}
html body .vz-blister.bx-vd .pl.is-active .bx-c1 .bx-tt{fill:var(--f-neutral)}
html body .vz-blister.bx-vd .pl.is-active .bx-c2 .bx-tt{fill:#F3B955}
html body .vz-blister.bx-vd .pl.is-active .bx-c3 .bx-tt{fill:#E98AB5}
html body .vz-blister.bx-vd .pl.is-active .bx-c4 .bx-tt{fill:#8ED3A6}
html body .vz-blister.bx-vd .pl.is-active .bx-c5 .bx-tt{fill:#DCE775}
html body .vz-blister.bx-vd .pl.is-active .bx-c0 .bx-te{fill:var(--f-neutral)}
html body .vz-blister.bx-vd .pl.is-active .bx-c1 .bx-te{fill:var(--f-neutral-2)}
html body .vz-blister.bx-vd .pl.is-active .bx-c2 .bx-te{fill:#E0823A}
html body .vz-blister.bx-vd .pl.is-active .bx-c3 .bx-te{fill:#8E6BD8}
html body .vz-blister.bx-vd .pl.is-active .bx-c4 .bx-te{fill:#3BAFA8}
html body .vz-blister.bx-vd .pl.is-active .bx-c5 .bx-te{fill:#9CC94B}
/* 22. 10. (Martin: „v tej 11 aj 02 by mala byť najskôr bez farby“): Pill v pokoji bezfarebná (ako blister, obrys + stopa kruhu),
   pri aktívnom 02 vystúpi a vyfarbí sa prechodom FUTUR ONE, kruh zbelie */
html body .vz-blister.bx-vd .bx-pt,html body .vz-blister.bx-vd .bx-pe{fill:var(--v-plate);stroke:var(--v-plate-s);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill var(--t-nabeh),stroke var(--t-nabeh)}
html body .vz-blister.bx-vd .bx-track{stroke:var(--v-plate-s);stroke-opacity:.2;transition:stroke var(--t-nabeh),stroke-opacity var(--t-nabeh)}
html body .vz-blister.bx-vd .pl.is-active .bx-pt{fill:url(#bx-g-pbl6);stroke:transparent}
html body .vz-blister.bx-vd .pl.is-active .bx-pe{fill:#4F78C4;stroke:transparent}
html body .vz-blister.bx-vd .pl.is-active .bx-track{stroke:#F4F3EF;stroke-opacity:.35}
/* blister ostáva na mieste (bez zdvihu celej vrstvy); 01 aktívny: tabletky sa POVYŤAHUJÚ hore rýchlo po jednej (21. 10., Martin) */
html body .vz-blister .pl.is-active{transform:none}
html body .vz-blister .bx-p{transition:transform var(--t-zmena) var(--f-ease);transition-delay:calc(var(--j) * 45ms)}
html body .vz-blister .pl.is-active .bx-p{transform:translateY(-14px)}
@media (prefers-reduced-motion:reduce){html body .vz-blister .bx-p{transition:none}}
/* 02 aktívny (21. 10., Martin: „práve naopak“): zosvetlie BLISTER, jamka ostane tmavá (prerušovaná na svetlom);
   Pill v pokoji leží v jamke a pri aktívnom kroku vylezie zospodu hore po prerušovanej čiare */
html body .vz-blister .bx-bt{transition:fill var(--t-zmena)}
/* 21. 10. (Martin: „na 02 aktív nedávajme bielu, stačí ten pohyb“): blister aj jamka ostanú tmavé, aktívny = len vystúpenie Pill */
html body .vz-blister .bx-pill{transform:translateY(var(--lift));transition:transform var(--t-pomaly) var(--f-ease)}
html body .vz-blister .pl.is-active .bx-pill{transform:translateY(0)}

html body .vz-blister .bx-pe{fill:#4F78C4}
html body .vz-blister .bx-track{fill:none;stroke:#F4F3EF;stroke-opacity:.35;stroke-width:4}
/* 22. 10. (Martin: „konce bielej animácie zaoblené a celé rovnakú šírku, teraz je tam akýsi odskok“): zaoblené konce,
   rovnaká hrúbka ako stopa (4 v rovine Pill); okrúhla bodka pri nulovej dĺžke sa skryje krátkym prelínaním na začiatku a konci */
html body .vz-blister .bx-arc{fill:none;stroke:#F4F3EF;stroke-width:4;stroke-linecap:round;stroke-dasharray:0 100;opacity:0}
html body .vz-blister .pl.is-active .bx-arc{animation:bx-run 3.6s var(--f-ease) var(--t-nabeh) infinite}
@keyframes bx-run{0%,20%{stroke-dasharray:0 100;stroke-dashoffset:0;opacity:0}23%{opacity:1}50%{stroke-dasharray:100 0;stroke-dashoffset:0}77%{opacity:1}
  80%,100%{stroke-dasharray:0 100;stroke-dashoffset:-100;opacity:0}}
/* „haa, tu som“: Pill sa jemne vznáša nad svojou jamkou */
html body .vz-blister .pl.is-active .bx-bob{animation:bx-bob 3.6s ease-in-out .9s infinite}
@keyframes bx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){html body .vz-blister .pl.is-active .bx-bob,html body .vz-blister .pl.is-active .bx-arc{animation:none}html body .vz-blister .bx-pill{transition:none}}

/* 03 POMOC PODĽA SITUÁCIE (22. 10., Martin: „vľavo situácia, potom stĺpec s menšími textami (konzistentne s inými časťami
   webu), v Pill reálna akcia — Prehraj video…; v Pill odstráň nápis Pill a čiarku; akcia sa nejak animuje a následne sa
   animuje Pill, lebo tabuľka na pravej strane je suchá“). Stĺpce ako tabuľka zásad (O mne .ph-principle): číslo · názov ·
   popis 16 px · Pill. Pill = jednotná Pill (obrys kapsuly, akcia, kruh s oblúkom FUTUR ONE, zaoblené konce). */
html body .pa-sit { list-style: none; margin: 0; padding: 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid var(--f-line-l); }
/* 22. 10. (Martin: „tretí stĺpec viac opisnejší a posunúť bližšie k druhému“): názov situácie pevná šírka, popis hneď za ním */
html body .pa-sit > li { display: grid; grid-template-columns: 120px minmax(0,240px) minmax(0,1fr) auto; column-gap: var(--f-gap); align-items: center;
  padding: 24px 0; border-top: 1px solid var(--f-line-l); text-align: left; }
html body .pa-sit > li:first-child { border-top-color: var(--f-ink); }
html body .pa-sit .lpc-a { min-width: 0; }
html body .pa-d { justify-self: start; text-align: left; max-width: 440px; font-size: 16px; line-height: var(--lh-odsek); color: var(--f-ink); opacity: .62; text-wrap: pretty; }
html body .pa-pill { justify-self: end; box-sizing: border-box; width: 248px; justify-content: space-between;
  display: inline-flex; align-items: center; column-gap: 14px; height: 52px; padding: 0 9px 0 24px;
  /* 22. 10. (Martin: „stroke je nejaký rozpadnutý tam, kde sa zaoblenie napája na rovnú plochu“): obrys orámovaním (border)
     namiesto vnútorného tieňa — rovnomerná hrúbka aj v zaoblení; polomer = polovica výšky (presný polkruh) */
  border-radius: 26px; border: 1px solid var(--f-ink); color: var(--f-ink); white-space: nowrap; font-size: 16px; font-weight: 500;
  letter-spacing: -.005em; opacity: 0; transform: translateY(8px); transition: opacity var(--t-nabeh), transform var(--t-nabeh) var(--f-ease); }
html body .pa-pill__t { clip-path: inset(0 100% 0 0); transition: clip-path var(--t-nabeh) var(--f-ease); }
html body .pa-ring { width: 34px; height: 34px; flex: none; display: block; }
html body .pa-ring .tr { fill: none; stroke: var(--f-ink); stroke-opacity: .14; stroke-width: 3; }
html body .pa-ring .ar { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; }
/* poradie pri zobrazení: Pill sa objaví → vysunie sa akcia → kruh obehne; potom kruh pomaly dokola, rad po rade */
html body .lp-frame.is-on .pa-pill { opacity: 1; transform: none; transition-delay: calc(var(--d, 0ms) + 200ms); }
html body .lp-frame.is-on .pa-pill__t { clip-path: inset(0 0 0 0); transition-delay: calc(var(--d, 0ms) + 650ms); }
/* krúžok v slučke (22. 10., Martin: „naanimuje sa a potom sa znova naanimuje a potom znova — len ten krúžok“):
   dokreslí sa (1,9 s) → dobehne a zmizne (0,8 s) → pauza (1,5 s) → znova. Kapsula a text sa animujú len raz.
   Pred aj po kole je oblúk skrytý (opacity 0) — inak by zaoblený koniec čiary s nulovou dĺžkou ostal ako bodka. */
html body .lp-frame.is-on .pa-ring .ar { animation: pa-run 4.2s var(--f-ease) calc(var(--d, 0ms) + 1300ms) infinite; }
html.f-js body .lp-frame.is-on:not(.is-vis) .pa-ring .ar { animation-play-state: paused; }   /* 31. 10. 2026: mimo záberu stojí (is-vis: 003-lp-page.js) */
@keyframes pa-run { 0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 0; } 3% { opacity: 1; }
  45% { stroke-dasharray: 100 0; stroke-dashoffset: 0; opacity: 1; }
  60% { opacity: 1; }
  64%, 100% { stroke-dasharray: 0 100; stroke-dashoffset: -100; opacity: 0; } }
@media (max-width: 860px) { html body .pa-sit > li { grid-template-columns: minmax(0,1fr); row-gap: 12px; } html body .pa-pill { justify-self: start; } }
@media (prefers-reduced-motion: reduce) { html body .pa-pill, html body .pa-pill__t { transition: none; opacity: 1; transform: none; clip-path: none; }
  html body .lp-frame.is-on .pa-ring .ar { animation: none; } }