/**
 * MTCLU Flip Grid – Premium Animations & Effects
 * GPU-accelerated microinteractions
 */

/* ─── Shine Effect ──────────────────────────────────────── */
.mtclu-flip-card__shine {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		105deg,
		transparent 40%,
		rgba(255, 255, 255, 0.12) 45%,
		rgba(255, 255, 255, 0.25) 50%,
		rgba(255, 255, 255, 0.12) 55%,
		transparent 60%
	);
	transform: translate3d(-100%, 0, 0);
	transition: opacity 0.4s ease;
}

.mtclu-flip-card--shine-active:hover .mtclu-flip-card__shine,
.mtclu-flip-card--shine-active.is-flipped .mtclu-flip-card__shine {
	opacity: 1;
	animation: mtclu-shine 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes mtclu-shine {
	0% {
		transform: translate3d(-100%, 0, 0);
	}
	100% {
		transform: translate3d(100%, 0, 0);
	}
}

/* ─── Glow Effect ───────────────────────────────────────── */
.mtclu-flip-card--glow::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: calc(var(--mtclu-card-radius) + 2px);
	background: linear-gradient(
		135deg,
		rgba(59, 130, 246, 0) 0%,
		rgba(59, 130, 246, 0.15) 50%,
		rgba(139, 92, 246, 0.15) 100%
	);
	opacity: 0;
	z-index: -1;
	transition: opacity calc(var(--mtclu-speed) * 1s) cubic-bezier(0.23, 1, 0.32, 1);
	filter: blur(8px);
}

.mtclu-flip-card--glow:hover::before,
.mtclu-flip-card--glow.is-flipped::before,
.mtclu-flip-card--glow:focus-within::before {
	opacity: 1;
}

/* ─── Animated Border Glow ──────────────────────────────── */
.mtclu-flip-card--border-glow::after {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: calc(var(--mtclu-card-radius) + 1px);
	padding: 1px;
	background: linear-gradient(
		var(--mtclu-border-angle, 0deg),
		#3b82f6,
		#8b5cf6,
		#06b6d4,
		#3b82f6
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	z-index: 3;
	pointer-events: none;
	transition: opacity 0.5s ease;
	animation: mtclu-border-rotate 4s linear infinite;
	animation-play-state: paused;
}

.mtclu-flip-card--border-glow:hover::after,
.mtclu-flip-card--border-glow.is-flipped::after {
	opacity: 1;
	animation-play-state: running;
}

@keyframes mtclu-border-rotate {
	to {
		--mtclu-border-angle: 360deg;
	}
}

@property --mtclu-border-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

/* ─── Moving Gradient Background ────────────────────────── */
.mtclu-flip-card--moving-gradient .mtclu-flip-card__face--back {
	background-size: 200% 200% !important;
	animation: mtclu-gradient-shift 8s ease infinite;
}

@keyframes mtclu-gradient-shift {
	0%, 100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

/* ─── Glassmorphism Back ────────────────────────────────── */
.mtclu-flip-card--glass .mtclu-flip-card__face--back {
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	background: rgba(255, 255, 255, 0.85) !important;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ─── Blur Overlay ──────────────────────────────────────── */
.mtclu-flip-card--blur .mtclu-flip-card__overlay {
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* ─── Tilt Transform (applied via JS) ───────────────────── */
.mtclu-flip-card.is-tilting .mtclu-flip-card__scene {
	transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ─── Parallax Layer ────────────────────────────────────── */
.mtclu-flip-card.is-parallax .mtclu-flip-card__image {
	transition: transform 0.1s linear;
}

/* ─── Touch / Mobile Flip Toggle ────────────────────────── */
@media (hover: none) and (pointer: coarse) {
	.mtclu-flip-card:hover .mtclu-flip-card__inner {
		transform: none;
	}

	.mtclu-flip-card.is-flipped .mtclu-flip-card__inner {
		transform: rotateY(180deg);
	}

	.mtclu-flip-card:hover .mtclu-flip-card__back-content {
		transform: translate3d(0, 10px, 0);
	}

	.mtclu-flip-card.is-flipped .mtclu-flip-card__back-content {
		transform: translate3d(0, 0, 0);
	}
}

/* ─── Elementor Compatibility ───────────────────────────── */
.elementor-widget-mtclu_flip_grid .mtclu-flip-grid {
	width: 100%;
}