/**
 * Flip animation styles for ChronoPress Countdown Block
 *
 * @package ChronoPressCountdownBlock
 */

/* Flip animation for countdown values */
.countdown-timer--flip .countdown-timer__value {
	position: relative;
	transform-style: preserve-3d;
	perspective: 1000px;
	overflow: hidden;
}

/* Page flip animation when value changes */
.countdown-timer--flip .countdown-timer__value.page-flip {
	animation: pageFlip 0.6s ease-in-out;
}

@keyframes pageFlip {
	0% {
		transform: rotateX(0deg);
		opacity: 1;
	}
	50% {
		transform: rotateX(-90deg);
		opacity: 0.3;
	}
	51% {
		transform: rotateX(90deg);
		opacity: 0.3;
	}
	100% {
		transform: rotateX(0deg);
		opacity: 1;
	}
}

/* Add depth effect during flip */
.countdown-timer--flip .countdown-timer__value.page-flip::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
	opacity: 0;
	animation: flipShine 0.6s ease-in-out;
	pointer-events: none;
	z-index: 1;
}

@keyframes flipShine {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0.5;
	}
	50% {
		opacity: 0.8;
	}
	75% {
		opacity: 0.5;
	}
	100% {
		opacity: 0;
	}
}

/* Shadow effect during flip for depth */
.countdown-timer--flip .countdown-timer__value.page-flip {
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.4), 
	            0 10px 40px rgba(0, 0, 0, 0.6);
}

/* Smooth transitions for non-animating state */
.countdown-timer--flip .countdown-timer__value:not(.page-flip) {
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}