/* =====================================================================
 * Ilustrace šablony – animace podle motivu (třída vz-svg--<motiv>).
 * Načítá se jen se bloky, které ilustrace používají (Ilustrace, Panely, Kroky).
 * Barvy: třídy s-i, f-o … v style.css. Kresba „draw“: style.css.
 * ===================================================================== */

.vz-ilustrace { display: grid; place-items: center; }
.vz-ilustrace .vz-svg { width: 100%; height: auto; }

/* ── dohoda: vy a já, dva kruhy se v rytmu dechu přibližují ── */
.vz-svg--dohoda { width: min(340px, 78vw); aspect-ratio: 1; }
.vz-svg--dohoda .you { animation: vz-il-vlevo 8s ease-in-out infinite; }
.vz-svg--dohoda .me { animation: vz-il-vpravo 8s ease-in-out infinite; }
.vz-svg--dohoda .meet { animation: vz-il-setkani 8s ease-in-out infinite; transform-origin: 170px 170px; }
.vz-svg--dohoda .tag { font: 500 13px var(--vz-sans); letter-spacing: .12em; text-transform: uppercase; }
@keyframes vz-il-vlevo { 0%, 100% { transform: translateX(-14px); } 50% { transform: translateX(6px); } }
@keyframes vz-il-vpravo { 0%, 100% { transform: translateX(14px); } 50% { transform: translateX(-6px); } }
@keyframes vz-il-setkani { 0%, 100% { transform: scale(.7); opacity: .55; } 50% { transform: scale(1.15); opacity: 1; } }

/* ── pečeť EABP: text se pomalu otáčí ── */
.vz-svg--pecet-eabp { width: min(210px, 60vw); aspect-ratio: 1; }
.vz-svg--pecet-eabp .spin { transform-origin: 100px 100px; animation: vz-il-toc 40s linear infinite; }
.vz-svg--pecet-eabp .text { font: 500 10.5px var(--vz-sans); letter-spacing: .32em; fill: var(--vz-inkoust); }

