/**
 * DYNAMIC ANIMATIONS - Système complet d'animations
 * Revolution AR Menu - Animations fluides et performantes
 */

/* ==========================================
   ÉTAT INITIAL - Masquer avant animation
   ========================================== */

.animate-element {
	opacity: 0;
}

/* ==========================================
   KEYFRAMES - Animations d'entrée
   ========================================== */

@keyframes slide-down {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slide-up {
	from {
		opacity: 0;
		transform: translateY(50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slide-left {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slide-right {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes scale-in {
	from {
		opacity: 0;
		transform: scale(0.8) rotate(-5deg);
	}
	to {
		opacity: 1;
		transform: scale(1) rotate(0);
	}
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes flip-in {
	from {
		opacity: 0;
		transform: perspective(1000px) rotateY(-90deg);
	}
	to {
		opacity: 1;
		transform: perspective(1000px) rotateY(0);
	}
}

@keyframes bounce-in {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes pulse-glow {
	0%, 100% {
		box-shadow: 0 0 20px var(--primary, #00ffcc);
	}
	50% {
		box-shadow: 0 0 40px var(--primary, #00ffcc), 0 0 60px var(--primary, #00ffcc);
	}
}

@keyframes ripple {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

/* ==========================================
   TRANSITIONS - Smooth hover effects
   ========================================== */

.category-card,
.model-item,
.info-card,
button,
a {
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Performance hints */
.category-card,
.model-item,
.info-card {
	will-change: transform, opacity;
	backface-visibility: hidden;
	transform: translateZ(0);
}

/* ==========================================
   HOVER EFFECTS - États interactifs
   ========================================== */

/* Category Cards Hover */
.category-card {
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 255, 204, 0.3) !important;
}

/* Model Items - Hover géré dans style.css */

/* Info Cards Hover - 3D Tilt */
.info-card {
	transition: transform 0.3s ease;
	transform-style: preserve-3d;
}

.info-card:hover {
	transform: perspective(1000px) rotateY(5deg) translateY(-5px);
}

/* Buttons Hover (exclure ar-live-button) */
button:not(.theme-switcher):not(.ar-live-button) {
	cursor: pointer;
	transition: transform 0.2s ease, filter 0.2s ease;
}

button:not(.theme-switcher):not(.ar-live-button):hover {
	transform: scale(1.05);
	filter: brightness(1.1);
}

/* Links Hover */
a {
	transition: color 0.3s ease;
}

/* ==========================================
   CLICK EFFECTS - Press & Ripple
   ========================================== */

/* Press effect */
button:active,
.category-card:active {
	transform: scale(0.95);
}

.category-card:active {
	transform: scale(0.98) translateY(-10px);
}

/* Ripple effect */
.ripple-effect {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	pointer-events: none;
	animation: ripple 0.6s ease-out;
}

/* ==========================================
   SPECIAL ANIMATIONS - Page spécifiques
   ========================================== */

/* Hero section (homepage) */
.hero h1 {
	animation-delay: 0s;
}

.hero p {
	animation-delay: 0.15s;
}

/* Category navigation */
.category-nav a {
	display: inline-block;
}

/* Form groups cascade */
.form-group:nth-child(1) { animation-delay: 0s; }
.form-group:nth-child(2) { animation-delay: 0.1s; }
.form-group:nth-child(3) { animation-delay: 0.2s; }
.form-group:nth-child(4) { animation-delay: 0.3s; }
.form-group:nth-child(5) { animation-delay: 0.4s; }

/* Ingredients list */
.ingredients-list li {
	opacity: 0;
	animation: fade-up 0.4s ease-out forwards;
}

.ingredients-list li:nth-child(1) { animation-delay: 0s; }
.ingredients-list li:nth-child(2) { animation-delay: 0.05s; }
.ingredients-list li:nth-child(3) { animation-delay: 0.1s; }
.ingredients-list li:nth-child(4) { animation-delay: 0.15s; }
.ingredients-list li:nth-child(5) { animation-delay: 0.2s; }
.ingredients-list li:nth-child(n+6) { animation-delay: 0.25s; }

/* ==========================================
   LOADING STATES - Shimmer effect
   ========================================== */

@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

.shimmer {
	background: linear-gradient(
		90deg,
		var(--primary-10, rgba(0, 255, 204, 0.1)) 0%,
		var(--primary-20, rgba(0, 255, 204, 0.2)) 50%,
		var(--primary-10, rgba(0, 255, 204, 0.1)) 100%
	);
	background-size: 1000px 100%;
	animation: shimmer 2s infinite;
}

/* ==========================================
   RESPONSIVE - Mobile adaptations
   ========================================== */

@media (max-width: 768px) {
	/* Réduire les mouvements sur mobile */
	.category-card:hover {
		transform: translateY(-5px);
	}

	/* Model Items - Hover géré dans style.css */

	.info-card:hover {
		transform: translateY(-3px);
	}

	/* Désactiver l'effet 3D tilt sur mobile */
	.info-card:hover {
		transform: perspective(none) rotateY(0) translateY(-3px);
	}

	/* Animations plus rapides */
	.category-card,
	.model-item,
	.info-card,
	button {
		transition-duration: 0.2s;
	}
}

/* ==========================================
   ACCESSIBILITY - Reduced motion
   ========================================== */

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

	.category-card:hover,
	.model-item:hover,
	.info-card:hover {
		transform: none;
	}
}

/* ==========================================
   THEME INTEGRATION - Couleurs dynamiques
   ========================================== */

/* Utiliser les variables CSS du thème pour les glows */
.category-card:hover {
	box-shadow: 0 15px 35px var(--primary-30, rgba(0, 255, 204, 0.3)) !important;
}

/* Model Items - Hover géré dans style.css */

button:hover {
	box-shadow: 0 8px 20px var(--primary-20, rgba(0, 255, 204, 0.2));
}

/* Pulse glow utilise la couleur primaire du thème */
@keyframes pulse-glow {
	0%, 100% {
		box-shadow: 0 0 20px var(--primary, #00ffcc);
	}
	50% {
		box-shadow: 0 0 40px var(--primary, #00ffcc), 0 0 60px var(--primary, #00ffcc);
	}
}

/* ==========================================
   PERFORMANCE - GPU Acceleration
   ========================================== */

.category-card,
.model-item,
.info-card,
button,
.ripple-effect {
	transform: translateZ(0);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   UTILITIES - Classes utilitaires
   ========================================== */

.no-animation {
	animation: none !important;
	transition: none !important;
}

.instant-animation {
	animation-duration: 0.01ms !important;
	transition-duration: 0.01ms !important;
}

/* Forcer l'animation immédiate (pour debugging) */
.force-animate {
	opacity: 1 !important;
	transform: none !important;
}