/* KOMPONENT ph-ilu — .ph-ilu (krok 4 knižnice, 30. 10. 2026).
   Vybraté z: userStyles-b7accc8e732d.css. Hodnoty z tokeny.css.
   Vytvoril tools/komponent_vyber.py — pravidlá v pôvodnom poradí. */

/* --- z userStyles-b7accc8e732d.css --- */
.ph-ilu { --c-fg: var(--f-ink); --c-bg: var(--f-paper); --c-on: var(--f-paper); --c-mute: var(--f-mute-light); --c-body: var(--f-body-light); --c-line: var(--f-line-l); --c-line-s: var(--f-line-l2); --c-line2: rgba(16,24,32,.35); --c-wash: rgba(16,24,32,.05); }
.f-neutral-bg .ph-ilu { --c-bg: var(--f-neutral); }
html body .ph-ilu { --v-fg: var(--c-fg); --v-line: var(--c-line); --v-plate: var(--c-bg); --v-plate-s: var(--c-fg); --v-act: var(--c-fg); --v-act-fg: var(--c-on); }
html body .ph-ilu svg { display: block; width: 100%; height: auto; overflow: visible; }
html body .ph-ilu .pl-edge, html body .ph-ilu .pl-top { fill: var(--v-plate); stroke: var(--v-plate-s); stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .ph-ilu .il-l { fill: none; stroke: var(--v-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .ph-ilu .il-f { fill: none; stroke: var(--v-fg); stroke-width: 1.6; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; opacity: 0; }
html body .ph-ilu .il-last .lk path { fill: var(--v-fg); }
html body .ph-ilu .il-last .lk-suf { font-family: var(--font-f-font-mono); font-weight: 500; letter-spacing: .08em; fill: var(--v-fg); }
/* 31. 10. 2026 (prieskum animácií, nález 2): pohyb ilustrácie LEN keď návštevník nemá „obmedziť pohyb“ — predtým ho
   vypínalo slabšie pravidlo (* { animation: none }), ktoré tieto pravidlá prebili, a ilustrácia bežala aj pri obmedzenom pohybe */
@media (prefers-reduced-motion: no-preference) {
  html body .ph-ilu .il-f { animation: il-f 7s linear infinite, il-dash var(--t-pomaly) linear infinite; animation-delay: calc(var(--i) * 0.7s + .35s), 0s; }
  html body .ph-ilu .il-st:not(.il-last) { animation: il-up 7s var(--f-ease, ease) infinite; animation-delay: calc(var(--i) * 0.7s); }
  html body .ph-ilu .il-st:not(.il-last) .pl-top { animation: il-on 7s var(--f-ease, ease) infinite; animation-delay: calc(var(--i) * 0.7s); }
  html body .ph-ilu .il-last { animation: il-last-up 7s var(--f-ease) infinite; }
  html body .ph-ilu .il-last .pl-top { animation: il-last-on 7s var(--f-ease, ease) infinite; }
  html body .ph-ilu .il-last :is(.lk path, .lk-suf) { animation: il-last-lk 7s var(--f-ease, ease) infinite; }
}
@media (prefers-reduced-motion: reduce) { html body .ph-ilu .il-last .pl-top { fill: var(--v-act); } }
@media (prefers-reduced-motion: reduce) { html body .ph-ilu .il-last .lk path, html body .ph-ilu .il-last .lk-suf { fill: var(--v-act-fg); } }
@media (min-width: 861px) and (max-width: 1180px) { html body #o-mne .ph-ilu { order: -1; width: 100%; max-width: 820px; margin: 8px auto 56px; } }
@media (max-width: 860px) { html body #o-mne .ph-ilu { order: -1; width: 100%; max-width: none; margin: 8px 0 40px; } }
/* Cesty (úvod 01): názov animácie každej dosky / linky je v HTML ako premenná --an (doska), --fk (vrch dosky),
   nie ako vložený štýl animation-name — ten sa nedal vypnúť pri „obmedziť pohyb“ (31. 10. 2026) */
@media (prefers-reduced-motion: no-preference) {
  html body .ph-ilu--cesty .il-c { animation: var(--an) 28.50s var(--f-ease) infinite; }
  html body .ph-ilu--cesty .il-c .pl-top { animation: var(--fk) 28.50s var(--f-ease) infinite; }
  html body .ph-ilu--cesty .il-f { animation-name: var(--an); animation-delay: 0s, 0s; animation-duration: 28.50s, var(--t-dlhy); animation-timing-function: linear, linear; animation-iteration-count: infinite, infinite; }
}
@media (prefers-reduced-motion: reduce) { html body .ph-ilu--cesty .il-f { opacity: .5; } }
/* 31. 10. 2026 (prieskum animácií, nález 2b): mimo záberu ilustrácia stojí (is-vis prepína ph-viz.js); posledné pravidlo
   súboru, aby prebilo rovnako silné pravidlá pohybu vyššie */
html.f-js body .ph-ilu:not(.is-vis) * { animation-play-state: paused; }