/*
 * Card Animation Styles - Viewport Triggered
 * Animations are paused by default and triggered when cards enter viewport
 */

/* Fade-In animation */
.ns-card--animate-fade-in {
	animation: ns-fade-in var(--ns-animation-duration, 0.6s) ease-out forwards;
	opacity: 0;
	animation-play-state: paused;
}

/* Slide-Up animation */
.ns-card--animate-slide-up {
	animation: ns-slide-up var(--ns-animation-duration, 0.6s) ease-out forwards;
	opacity: 0;
	animation-play-state: paused;
}

/* Zoom animation */
.ns-card--animate-zoom-in {
	animation: ns-zoom-in var(--ns-animation-duration, 0.6s) ease-out forwards;
	opacity: 0;
	animation-play-state: paused;
}

/* Rotate animation */
.ns-card--animate-rotate-in {
	animation: ns-rotate-in var(--ns-animation-duration, 0.6s) ease-out forwards;
	opacity: 0;
	animation-play-state: paused;
}

/* Dynamic animation delay based on card index and user-defined delay */
.ns-card--animate-fade-in,
.ns-card--animate-slide-up,
.ns-card--animate-zoom-in,
.ns-card--animate-rotate-in {
	animation-delay: calc(var(--ns-animation-delay, 0.15s) * var(--ns-card-index, 0));
}

/* Resume animation when card enters viewport */
.ns-card--animate-fade-in[data-animated="true"],
.ns-card--animate-slide-up[data-animated="true"],
.ns-card--animate-zoom-in[data-animated="true"],
.ns-card--animate-rotate-in[data-animated="true"] {
	animation-play-state: running;
}