/* ══════════════════════════════════════════════════════════════
   KronoCore — Animations & Transitions
══════════════════════════════════════════════════════════════ */

/* ── Entrées ───────────────────────────────────────────────── */
.fade-in      { animation: fadeIn      0.3s ease both; }
.fade-in-up   { animation: fadeInUp    0.45s ease both; }
.fade-in-down { animation: fadeInDown  0.45s ease both; }
.scale-in     { animation: scaleIn     0.35s cubic-bezier(0.34,1.56,0.64,1) both; }
.slide-in-left{ animation: slideInLeft 0.4s cubic-bezier(0.4,0,0.2,1) both; }

/* Délais pour les animations séquentielles (Staggered) */
.anim-delay-1 { animation-delay: 0.05s; }
.anim-delay-2 { animation-delay: 0.1s; }
.anim-delay-3 { animation-delay: 0.15s; }
.anim-delay-4 { animation-delay: 0.2s; }
.anim-delay-5 { animation-delay: 0.25s; }
.anim-delay-6 { animation-delay: 0.3s; }
.anim-delay-7 { animation-delay: 0.35s; }
.anim-delay-8 { animation-delay: 0.4s; }
.anim-delay-9 { animation-delay: 0.45s; }
.anim-delay-10 { animation-delay: 0.5s; }

@keyframes fadeIn      { from{opacity:0}            to{opacity:1} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:none} }
@keyframes scaleIn     { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:none} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:none} }

/* ── Skeleton loader ───────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg,
        var(--krono-surface-3) 25%,
        var(--krono-surface-2) 50%,
        var(--krono-surface-3) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--krono-radius);
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text  { height: 0.9em; margin-bottom: 0.4rem; }
.skeleton-title { height: 1.4em; width: 60%; }
.skeleton-btn   { height: 38px; width: 120px; }

/* ── Spinner ───────────────────────────────────────────────── */
.krono-spinner {
    width:  24px; height: 24px;
    border: 3px solid var(--krono-border-strong);
    border-top-color: var(--krono-accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}
.krono-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.krono-spinner--lg { width: 40px; height: 40px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }