/* ============================================================
   BC24 Hero Top — interaktywny kolaż zdjęć
   ============================================================ */

/* Kontener Kadence wypełnia kwadrat hero-right */
.hero-right .kt-inside-inner-col {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Wrapper każdego zdjęcia — JS ustawia tu transform (rot + parallax) */
.bc24-img {
	position: absolute;
	will-change: transform;
	cursor: pointer;
}

/* Warstwa float — CSS animation żyje tu, niezależnie od JS */
.bc24-float {
	width: 100%;
}

/* Zdjęcia */
.bc24-img img {
	display: block;
	width: 100%;
	height: auto;
}

/* Pauza float na hover — daje poczucie "złapania" */
.bc24-img:hover .bc24-float {
	animation-play-state: paused;
}

/* Overlay-link — cały krąg klikalny */
.bc24-hero-link {
	position: absolute;
	inset: 0;
	z-index: 9;
	border-radius: 50%;
	cursor: pointer;
	display: block;
}

/* ============================================================
   Pozycje, rozmiary, z-index
   ============================================================ */

.bc24-img-1 { /* Lew — na przodzie, centrum */
	width: 58%;
	left: 21%;
	top: 13%;
	z-index: 5;
}

.bc24-img-2 { /* Panda — bok (prawy), częściowo poza kołem */
	width: 26%;
	right: -4%;
	top: 28%;
	z-index: 2;
}

.bc24-img-3 { /* Panda — górny lewy, za lwem */
	width: 34%;
	left: 3%;
	top: 7%;
	z-index: 2;
}

.bc24-img-4 { /* Klocki drewniane — dół */
	width: 47%;
	left: 15%;
	bottom: 4%;
	z-index: 1;
}

/* ============================================================
   Float animations — 3 warianty, różne fazy
   ============================================================ */

@keyframes bc24-float-a {
	0%, 100% { transform: translateY(0px); }
	50%       { transform: translateY(-10px); }
}

@keyframes bc24-float-b {
	0%, 100% { transform: translateY(0px)  translateX(0px); }
	40%      { transform: translateY(-8px) translateX(2px); }
	80%      { transform: translateY(-3px) translateX(-1px); }
}

@keyframes bc24-float-c {
	0%, 100% { transform: translateY(0px); }
	35%      { transform: translateY(-12px); }
	70%      { transform: translateY(-4px); }
}

.bc24-img-1 .bc24-float { animation: bc24-float-c 4.8s ease-in-out infinite 0.8s; } /* lew — główny, głęboki float */
.bc24-img-2 .bc24-float { animation: bc24-float-b 6.5s ease-in-out infinite 1.5s; }
.bc24-img-3 .bc24-float { animation: bc24-float-a 5.5s ease-in-out infinite 2.0s; } /* panda — spokojniejszy */
.bc24-img-4 .bc24-float { animation: bc24-float-a 7.2s ease-in-out infinite 2.3s; }

/* ============================================================
   Mobile — tylko ukrycie overlay-linka
   ============================================================ */

@media (max-width: 767px) {
	.bc24-hero-link {
		display: none;
	}

	.bc24-float {
		animation: none !important;
	}
}