/* ==========================================================================
   ANIMATIONS - Scroll reveals via IntersectionObserver
   ========================================================================== */

/* Etat initial (avant apparition) */
[data-animate] {
	opacity: 0;
	transition: opacity var(--fg-transition-slow),
	            transform var(--fg-transition-slow);
}

[data-animate="fade-up"] {
	transform: translateY(30px);
}

[data-animate="fade-down"] {
	transform: translateY(-30px);
}

[data-animate="fade-left"] {
	transform: translateX(40px);
}

[data-animate="fade-right"] {
	transform: translateX(-40px);
}

[data-animate="fade-in"] {
	transform: none;
}

[data-animate="scale-in"] {
	transform: scale(0.95);
}

/* Etat visible */
[data-animate].is-visible {
	opacity: 1;
	transform: none;
}

/* Delais de stagger pour les elements en groupe */
[data-animate-delay="1"] { transition-delay: 100ms; }
[data-animate-delay="2"] { transition-delay: 200ms; }
[data-animate-delay="3"] { transition-delay: 300ms; }
[data-animate-delay="4"] { transition-delay: 400ms; }
[data-animate-delay="5"] { transition-delay: 500ms; }

/* ==========================================================================
   Animations specifiques
   ========================================================================== */

/* Underline animee sur les titres */
@keyframes fg-underline-grow {
	from { width: 0; }
	to { width: 60px; }
}

.is-visible .fg-section-title::after {
	animation: fg-underline-grow 0.6s var(--fg-ease) 0.3s forwards;
	width: 0;
}

/* ==========================================================================
   Respect des preferences utilisateur
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	[data-animate] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.is-visible .fg-section-title::after {
		animation: none;
		width: 60px;
	}
}