/* Slava Mini Carousel — Elementor Widget */

.slava-mini-carousel {
	--photo-w: 360px;
	--photo-h: 448px;
	--stack-w: 605px;
	--offset: 245px;
	--card-radius: 28px;
	display: grid;
	justify-items: center;
	width: 100%;
}

/* Placeholder (editor only) */
.slava-mini-carousel__placeholder {
	display: grid;
	place-items: center;
	min-height: 280px;
	border: 2px dashed rgba(0, 0, 0, 0.15);
	border-radius: 1rem;
	color: #666;
	font-size: 0.95rem;
}

/* ── Stack container ── */
.slava-mini-carousel__stack {
	position: relative;
	width: var(--stack-w);
	max-width: 100%;
	height: calc(var(--photo-h) + 24px);
}

/* ── Photo cards ── */
.slava-mini-carousel__photo {
	--tilt: 0deg;
	--hover-tilt: 0deg;
	--hover-x: 0px;
	--hover-y: -18px;
	--hover-scale: 1.04;
	position: absolute;
	top: 12px;
	left: 0;
	width: var(--photo-w);
	height: var(--photo-h);
	margin: 0;
	padding: 14px;
	border: 0;
	border-radius: var(--card-radius);
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 239, 0.66));
	box-shadow:
		0 28px 60px rgba(56, 31, 13, 0.2),
		0 10px 18px rgba(56, 31, 13, 0.12);
	cursor: pointer;
	opacity: 0;
	overflow: hidden;
	outline: none;
	isolation: isolate;
	filter: saturate(0.98);
	will-change: transform;
	transform: translate3d(0, 48px, 0) scale(0.9) rotate(var(--tilt));
	transform-origin: center center;
	transition:
		transform 520ms cubic-bezier(0.19, 1, 0.22, 1),
		box-shadow 460ms ease,
		filter 460ms ease,
		z-index 120ms linear;
	animation: slava-mini-settle 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slava-mini-carousel__photo::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, 0.72);
	pointer-events: none;
	opacity: 0.72;
	transition: opacity 360ms ease, border-color 360ms ease;
}

/* Sheen overlay */
.slava-mini-carousel__photo::after {
	content: "";
	position: absolute;
	inset: -26%;
	border-radius: 40px;
	background:
		linear-gradient(
			118deg,
			transparent 26%,
			rgba(255, 255, 255, 0.08) 40%,
			rgba(255, 255, 255, 0.72) 49%,
			rgba(255, 255, 255, 0.16) 56%,
			transparent 68%
		);
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	transform: translateX(-64%) rotate(12deg);
}

.slava-mini-carousel__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: calc(var(--card-radius) - 8px);
	background: linear-gradient(180deg, #efe8dc, #ddd2c0);
	transform: scale(1);
	transition:
		transform 560ms cubic-bezier(0.19, 1, 0.22, 1),
		filter 360ms ease;
}

/* ── Back photo ── */
.slava-mini-carousel__photo--back {
	--tilt: -6deg;
	--hover-tilt: -1deg;
	--hover-x: 22px;
	--hover-y: -26px;
	--hover-scale: 1.05;
	z-index: 1;
	transform-origin: 78% 52%;
}

/* ── Front photo ── */
.slava-mini-carousel__photo--front {
	--tilt: 5deg;
	--hover-tilt: 1deg;
	--hover-x: -18px;
	--hover-y: -24px;
	--hover-scale: 1.05;
	top: 0;
	left: var(--offset);
	z-index: 2;
	transform-origin: 18% 48%;
	animation-delay: 120ms;
}

/* ── Hover / focus states ── */
.slava-mini-carousel__photo:is(:hover, :focus-visible) {
	z-index: 5;
	filter: saturate(1.08) brightness(1.04);
	box-shadow:
		0 42px 86px rgba(56, 31, 13, 0.3),
		0 18px 30px rgba(56, 31, 13, 0.18);
	transform:
		translate3d(var(--hover-x), var(--hover-y), 0)
		scale(var(--hover-scale))
		rotate(var(--hover-tilt));
}

.slava-mini-carousel__photo:is(:hover, :focus-visible)::before {
	opacity: 1;
	border-color: rgba(255, 255, 255, 0.96);
}

.slava-mini-carousel__photo:is(:hover, :focus-visible)::after {
	opacity: 0.95;
	animation: slava-mini-sheen 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.slava-mini-carousel__photo:is(:hover, :focus-visible) img {
	filter: saturate(1.04) contrast(1.03);
	transform: scale(1.085);
}

.slava-mini-carousel__photo:focus-visible {
	box-shadow:
		0 0 0 4px rgba(180, 95, 53, 0.16),
		0 42px 86px rgba(56, 31, 13, 0.3),
		0 18px 30px rgba(56, 31, 13, 0.18);
}

/* ── Keyframes ── */
@keyframes slava-mini-settle {
	0% {
		opacity: 0;
		filter: blur(8px) saturate(0.9);
	}
	100% {
		opacity: 1;
		filter: blur(0) saturate(0.98);
		transform: translateY(0) scale(1) rotate(var(--tilt));
	}
}

@keyframes slava-mini-sheen {
	0% {
		transform: translateX(-64%) rotate(12deg);
	}
	100% {
		transform: translateX(64%) rotate(12deg);
	}
}

/* ── Responsive ── */
@media (max-width: 720px) {
	.slava-mini-carousel {
		--photo-w: 300px;
		--photo-h: 373px;
		--stack-w: 504px;
		--offset: 204px;
	}
}

@media (max-width: 580px) {
	.slava-mini-carousel {
		--photo-w: 55vw;
		--photo-h: calc(55vw * 1.244);
		--stack-w: 92vw;
		--offset: 37vw;
	}
}

@media (max-width: 360px) {
	.slava-mini-carousel {
		--photo-w: 52vw;
		--photo-h: calc(52vw * 1.244);
		--stack-w: 88vw;
		--offset: 36vw;
		--card-radius: 22px;
	}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.slava-mini-carousel__photo {
		opacity: 1;
		animation: none;
		transform: rotate(var(--tilt));
		transition: none;
	}

	.slava-mini-carousel__photo::after {
		display: none;
	}

	.slava-mini-carousel__photo:is(:hover, :focus-visible) {
		transform: scale(1.02) rotate(var(--hover-tilt));
	}

	.slava-mini-carousel__photo:is(:hover, :focus-visible) img {
		transform: scale(1.03);
	}
}