/* ============================================================================
   ANIMATIONS - Alnaql
   ============================================================================
   
   Centralized keyframe animations used throughout the application.
   
   Animations:
   - spin: Loading spinners
   - pulse-highlight: Search result highlighting
   - slideDown: TOC expand/collapse
   - badge-pop: Filter badge appearance
   
   ============================================================================ */

/* ========================================================================
   Spin Animation - Loading States
   ======================================================================== */

@keyframes spin {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
    }
}

/* Usage:
   - Loading spinners in loading.css
   - Search button spinner in search-bar.css
   - Search results loading in search-results.css
*/


/* ========================================================================
   Pulse Highlight - Search Results
   ======================================================================== */

@keyframes pulse-highlight {
    0%, 100% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.02); 
    }
}

/* Usage:
   - Search highlight overlays in match-highlighting.css
   - Standalone search highlights in style.css
*/


/* ========================================================================
   Slide Down - TOC Expansion
   ======================================================================== */

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Usage:
   - TOC children expansion in style.css
   - Collapsible content reveals
*/


/* ========================================================================
   Badge Pop - Filter Badge
   ======================================================================== */

@keyframes badge-pop {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Usage:
   - Filter count badges in filter_button.css
   - Notification badges
*/