/**
 * KrystalAI - Animations CSS
 *
 * Durées et easings alignés sur les tokens motion déclarés dans
 * krystalai.css :root (--dur-1..5, --ease-out, --ease-in-out), disponibles
 * globalement. Les keyframes purement décoratives non utilisées ont été
 * retirées. Un bloc prefers-reduced-motion neutralise toutes les animations
 * et transitions de ce fichier sans masquer de contenu.
 */

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

/* Float animation pour l'icône robot */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Pulse animation pour le status dot */
@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* SlideUp animation pour les pages */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* FadeIn animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Typing bounce animation pour le chatbot */
@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-4px);
    }
}

/* Spin animation pour le spinner */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* =====================================================
   ANIMATION CLASSES
   ===================================================== */

.krystalai-animate-float {
    animation: float 3s var(--ease-in-out) infinite;
}

.krystalai-animate-pulse {
    animation: pulse 1.5s var(--ease-in-out) infinite;
}

.krystalai-animate-slideUp {
    animation: slideUp var(--dur-5) var(--ease-out);
}

.krystalai-animate-fadeIn {
    animation: fadeIn var(--dur-4) var(--ease-out);
}

/* =====================================================
   TRANSITION UTILITIES
   ===================================================== */

.krystalai-transition-all {
    transition: all var(--dur-3) var(--ease-out);
}

.krystalai-transition-fast {
    transition: all var(--dur-1) var(--ease-out);
}

.krystalai-transition-slow {
    transition: all var(--dur-5) var(--ease-out);
}

/* =====================================================
   HOVER EFFECTS
   ===================================================== */

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

.krystalai-hover-scale:hover {
    transform: scale(1.02);
}

.krystalai-hover-glow:hover {
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
}

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

.krystalai-delay-100 {
    animation-delay: 0.1s;
}

.krystalai-delay-200 {
    animation-delay: 0.2s;
}

.krystalai-delay-300 {
    animation-delay: 0.3s;
}

.krystalai-delay-400 {
    animation-delay: 0.4s;
}

.krystalai-delay-500 {
    animation-delay: 0.5s;
}

/* =====================================================
   PROGRESS BAR ANIMATIONS
   ===================================================== */

.krystalai-progress-animate {
    transition: width var(--dur-5) var(--ease-out);
}

/* Score circle animation */
.krystalai-score-animate circle {
    transition: stroke-dasharray 1s var(--ease-out);
}

/* =====================================================
   LOADING STATES
   ===================================================== */

.krystalai-loading {
    pointer-events: none;
    opacity: 0.7;
}

.krystalai-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.krystalai-stagger > * {
    opacity: 0;
    animation: slideUp var(--dur-5) var(--ease-out) forwards;
}

.krystalai-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.krystalai-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.krystalai-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.krystalai-stagger > *:nth-child(4) { animation-delay: 0.4s; }
.krystalai-stagger > *:nth-child(5) { animation-delay: 0.5s; }
.krystalai-stagger > *:nth-child(6) { animation-delay: 0.6s; }

/* =====================================================
   PREFERS-REDUCED-MOTION (WCAG 2.3.3)
   Neutralise les durées/itérations d'animation et les durées de transition
   pour TOUTES les animations de ce fichier, sans masquer de contenu :
   on force l'état final visible (opacity:1, transform:none) au lieu de
   figer un opacity:0. Scopé à l'app pour ne pas toucher le thème hôte.
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    .krystalai-animate-float,
    .krystalai-animate-pulse,
    .krystalai-animate-slideUp,
    .krystalai-animate-fadeIn,
    .krystalai-loading::after,
    .krystalai-stagger > * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
    }

    .krystalai-transition-all,
    .krystalai-transition-fast,
    .krystalai-transition-slow,
    .krystalai-progress-animate,
    .krystalai-score-animate circle {
        transition-duration: 0.01ms !important;
    }

    /* L'état d'arrivée des animations d'entrée doit rester visible. */
    .krystalai-animate-slideUp,
    .krystalai-animate-fadeIn,
    .krystalai-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
}