/**
 * AJOC — Animations complémentaires
 */

/* Entrées */
@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(.92); } to { opacity:1; transform:scale(1); } }
@keyframes slideInRight { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }
@keyframes pulse        { 0%,100%{transform:scale(1);}50%{transform:scale(1.08);} }
@keyframes shimmer      { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }

.animate-fade-in     { animation: fadeIn      .4s ease both; }
.animate-fade-in-up  { animation: fadeInUp    .5s ease both; }
.animate-fade-in-down{ animation: fadeInDown  .4s ease both; }
.animate-scale-in    { animation: scaleIn     .4s cubic-bezier(.34,1.56,.64,1) both; }
.animate-pulse       { animation: pulse       2s  ease-in-out infinite; }

/* Délais */
.delay-100 { animation-delay:.1s; }
.delay-200 { animation-delay:.2s; }
.delay-300 { animation-delay:.3s; }
.delay-400 { animation-delay:.4s; }
.delay-500 { animation-delay:.5s; }

/* Hover microinteractions */
.hover-lift { transition:transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.12); }

.hover-scale { transition:transform .2s ease; }
.hover-scale:hover { transform:scale(1.03); }

/* Gradient animé */
.gradient-animate {
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Dot live */
@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(201,168,76,.6); }
    70%  { box-shadow: 0 0 0 8px rgba(201,168,76,0); }
    100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}
.dot-live {
    display:inline-block;
    width:10px; height:10px;
    background:var(--ajoc-gold);
    border-radius:50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

/* Progress fill animation */
.formation-progress-fill,
.campagne-progress-fill {
    animation: progressGrow .8s cubic-bezier(.34,1,.64,1) both;
}
@keyframes progressGrow { from { width:0 !important; } }

/* Skeleton loading */
.skeleton-line {
    height:14px;
    margin-bottom:8px;
    border-radius:4px;
    background:linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size:200% 100%;
    animation: shimmer 1.5s infinite;
}
.skeleton-line--sm  { width:60%; }
.skeleton-line--md  { width:85%; }
.skeleton-line--full{ width:100%; }

/* Card skeleton */
.card-skeleton {
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(26,74,122,.08);
    padding:1rem;
}
.card-skeleton-img {
    height:160px;
    border-radius:8px;
    margin-bottom:1rem;
    background:linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size:200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Ripple effect sur boutons */
.btn {
    position:relative;
    overflow:hidden;
}
.btn::after {
    content:'';
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.15);
    opacity:0;
    transition:opacity .2s ease;
    border-radius:inherit;
}
.btn:active::after { opacity:1; }

/* Transitions de pages */
.page-transition-enter {
    animation: fadeInUp .4s ease both;
}

/* Réduction du mouvement */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}