/* =============================================================
   FLOWLY — ANIMATIONS
   Keyframes e transições nomeadas.
   Depende de: _tokens.css
   ============================================================= */

/* --- Shimmer (skeleton loader) --- */
@keyframes flowly-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.flowly-skeleton {
    background: linear-gradient(
        90deg,
        var(--flowly-bg-glass) 0%,
        var(--flowly-bg-glass-strong, rgba(255, 255, 255, 0.06)) 50%,
        var(--flowly-bg-glass) 100%
    );
    background-size: 200% 100%;
    animation: flowly-shimmer 1.5s var(--flowly-ease-in-out) infinite;
    border-radius: var(--flowly-radius-md);
}

/* --- Respeitar reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}