/**
 * VDX Tattoo - Animations CSS
 * 
 * @package VDX_Tattoo
 * @since 1.0.0
 */

/* ========== KEYFRAMES ========== */
@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes shake {
	0%, 100% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-5px);
	}
	75% {
		transform: translateX(5px);
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

/* ========== ANIMATION CLASSES ========== */
.animate-fade-in {
	animation: fade-in 0.8s ease-out forwards;
	opacity: 0;
}

.animate-shake {
	animation: shake 0.4s ease-in-out;
}

.animate-float {
	animation: float 3s ease-in-out infinite;
}

/* ========== DELAYS ========== */
/* Delays are applied inline via style attribute for progressive animations */

/* ========== TRANSITIONS ========== */
.transition-all {
	transition: all 0.3s ease;
}

.transition-transform {
	transition: transform 0.3s ease;
}

.transition-colors {
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* ========== HOVER STATES ========== */
.hover-scale:hover {
	transform: scale(1.05);
}

.hover-scale-sm:hover {
	transform: scale(1.02);
}

/* ========== GLASSMORPHISM ========== */
.glass {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========== 3D TRANSFORMS ========== */
.perspective-1000 {
	perspective: 1000px;
}

.transform-style-3d {
	transform-style: preserve-3d;
}

.backface-hidden {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.rotate-y-180 {
	transform: rotateY(180deg);
}

/* ========== SMOOTH SCROLL ========== */
html {
	scroll-behavior: smooth;
}

/* ========== LOADING STATES ========== */
.loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
}

.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid #e5e7eb;
	border-top-color: #1f2937;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}