.ccal-stack {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.ccal-layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	will-change: transform, opacity;
	transition-property: opacity, transform;
	transition-duration: var( --ccal-duration, 600ms );
	transition-timing-function: var( --ccal-easing, ease-out );
	transition-delay: var( --ccal-delay, 0ms );
}

.ccal-layer-content,
.ccal-layer-image,
.ccal-layer-color,
.ccal-carousel {
	width: 100%;
	height: 100%;
}

.ccal-layer-image {
	object-fit: cover;
}

/* Starting (pre-animation) states */
.ccal-anim-fade { opacity: 0; }

.ccal-anim-slide-up { opacity: 0; transform: translateY( 40px ); }
.ccal-anim-slide-down { opacity: 0; transform: translateY( -40px ); }
.ccal-anim-slide-left { opacity: 0; transform: translateX( 40px ); }
.ccal-anim-slide-right { opacity: 0; transform: translateX( -40px ); }

.ccal-anim-zoom-in { opacity: 0; transform: scale( 0.85 ); }
.ccal-anim-zoom-out { opacity: 0; transform: scale( 1.15 ); }

/* Played (visible) state — same class regardless of animation type */
.ccal-layer.ccal-play {
	opacity: 1;
	transform: translate( 0, 0 ) scale( 1 );
}

/* Carousel */
.ccal-carousel {
	position: relative;
}

.ccal-carousel-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 800ms ease-in-out;
}

.ccal-carousel-slide.is-active {
	opacity: 1;
}