/**
 * Animations & Transitions — GeneratePress Remidesert
 *
 * Keyframes et transitions CSS natifs. Zéro bibliothèque externe.
 * Respecte prefers-reduced-motion.
 *
 * @package GeneratePress_Remidesert
 * @since   1.0.0
 */

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

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

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ==========================================================================
   ANIMATION CLASSES (déclenchées par JS via IntersectionObserver)
   ========================================================================== */

.animate {
	opacity: 0;
}

.animate--fade-in {
	animation: fadeIn var(--transition-slow) ease forwards;
}

.animate--fade-in-up {
	animation: fadeInUp 600ms ease forwards;
}

.animate--fade-in-down {
	animation: fadeInDown var(--transition-slow) ease forwards;
}

.animate--scale-in {
	animation: scaleIn var(--transition-slow) ease forwards;
}

/* Délais échelonnés pour les grids */
.animate--delay-1 { animation-delay: 100ms; }
.animate--delay-2 { animation-delay: 200ms; }
.animate--delay-3 { animation-delay: 300ms; }
.animate--delay-4 { animation-delay: 400ms; }

/* ==========================================================================
   HEADER STICKY TRANSITION
   ========================================================================== */

.site-header {
	transition: background-color var(--transition-base),
	            box-shadow var(--transition-base),
	            padding var(--transition-base);
}

.site-header--scrolled {
	background-color: rgba(0, 0, 0, 0.95);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(8px);
}

/* ==========================================================================
   HOVER TRANSITIONS GLOBALES
   ========================================================================== */

a,
button,
.btn {
	transition: color var(--transition-fast),
	            background-color var(--transition-base),
	            border-color var(--transition-base),
	            opacity var(--transition-fast),
	            transform var(--transition-fast);
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

	.animate {
		opacity: 1;
	}
}