/* UPRAVA WANTEE (22. 9. 2026): animacia "opice" - mala scenka v hornej
   casti produktovej stranky. Jedna opica pobehuje po spodnej hrane,
   fajciarka sa priblizi a fuka dym, bublinkarka nafukuje a praska
   bublinu. Nacitava sa len na produktoch s priradenou animaciou. */

#ws-produkt-hero[data-anim] {
	position: relative;
	overflow: visible;
}

#ws-produkt-hero[data-anim] .image.magnific-popup {
	position: relative;
}

/* --- bezec ------------------------------------------------------ */

.ws-bezec {
	position: absolute;
	bottom: 6px;
	left: 0;
	width: max-content;
	pointer-events: none;
	z-index: 22;
	transform: translate3d(0, 0, 0);
	transition: transform linear;
	will-change: transform;
}

.ws-bezec-otoc {
	transition: transform .15s ease;
}

.ws-bezec.ws-smer-lavo .ws-bezec-otoc {
	transform: scaleX(-1);
}

.ws-bezec-img {
	display: block;
	height: 92px;
	width: auto;
	filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .3));
	animation: ws-behat .85s ease-in-out infinite;
}

@keyframes ws-behat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25%      { transform: translateY(-6px) rotate(-3deg); }
	50%      { transform: translateY(0) rotate(0deg); }
	75%      { transform: translateY(-6px) rotate(3deg); }
}

/* --- fajciarka (priblizi sa, fuka dym) --------------------------- */

.ws-opica-postava {
	position: absolute;
	top: 2%;
	width: max-content;
	pointer-events: none;
	z-index: 21;
}

.ws-opica-fajciarka {
	right: 4%;
	animation: ws-prist-sprava 1.7s cubic-bezier(.2, .8, .3, 1) both,
		ws-kyv 6.5s ease-in-out 1.7s infinite;
}

.ws-opica-fajciarka img {
	display: block;
	width: 130px;
	height: auto;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .28));
}

@keyframes ws-prist-sprava {
	0%   { transform: translateX(140%); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}

.ws-dym {
	position: absolute;
	left: 43%;
	top: 93%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .95), rgba(215, 215, 215, .55) 70%, rgba(215, 215, 215, 0));
	pointer-events: none;
	animation: ws-dym-stupa 3.2s ease-out forwards;
}

@keyframes ws-dym-stupa {
	0%   { transform: translate(0, 0) scale(.35); opacity: 0; }
	12%  { opacity: .7; }
	100% { transform: translate(-22px, -68px) scale(1.9); opacity: 0; }
}

/* --- bublinkarka (nafukuje a praska bublinu) --------------------- */

.ws-opica-bublinkarka {
	left: 4%;
	animation: ws-prist-zlava 1.7s cubic-bezier(.2, .8, .3, 1) both,
		ws-kyv 6s ease-in-out 1.7s infinite;
}

.ws-opica-bublinkarka img {
	display: block;
	width: 150px;
	height: auto;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .28));
}

@keyframes ws-prist-zlava {
	0%   { transform: translateX(-140%); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}

.ws-bublina {
	position: absolute;
	left: 31.4%;
	top: 75.8%;
	width: 38%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #ff9fc4, #ff5fa3 65%, #e8398a);
	pointer-events: none;
	animation: ws-bublina-nafuknut 3.6s ease-in-out forwards;
}

@keyframes ws-bublina-nafuknut {
	0%   { transform: translate(-50%, -50%) scale(.12); opacity: 0; }
	10%  { opacity: 1; }
	65%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	78%  { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
	86%  { transform: translate(-50%, -50%) scale(1.35); opacity: 0; }
	100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0; }
}

/* --- spolocne ----------------------------------------------------- */

@keyframes ws-kyv {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-4px) rotate(-1.5deg); }
}

@media (max-width: 767.98px) {
	.ws-bezec-img { height: 64px; }
	.ws-opica-fajciarka img { width: 92px; }
	.ws-opica-bublinkarka img { width: 100px; }
	.ws-dym { width: 10px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.ws-bezec,
	.ws-opica-postava,
	.ws-dym,
	.ws-bublina {
		display: none;
	}
}