/**
 * Image Stack Widget Styles
 * 
 * Styles for the animated image stack widget with zoom-fan effect
 *
 * @package Serenity_CTA_Elements
 */

/* ===============================
   CSS VARIABLES (DEFAULTS)
================================ */
.elementor-widget-serenity_image_stack .zoom-fan {
	--card-width: 320px;
	--card-height: 420px;
	--radius: 22px;
	--angle-bottom: 8deg;
	--angle-middle: -6deg;
	--card-reveal-duration: 1.2s;
	--delay-bottom: 0s;
	--delay-middle: 0.6s;
	--delay-top: 1.2s;
}

/* ===============================
   WRAPPER
================================ */
.elementor-widget-serenity_image_stack .zoom-fan-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 520px;
	width: 100%;
}

/* ===============================
   CAMERA ZOOM
================================ */
.elementor-widget-serenity_image_stack .zoom-fan {
	position: relative;
	width: var(--card-width);
	height: var(--card-height);
	animation: cameraZoomOut 1.3s cubic-bezier(.22,1,.36,1) forwards;
}

/* ===============================
   CARD BASE
================================ */
.elementor-widget-serenity_image_stack .fan-card {
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0,0,0,.28);
	opacity: 0;
	transform-origin: center center;
}

.elementor-widget-serenity_image_stack .fan-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ===============================
   FAN STACK (BOTTOM → TOP)
================================ */
.elementor-widget-serenity_image_stack .card-bottom {
	z-index: 1;
	/* Start with angle already applied, just scale down and fade in */
	transform: rotate(var(--angle-bottom)) scale(.9);
	animation: cardRevealBottom var(--card-reveal-duration, 1.2s) cubic-bezier(.22,1,.36,1) forwards;
	animation-delay: var(--delay-bottom, 0s);
}

.elementor-widget-serenity_image_stack .card-middle {
	z-index: 2;
	/* Start with angle already applied, just scale down and fade in */
	transform: rotate(var(--angle-middle)) scale(.9);
	animation: cardRevealMiddle var(--card-reveal-duration, 1.2s) cubic-bezier(.22,1,.36,1) forwards;
	animation-delay: var(--delay-middle, 0.6s);
}

.elementor-widget-serenity_image_stack .card-top {
	z-index: 3;
	/* Start straight, just scale down and fade in */
	transform: rotate(0deg) scale(.9);
	animation: cardRevealTop var(--card-reveal-duration, 1.2s) cubic-bezier(.22,1,.36,1) forwards;
	animation-delay: var(--delay-top, 1.2s);
}

/* ===============================
   ANIMATIONS
================================ */
@keyframes cameraZoomOut {
	to {
		transform: scale(1);
	}
}

/* Card reveal animations - preserve rotation, only animate scale and opacity */
@keyframes cardRevealBottom {
	0% {
		opacity: 0;
		transform: rotate(var(--angle-bottom)) scale(.9);
	}
	70% {
		opacity: 1;
		transform: rotate(var(--angle-bottom)) scale(1.03);
	}
	100% {
		opacity: 1;
		transform: rotate(var(--angle-bottom)) scale(1);
	}
}

@keyframes cardRevealMiddle {
	0% {
		opacity: 0;
		transform: rotate(var(--angle-middle)) scale(.9);
	}
	70% {
		opacity: 1;
		transform: rotate(var(--angle-middle)) scale(1.03);
	}
	100% {
		opacity: 1;
		transform: rotate(var(--angle-middle)) scale(1);
	}
}

@keyframes cardRevealTop {
	0% {
		opacity: 0;
		transform: rotate(0deg) scale(.9);
	}
	70% {
		opacity: 1;
		transform: rotate(0deg) scale(1.03);
	}
	100% {
		opacity: 1;
		transform: rotate(0deg) scale(1);
	}
}

/* ===============================
   MOBILE RESPONSIVE
================================ */
@media (max-width: 768px) {
	.elementor-widget-serenity_image_stack .zoom-fan {
		--card-width: 260px;
		--card-height: 360px;
		--angle-bottom: 6deg;
		--angle-middle: -5deg;
	}
	
	.elementor-widget-serenity_image_stack .zoom-fan-wrapper {
		min-height: 400px;
	}
}

/* Mobile responsive styles are handled via inline styles in the widget */

/* ===============================
   EDITOR MODE
================================ */
.elementor-editor-active .elementor-widget-serenity_image_stack .zoom-fan {
	animation: none;
	transform: scale(1) !important;
}

.elementor-editor-active .elementor-widget-serenity_image_stack .fan-card {
	animation: none;
	opacity: 1 !important;
}