/* =========================================================================
   VYKUKUJÍCÍ KOČKY nad rámečky sekcí (album = zelená vpravo, koncerty =
   modrá vlevo, klipy = červená vpravo) – jediná animace při posouvání
   (Jakub 2026-10-20: „animace žádné, ale kočky ano“; dřívější varianty
   A/B jsou v gitu pod značkou animace-a-b).

   Kočka (.mb-kukuc, vkládá ji functions.php) je uvnitř štítku a drží se
   jeho okraje: sedí na čáře vedle něj (střed štítku = čára rámečku),
   a když vedle není místo (úzký displej, dlouhý nadpis), vykukuje zpoza
   horní hrany štítku – o tom rozhoduje assets/kocky.js třídou is-na-stitku.
   Pod čárou je hlava useknutá (overflow) – jako by koukala přes zeď.

   Obrázky img/kocka-*.webp jsou celé kočky od Jakuba (676 × 620, zmenšené,
   neořezané); hlava je výřez přes background: šířka výřezu W z x = X,
   výška H od vršku → aspect-ratio W / H, background-size 676 / W,
   background-position-x X / (676 − W).
   S prefers-reduced-motion kočka jen klidně vykukuje (koncový stav animace);
   bez podpory animací podle posouvání vykoukne podle času (assets/kocky.js).
   ========================================================================= */

/* Místo nad rámečkem pro kočku (style.css → odstup sekcí): nejvyšší
   z hlav = zelená 330/580 × clamp(103px, 15.8vw, 171px). Rezervuje se vždy
   celá výška, i když kočka sedí vedle štítku – nic pak neposkakuje. */
:root {
	--mb-kukuc-vyska: clamp(58px, 9vw, 98px);
}

.is-style-mb-ramecek,
.is-style-mb-stitek {
	position: relative;
}

.mb-kukuc {
	--mb-kukuc-mezera: clamp(1rem, 3vw, 2.25rem);
	display: block;
	position: absolute;
	bottom: calc(50% + 1px);
	left: calc(100% + var(--mb-kukuc-mezera));
	width: clamp(78px, 12vw, 130px);
	overflow: hidden;
	pointer-events: none;
	view-timeline: --mb-kukuc;
}
.mb-kukuc > span {
	display: block;
	height: 100%;
	transform-origin: 50% 100%;
	translate: 0 6%;
	background: 0 0 / auto no-repeat;
}

/* zelená: X 0, W 580, H 330 – široká kvůli srsti na krku vpravo
   (hlava je stejně velká jako u ostatních, box je jen širší) */
.mb-kukuc--zelena {
	aspect-ratio: 580 / 330;
	width: clamp(103px, 15.8vw, 171px);
}
.mb-kukuc--zelena > span {
	background-image: url("img/kocka-zelena.webp");
	background-size: 116.55% auto;
}

/* modrá: X 75, W 430, H 268 – vlevo od štítku */
.mb-kukuc--modra {
	left: auto;
	right: calc(100% + var(--mb-kukuc-mezera));
	aspect-ratio: 430 / 268;
}
.mb-kukuc--modra > span {
	background-image: url("img/kocka-modra.webp");
	background-size: 157.21% auto;
	background-position: 30.49% 0;
}

/* červená: X 105, W 495, H 300 */
.mb-kukuc--cervena {
	aspect-ratio: 495 / 300;
	width: clamp(88px, 13.5vw, 148px);
}
.mb-kukuc--cervena > span {
	background-image: url("img/kocka-cervena.webp");
	background-size: 136.57% auto;
	background-position: 58.01% 0;
}

/* zpoza horní hrany štítku */
.mb-kukuc.is-na-stitku {
	bottom: 100%;
	left: auto;
	right: 0.2em;
}
.mb-kukuc--modra.is-na-stitku {
	left: 0.2em;
	right: auto;
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes mb-kuk {
		0%   { translate: 0 100%; rotate: 0deg; }
		45%  { translate: 0 40%;  rotate: -7deg; }
		70%  { translate: 0 2%;   rotate: 5deg; }
		100% { translate: 0 6%;   rotate: 0deg; }
	}
	@supports (animation-timeline: view()) {
		.mb-kukuc > span {
			animation: mb-kuk linear both;
			animation-timeline: --mb-kukuc;
			animation-range: cover 10% cover 45%;
		}
	}
	/* Náhrada pro prohlížeče bez animací podle posouvání (Safari do iOS 18):
	   assets/kocky.js dá <html> třídu mb-kukuc-js a kočce is-kuk, když
	   vyjede na obrazovku – vykoukne jednou podle času, ne podle posunu. */
	.mb-kukuc-js .mb-kukuc > span {
		translate: 0 100%;
	}
	.mb-kukuc-js .mb-kukuc.is-kuk > span {
		animation: mb-kuk 1.1s var(--mb-ease, ease-out) both;
	}
}