/* =====================================================================
 * 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: 0.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(0.7);
		opacity: 0.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: 0.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), 0.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(0.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(0.12);
		opacity: 0.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: 0.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(0.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: 0.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: 0.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(0.45, 0, 0.2, 1) both;
}
.is-drawing .vz-art .f {
	animation: vz-il-objev 0.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(0.5);
	}
	36% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.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(0.4);
		opacity: 0.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: 0.25;
}
@keyframes vz-il-schod {
	0%,
	19.99% {
		opacity: 1;
	}
	20%,
	100% {
		opacity: 0.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: 0.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: 0.6;
	}
}