/* ==========================================================================
   ANIMAÇÕES LUXURY - Transições Suaves e Minimalistas (v2.0)
   Foco em elegância, sutileza e performance
   ========================================================================== */

/* ---- Fade In / Out ---- */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* ---- Slide In ---- */
@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ---- Scale Suave ---- */
@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.98);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ---- Underline Animation ---- */
@keyframes underlineGrow {
	from {
		width: 0;
		left: 0;
	}
	to {
		width: 100%;
		left: 0;
	}
}

/* ---- Float Suave ---- */
@keyframes float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-8px); }
}

/* ---- Pulse Minimalista ---- */
@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.8; }
}

/* ---- Reveal on Scroll ---- */
[data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Utility Classes ---- */
.animate-fadeIn {
	animation: fadeIn var(--dur-base) var(--ease-out) forwards;
}

.animate-fadeOut {
	animation: fadeOut var(--dur-base) var(--ease-out) forwards;
}

.animate-slideInUp {
	animation: slideInUp var(--dur-slow) var(--ease-out) forwards;
}

.animate-slideInDown {
	animation: slideInDown var(--dur-slow) var(--ease-out) forwards;
}

.animate-slideInLeft {
	animation: slideInLeft var(--dur-slow) var(--ease-out) forwards;
}

.animate-slideInRight {
	animation: slideInRight var(--dur-slow) var(--ease-out) forwards;
}

.animate-scaleIn {
	animation: scaleIn var(--dur-base) var(--ease-out) forwards;
}

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

.animate-pulse {
	animation: pulse 2s ease-in-out infinite;
}

/* ---- Hover Effects Minimalistas ---- */
.hover-lift {
	transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.hover-lift:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.hover-scale {
	transition: transform var(--dur-base) var(--ease);
}

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

.hover-opacity {
	transition: opacity var(--dur-base) var(--ease);
}

.hover-opacity:hover {
	opacity: 0.8;
}

/* ---- Smooth Transitions ---- */
.smooth-transition {
	transition: all var(--dur-base) var(--ease);
}

.smooth-transition-slow {
	transition: all var(--dur-slow) var(--ease);
}

.smooth-transition-fast {
	transition: all var(--dur-fast) var(--ease);
}

/* ---- Stagger Animation ---- */
.stagger-item {
	animation: slideInUp var(--dur-slow) var(--ease-out) forwards;
	opacity: 0;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(n+6) { animation-delay: 0.6s; }

/* ---- Loading Skeleton ---- */
@keyframes shimmer {
	0% { background-position: -1000px 0; }
	100% { background-position: 1000px 0; }
}

.skeleton {
	background: linear-gradient(90deg, var(--off-white) 0%, var(--light-gray) 50%, var(--off-white) 100%);
	background-size: 200% 100%;
	animation: shimmer 2s infinite;
	border-radius: var(--radius-xs);
}

/* ---- Respects prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	[data-reveal] {
		opacity: 1;
		transform: none;
	}
}