/**
 * animations.css — Transitions et animations fluides (IntersectionObserver)
 *
 * @package developer
 * @since   1.0.0
 */

/* Éléments animables au scroll */
.animate {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Types d'animations */
.animate[data-animate="fade-up"] {
    transform: translateY(30px);
}

.animate[data-animate="fade-in"] {
    transform: translateY(0);
}

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

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

/* État actif déclenché par JS (IntersectionObserver) */
.animate.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Micro-animations au hover */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

/* Spinner de chargement (formulaire contact AJAX) */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--color-gold);
    animation: spin 0.8s ease-in-out infinite;
}

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