/* ==================================
   ANIMATIONS
   ================================== */

/* Scroll trigger animations */
.scroll-trigger {
    opacity: 0;
    transform: translateY(20px);
}

.scroll-trigger.animate--fade-in {
    animation: fadeIn 0.6s ease forwards;
}

.scroll-trigger.animate--slide-in {
    animation: slideIn 0.6s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cascade animation - délai progressif */
.scroll-trigger[data-cascade] {
    animation-delay: calc(var(--animation-order, 0) * 100ms);
}

/* Hover animations */
.animate--hover-default {
    /* Classe de base pour les animations au hover */
}

/* Motion reduce - respecter les préférences utilisateur */
@media (prefers-reduced-motion: reduce) {

    .scroll-trigger,
    .scroll-trigger.animate--fade-in,
    .scroll-trigger.animate--slide-in {
        animation: none;
        opacity: 1;
        transform: none;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Animation state classes (ajoutées par JS) */
.scroll-trigger.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Loading state */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 1s linear infinite;
}

.spinner .path {
    stroke-dasharray: 150, 200;
    stroke-dashoffset: -10;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

/* Hover effects */
.hover-lift {
    transition: transform var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

/* Focus states */
.focus-inset:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* Transition delays pour cascade */
[style*="--animation-order: 1"] {
    animation-delay: 100ms;
}

[style*="--animation-order: 2"] {
    animation-delay: 200ms;
}

[style*="--animation-order: 3"] {
    animation-delay: 300ms;
}

[style*="--animation-order: 4"] {
    animation-delay: 400ms;
}

/* Smooth transitions globales */
a,
button,
.link,
.button {
    transition: all var(--transition-base);
}

img {
    transition: transform var(--transition-slow);
}