/* ── situace u omluvy (tmavé karty) ── */
:is(.vz-svg--hodiny-telefon, .vz-svg--zruseny-termin, .vz-svg--dva-kruhy) { width: 100%; height: 84px; }
.vz-svg--hodiny-telefon .hand { transform-origin: 42px 42px; animation: vz-il-15 6s var(--vz-ease) infinite; }
.vz-svg--hodiny-telefon .arc { stroke-dasharray: 0 200; animation: vz-il-15obl 6s var(--vz-ease) infinite; }
.vz-svg--hodiny-telefon .phone { transform-box: fill-box; transform-origin: center; animation: vz-il-zvoni 6s ease-in-out infinite; }
@keyframes vz-il-15 { 0%, 8% { transform: rotate(0); } 55%, 100% { transform: rotate(90deg); } }
@keyframes vz-il-15obl { 0%, 8% { stroke-dasharray: 0 200; } 55%, 100% { stroke-dasharray: 47 200; } }
@keyframes vz-il-zvoni { 0%, 58%, 82%, 100% { transform: translateX(14px) rotate(0); } 61%, 67%, 73% { transform: translateX(14px) rotate(-14deg); } 64%, 70%, 76% { transform: translateX(14px) rotate(14deg); } }
.vz-svg--zruseny-termin .x { stroke-dasharray: 1; animation: vz-il-x 6s var(--vz-ease) infinite; }
.vz-svg--zruseny-termin .next { animation: vz-il-dalsi 6s var(--vz-ease) infinite; }
.vz-svg--zruseny-termin .tick { stroke-dasharray: 1; animation: vz-il-fajfka 6s var(--vz-ease) infinite; }
@keyframes vz-il-x { 0%, 10% { stroke-dashoffset: 1; } 35%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes vz-il-dalsi { 0%, 40% { fill: transparent; } 55%, 90% { fill: rgba(var(--vz-salvej-rgb), .25); } 100% { fill: transparent; } }
@keyframes vz-il-fajfka { 0%, 48% { stroke-dashoffset: 1; } 68%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.vz-svg--dva-kruhy .a { animation: vz-il-a 6s var(--vz-ease) infinite; }
.vz-svg--dva-kruhy .b { animation: vz-il-b 6s var(--vz-ease) infinite; }
.vz-svg--dva-kruhy .go { transform-origin: 100px 42px; animation: vz-il-start 6s var(--vz-ease) infinite; }
@keyframes vz-il-a { 0%, 10% { transform: translateX(-46px); } 45%, 90% { transform: translateX(0); } 100% { transform: translateX(-46px); } }
@keyframes vz-il-b { 0%, 25% { transform: translateX(56px); } 55%, 90% { transform: translateX(0); } 100% { transform: translateX(56px); } }
@keyframes vz-il-start { 0%, 55% { transform: scale(0); opacity: 0; } 65% { transform: scale(1.15); opacity: 1; } 72%, 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }

/* ── O mně: přístup (tělo, všímavost, lidsky) a cvičení ── */
.vz-svg .pulse { transform-box: fill-box; transform-origin: center; animation: vz-il-pulz 3.2s ease-in-out infinite; }
@keyframes vz-il-pulz { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.15); } }
.vz-svg .ring { transform-box: fill-box; transform-origin: center; animation: vz-il-kruh 3.6s ease-out infinite; }
.vz-svg .ring.r2 { animation-delay: 1.2s; } .vz-svg .ring.r3 { animation-delay: 2.4s; }
@keyframes vz-il-kruh { 0% { transform: scale(.12); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.vz-svg .drift { animation: vz-il-mraky 9s linear infinite; }
.vz-svg .drift.f2 { animation-delay: -3s; } .vz-svg .drift.f3 { animation-delay: -6s; }
@keyframes vz-il-mraky { 0% { transform: translateX(-30px); opacity: 0; } 15%, 85% { opacity: .8; } 100% { transform: translateX(230px); opacity: 0; } }
.vz-svg .scan { animation: vz-il-sken 3s ease-in-out infinite; }
@keyframes vz-il-sken { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(58px); } }
.vz-svg .breath { transform-box: fill-box; transform-origin: center; animation: vz-il-dech 10s ease-in-out infinite; }
@keyframes vz-il-dech { 0%, 100% { transform: scale(.55); } 40% { transform: scale(1); } }
.vz-svg .bl-in { animation: vz-il-nadech 10s linear infinite; }
.vz-svg .bl-out { animation: vz-il-vydech 10s linear infinite; }
@keyframes vz-il-nadech { 0%, 38% { opacity: 1; } 40%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vz-il-vydech { 0%, 38% { opacity: 0; } 40%, 98% { opacity: 1; } 100% { opacity: 0; } }
.vz-svg .step { opacity: 0; animation: vz-il-krok 4s ease infinite; }
.vz-svg .step.s2 { animation-delay: .6s; } .vz-svg .step.s3 { animation-delay: 1.2s; } .vz-svg .step.s4 { animation-delay: 1.8s; }
@keyframes vz-il-krok { 0% { opacity: 0; transform: translateY(4px); } 12%, 70% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }

/* ── Témata: čárové metafory (tema-*) a cvičení (zkuste-*) ── */
.vz-svg.vz-art { width: 100%; height: auto; aspect-ratio: 320 / 160; }
:is(.vz-art, .vz-try-art) :is(path, circle, line, polyline, ellipse, rect) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
:is(.vz-art, .vz-try-art) .n { stroke: var(--vz-inkoust); }
:is(.vz-art, .vz-try-art) .o { stroke: var(--vz-oranz); }
:is(.vz-art, .vz-try-art) .g { stroke: var(--vz-zelen); }
:is(.vz-art, .vz-try-art) .fg { fill: var(--vz-salvej-svetla); }
:is(.vz-art, .vz-try-art) .fo { fill: var(--vz-oranz); stroke: none; }
.vz-try-art .fn { fill: var(--vz-inkoust); stroke: none; }
.vz-try-art text { font-family: var(--vz-sans); font-size: 10px; letter-spacing: .06em; text-anchor: middle; stroke: none; }
.vz-try-art .a { transform-box: fill-box; transform-origin: center; }
.vz-art .d { stroke-dasharray: 1; stroke-dashoffset: 0; }
.is-drawing .vz-art .d { animation: vz-il-kresba 1.6s cubic-bezier(.45, 0, .2, 1) both; }
.is-drawing .vz-art .f { animation: vz-il-objev .9s ease both; }
@keyframes vz-il-kresba { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes vz-il-objev { from { opacity: 0; } to { opacity: 1; } }
.vz-try-art .vz-gather { animation: vz-il-celek 6s ease-in-out infinite; }
@keyframes vz-il-celek { 0%, 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } 40%, 75% { transform: none; } }
.vz-try-art .vz-breath { animation: vz-il-dech2 11s ease-in-out infinite; }
.vz-try-art .vz-breath-in { animation: vz-il-nadech2 11s linear infinite; }
.vz-try-art .vz-breath-out { animation: vz-il-vydech2 11s linear infinite; }
@keyframes vz-il-dech2 { 0% { transform: scale(.5); } 36% { transform: scale(1); } 100% { transform: scale(.5); } }
@keyframes vz-il-nadech2 { 0%, 34% { opacity: 1; } 37%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vz-il-vydech2 { 0%, 34% { opacity: 0; } 37%, 97% { opacity: 1; } 100% { opacity: 0; } }
.vz-try-art .vz-pulse { animation: vz-il-vlna 2.6s ease-out infinite; }
@keyframes vz-il-vlna { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.vz-try-art .vz-scan { animation: vz-il-sken2 5s ease-in-out infinite; }
@keyframes vz-il-sken2 { 0%, 8% { transform: translateY(0); } 50%, 58% { transform: translateY(-74px); } 100% { transform: translateY(0); } }
.vz-try-art .vz-step { animation: vz-il-schod 5s steps(1) infinite; opacity: .25; }
@keyframes vz-il-schod { 0%, 19.99% { opacity: 1; } 20%, 100% { opacity: .25; } }

/* ── ikony s pohybem ── */
@keyframes vz-il-toc { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .vz-svg .mover { display: none; }
    .vz-svg .ring { opacity: .35; }
    .vz-svg .step, .vz-try-art .vz-step { opacity: 1; }
    .vz-svg .bl-out, .vz-try-art .vz-breath-out { opacity: 0; }
    .vz-svg .drift { opacity: .6; }
}