/**
 * Design System - Animation Tokens
 * 
 * Animation durations, timing functions, and transform effects
 * Dashboard-v2 standard: 0.2s ease transitions
 * Date: November 12, 2025
 */

:root {
    /* ============================================
       ANIMATION DURATIONS
       ============================================
       
       Standard timing values for consistent motion design
       Dashboard-v2 standard: 0.2s for most interactions
       
       PRINCIPLE: Faster = lighter feel, slower = more emphasis
       Choose duration based on:
       - Visual weight (larger elements = slower)
       - User expectation (instant feedback vs deliberate transition)
       - Content importance (critical changes = slower to notice)
       */
    
    --duration-instant: 0s;

    /* No animation (instant change)
     * Use for: Immediate state changes, data updates, toggles
     * Example: transition: var(--duration-instant);
     * Common: Switching between states without animation
     * Critical: Use sparingly - animations provide feedback
     */
    
    --duration-fast: 0.15s;

    /* Fast animation (150ms)
     * Use for: Small elements, quick feedback, subtle changes
     * Example: transition: all var(--duration-fast) ease;
     * Common: Icon changes, small button hovers, tooltips
     * Visual: Quick but perceptible motion
     * Accessibility: Fast enough to not cause delays
     */
    
    --duration-base: 0.2s;

    /* Base animation (200ms) - DASHBOARD-V2 STANDARD
     * Use for: Most interactions (buttons, cards, tiles)
     * Example: transition: transform var(--duration-base) ease;
     * 🔥🔥🔥 CRITICAL: Use this for 90% of animations
     * Why 0.2s: Perfect balance of responsiveness and smoothness
     * Visual: Smooth, natural motion that feels instant but refined
     * Common: All hover effects, state changes, interactive elements
     */
    
    --duration-slow: 0.3s;

    /* Slow animation (300ms)
     * Use for: Larger elements, important changes, page sections
     * Example: transition: all var(--duration-slow) ease;
     * Common: Panel slides, modal appearances, major state changes
     * Visual: Deliberate, noticeable motion
     * Purpose: Draw attention to important changes
     */
    
    --duration-slower: 0.5s;

    /* Slower animation (500ms)
     * Use for: Hero sections, splash screens, onboarding
     * Example: animation: fadeIn var(--duration-slower) ease;
     * Common: Full-page transitions, loading screens
     * Visual: Very deliberate, cinematic motion
     * Warning: Use sparingly - can feel sluggish if overused
     */
    
    
    /* ============================================
       EASING FUNCTIONS
       ============================================
       
       Timing functions control the acceleration curve of animations
       Create natural, physics-based motion
       
       CHOOSING THE RIGHT EASING:
       - Linear: Mechanical, constant speed (use for infinite loops)
       - Ease-in: Starts slow, ends fast (objects falling, dismissing)
       - Ease-out: Starts fast, ends slow (objects appearing, entering)
       - Ease-in-out: Slow start and end (two-way transitions, toggles)
       */
    
    --ease-linear: linear;

    /* Linear easing (constant speed)
     * Use for: Loading spinners, progress bars, infinite animations
     * Example: animation: spin 1s var(--ease-linear) infinite;
     * Motion: No acceleration or deceleration (uniform speed)
     * Common: Rotating loaders, sliding carousels
     * Visual: Mechanical, robotic motion
     */
    
    --ease-in: cubic-bezier(0.4, 0, 1, 1);

    /* Ease-in (accelerate) - Starts slow, ends fast
     * Use for: Dismissing elements, objects falling out
     * Example: transition: opacity 0.2s var(--ease-in);
     * Motion: Mimics gravity (accelerates as it falls)
     * Common: Collapsing panels, closing modals, removing items
     * Visual: Feels like element is being pulled away
     */
    
    --ease-out: cubic-bezier(0, 0, 0.2, 1);

    /* Ease-out (decelerate) - Starts fast, ends slow
     * Use for: Appearing elements, objects entering scene
     * Example: transition: transform 0.2s var(--ease-out);
     * Motion: Fast entrance with soft landing
     * 🔥 COMMON: Most "enter" animations (cards appearing, modals opening)
     * Visual: Element slides in with smooth deceleration
     * Why it works: Mimics natural motion (throw a ball, it slows down)
     */
    
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Ease-in-out (accelerate then decelerate)
     * Use for: Two-way transitions, state toggles
     * Example: transition: all 0.3s var(--ease-in-out);
     * Motion: Smooth acceleration and deceleration at both ends
     * Common: Expanding/collapsing sections, slide-out panels
     * Visual: Symmetrical, balanced motion
     */
    
    --ease-default: ease;

    /* Default easing - DASHBOARD-V2 STANDARD
     * Use for: General purpose animations
     * Example: transition: all 0.2s var(--ease-default);
     * 🔥🔥🔥 CRITICAL: Use this for most hover effects
     * Motion: Built-in CSS ease (similar to ease-in-out)
     * Why: Simple, reliable, works for 90% of cases
     * Common: Button hovers, card lifts, interactive elements
     */
    
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Bounce easing (overshoot then settle)
     * Use for: Playful interactions, success states, attention-grabbing
     * Example: transition: transform 0.3s var(--ease-bounce);
     * Motion: Overshoots target then bounces back
     * Visual: Springy, elastic, playful
     * Common: Success notifications, celebration effects, playful UI
     * Warning: Use sparingly - can be distracting
     */
    
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Smooth easing (gentle acceleration)
     * Use for: Subtle, refined animations
     * Example: transition: opacity 0.2s var(--ease-smooth);
     * Motion: Very gentle curve (smoother than default)
     * Common: Fade transitions, subtle state changes
     * Visual: Ultra-refined, professional motion
     */
    
    
    /* ============================================
       TRANSITION PRESETS
       ============================================
       
       Pre-configured transitions for common patterns
       Dashboard-v2 standard: 0.2s ease for most effects
       
       WHY USE PRESETS:
       - Consistency across application
       - Easier to maintain (change once, updates everywhere)
       - Proven combinations that work well together
       - Faster development (no guessing durations/properties)
       */
    
    --transition-base: all 0.2s ease;

    /* Base transition - CATCH-ALL for most cases
     * Use for: General-purpose animations when unsure
     * Example: transition: var(--transition-base);
     * Properties: ALL properties animate (color, size, position, etc.)
     * 🔥 COMMON: Quick prototyping, general hover effects
     * Warning: "all" can be expensive - prefer specific properties
     */
    
    --transition-transform: transform 0.2s ease;

    /* Transform-only transition (PERFORMANCE OPTIMIZED)
     * Use for: Position/scale changes (lift, grow, rotate)
     * Example: transition: var(--transition-transform);
     * Properties: Only transform (translateY, scale, rotate)
     * 🔥🔥🔥 CRITICAL: BEST PERFORMANCE - triggers GPU acceleration
     * Why: Transform doesn't trigger layout recalculation
     * Common: Card hover lifts, scale effects, smooth movements
     */
    
    --transition-shadow: box-shadow 0.2s ease;

    /* Shadow-only transition
     * Use for: Elevation changes, depth effects
     * Example: transition: var(--transition-shadow);
     * Properties: Only box-shadow
     * Common: Card hover shadows, button depth changes
     * Combine with: --transition-transform for lift + shadow effect
     */
    
    --transition-colors: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;

    /* Multi-color transition
     * Use for: Theme switches, hover color changes, state changes
     * Example: transition: var(--transition-colors);
     * Properties: Text color, background color, border color
     * Common: Button hover states, link color changes, theme toggles
     * Why multiple: Ensures all color properties animate together
     */
    
    --transition-card-hover: transform 0.2s ease, box-shadow 0.2s ease;

    /* Card hover effect - DASHBOARD-V2 STANDARD
     * Use for: Main content cards, large panels
     * Example: transition: var(--transition-card-hover);
     * Properties: Transform (lift) + shadow (depth)
     * 🔥🔥 VERY COMMON: All .admin-card, .statement-card elements
     * Visual: Card lifts up with enhanced shadow
     * Combined with: .hover-card-lift utility class
     */
    
    --transition-tile-hover: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

    /* Tile hover effect - DASHBOARD-V2 STANDARD
     * Use for: Stat tiles, navigation items, smaller cards
     * Example: transition: var(--transition-tile-hover);
     * Properties: Transform + border color + shadow
     * 🔥 COMMON: All .stat-tile elements on dashboard
     * Visual: Tile lifts + border changes to gold + shadow enhances
     * Why border: Adds extra visual feedback for smaller elements
     */
    
    --transition-button: all 0.2s ease;

    /* Button transition - DASHBOARD-V2 STANDARD
     * Use for: All button elements, CTAs
     * Example: transition: var(--transition-button);
     * Properties: All (color, background, shadow, transform)
     * Common: .btn, .button, interactive elements
     * Visual: Smooth color change + subtle lift
     */
    
    --transition-focus: border-color 0.2s ease, box-shadow 0.2s ease;

    /* Focus transition - ACCESSIBILITY CRITICAL
     * Use for: Form inputs, focusable elements
     * Example: transition: var(--transition-focus);
     * Properties: Border color + shadow (focus ring)
     * 🔥 ACCESSIBILITY: Smooth focus ring appearance
     * Common: input:focus, button:focus, a:focus
     * Why: Makes focus states less jarring for keyboard users
     */
    
    --transition-fast: all 0.15s ease;

    /* Fast transition (for lightweight elements)
     * Use for: Small elements, quick feedback, icons
     * Example: transition: var(--transition-fast);
     * Duration: 0.15s (25% faster than base)
     * Common: Icon changes, tooltips, small hovers
     */
    
    --transition-slow: all 0.3s ease;

    /* Slow transition (for larger elements)
     * Use for: Panels, modals, major state changes
     * Example: transition: var(--transition-slow);
     * Duration: 0.3s (50% slower than base)
     * Common: Slide-out menus, modal appearances, section expansions
     */
    
    
    /* ============================================
       TRANSFORM VALUES
       ============================================
       
       Pre-defined transform values for common effects
       Dashboard-v2 standard: -2px lift for card hovers
       
       WHY THESE VALUES:
       - Tested across dashboard-v2 for perfect feel
       - Subtle enough to not distract
       - Noticeable enough to provide feedback
       */
    
    --transform-lift: translateY(-2px);

    /* Standard lift effect - DASHBOARD-V2 STANDARD
     * Use for: Card hovers, tile hovers, panel interactions
     * Example: transform: var(--transform-lift);
     * Movement: Moves element UP by 2 pixels
     * 🔥🔥🔥 CRITICAL: THE standard hover lift across entire app
     * Visual: Subtle elevation change (not too aggressive)
     * Combined with: Enhanced shadow for depth perception
     * Why -2px: Perfect balance of noticeable yet refined
     */
    
    --transform-lift-sm: translateY(-1px);

    /* Small lift effect
     * Use for: Buttons, small interactive elements, icons
     * Example: transform: var(--transform-lift-sm);
     * Movement: Moves element UP by 1 pixel
     * Common: Button hovers, small card hovers, icon buttons
     * Visual: Very subtle elevation (lighter touch)
     */
    
    --transform-lift-lg: translateY(-4px);

    /* Large lift effect
     * Use for: Emphasized interactions, dramatic effects
     * Example: transform: var(--transform-lift-lg);
     * Movement: Moves element UP by 4 pixels
     * Common: Hero sections, feature cards, call-to-action elements
     * Visual: Pronounced elevation (more dramatic)
     * Warning: Can feel heavy if overused
     */
    
    --transform-scale-up: scale(1.05);

    /* Scale up effect (grow by 5%)
     * Use for: Icon hovers, image zoom, emphasis
     * Example: transform: var(--transform-scale-up);
     * Scale: 105% of original size
     * Common: Image hovers, icon buttons, thumbnails
     * Visual: Element grows slightly on hover
     * Note: Can be combined with lift for compound effect
     */
    
    --transform-scale-down: scale(0.95);

    /* Scale down effect (shrink by 5%)
     * Use for: Active states, pressed buttons, click feedback
     * Example: transform: var(--transform-scale-down);
     * Scale: 95% of original size
     * Common: Button :active state, clicked elements
     * Visual: Element shrinks slightly when pressed
     * Purpose: Provides tactile "push" feedback
     */
    
    --transform-rotate-45: rotate(45deg);

    /* 45-degree rotation
     * Use for: Chevrons, arrows, expand/collapse indicators
     * Example: transform: var(--transform-rotate-45);
     * Rotation: Clockwise 45 degrees
     * Common: Arrow icon transitions, close button (X)
     */
    
    --transform-rotate-90: rotate(90deg);

    /* 90-degree rotation
     * Use for: Chevrons, disclosure triangles, menu icons
     * Example: transform: var(--transform-rotate-90);
     * Rotation: Clockwise 90 degrees (quarter turn)
     * Common: Dropdown chevrons (▼ → ►), expandable sections
     */
    
    --transform-rotate-180: rotate(180deg);

    /* 180-degree rotation (flip)
     * Use for: Chevrons, arrows, flip effects
     * Example: transform: var(--transform-rotate-180);
     * Rotation: Clockwise 180 degrees (half turn, upside down)
     * Common: Sort indicators (▲ ↔ ▼), expand/collapse (▼ ↔ ▲)
     */
    
    
    /* ============================================
       BACKDROP FILTERS
       ============================================
       
       Blur effects for frosted glass (glassmorphism) design
       Dashboard-v2 uses heavy blur for navigation overlay
       
       BROWSER SUPPORT:
       - Chrome/Edge: ✅ Full support
       - Firefox: ✅ Full support (Firefox 70+)
       - Safari: ✅ Full support (Safari 9+)
       - Always provide fallback background color
       */
    
    --blur-sm: blur(4px);

    /* Small blur (subtle frosted effect)
     * Use for: Tooltips, small overlays, subtle glass effects
     * Example: backdrop-filter: var(--blur-sm);
     * Blur radius: 4 pixels
     * Visual: Slightly softens background, mostly readable
     * Performance: ✅ Lightweight, minimal GPU impact
     */
    
    --blur-md: blur(8px);

    /* Medium blur
     * Use for: Modals, dropdowns, overlays
     * Example: backdrop-filter: var(--blur-md);
     * Blur radius: 8 pixels
     * Visual: Clear frosted glass effect, background still visible
     * Common: Dialog backgrounds, popup menus
     */
    
    --blur-lg: blur(12px);

    /* Large blur - DASHBOARD-V2 NAVIGATION STANDARD
     * Use for: Navigation elements, major overlays
     * Example: backdrop-filter: var(--blur-lg);
     * Blur radius: 12 pixels
     * 🔥 COMMON: Navigation overlay in dashboard-v2
     * Visual: Strong frosted glass, background colors visible but blurred
     */
    
    --blur-xl: blur(24px);

    /* Extra large blur - DASHBOARD-V2 CONTAINER STANDARD
     * Use for: Main containers, hero sections, full-page overlays
     * Example: backdrop-filter: var(--blur-xl);
     * Blur radius: 24 pixels
     * 🔥 COMMON: Main dashboard containers with rgba backgrounds
     * Visual: Heavy frosted glass, background barely recognizable
     * Performance: ⚠️ GPU-intensive, use sparingly
     */
    
    
    /* ============================================
       KEYFRAME ANIMATIONS
       ============================================
       
       Pre-configured animation sequences
       Use with animation property (not transition)
       
       USAGE PATTERN:
       animation: var(--animation-fade-in);
       
       SYNTAX BREAKDOWN:
       animation: [name] [duration] [timing-function] [iteration]
       */
    
    --animation-fade-in: fadein var(--duration-base) var(--ease-default);

    /* Fade in animation (0 → 1 opacity)
     * Use for: Appearing elements, page loads, revealing content
     * Example: animation: var(--animation-fade-in);
     * Effect: Element smoothly fades into view
     * Duration: 0.2s (base)
     * Common: Modal entrances, content reveals, loading complete
     * Plays: Once (add "infinite" to loop)
     */
    
    --animation-fade-out: fadeout var(--duration-base) var(--ease-default);

    /* Fade out animation (1 → 0 opacity)
     * Use for: Dismissing elements, hiding content
     * Example: animation: var(--animation-fade-out);
     * Effect: Element smoothly fades from view
     * Duration: 0.2s (base)
     * Common: Modal exits, removing notifications, hiding elements
     * Note: Consider adding "forwards" to maintain final state
     */
    
    --animation-slide-up: slideup var(--duration-base) var(--ease-default);

    /* Slide up animation (below → in position)
     * Use for: Notifications, toasts, bottom sheets
     * Example: animation: var(--animation-slide-up);
     * Effect: Element slides up from below while fading in
     * Movement: Starts 20px below final position
     * Common: Toast notifications, bottom drawers, tooltips
     */
    
    --animation-slide-down: slidedown var(--duration-base) var(--ease-default);

    /* Slide down animation (above → in position)
     * Use for: Dropdowns, top notifications, menus
     * Example: animation: var(--animation-slide-down);
     * Effect: Element slides down from above while fading in
     * Movement: Starts 20px above final position
     * Common: Dropdown menus, top banners, alert bars
     */
    
    --animation-pulse: pulse 2s var(--ease-default) infinite;

    /* Pulse animation (fade in/out continuously)
     * Use for: Loading indicators, attention-grabbing, "thinking" states
     * Example: animation: var(--animation-pulse);
     * Effect: Opacity cycles 1 → 0.5 → 1
     * Duration: 2 seconds per cycle
     * Iteration: Infinite (loops forever)
     * Common: Loading skeletons, processing indicators
     */
    
    --animation-spin: spin 1s var(--ease-linear) infinite;

    /* Spin animation (continuous rotation)
     * Use for: Loading spinners, processing indicators
     * Example: animation: var(--animation-spin);
     * Effect: 360-degree rotation continuously
     * Duration: 1 second per rotation
     * Easing: Linear (constant speed for smooth spinning)
     * Iteration: Infinite (loops forever)
     * 🔥 COMMON: Loading spinners, refresh icons
     * Note: Use linear easing for mechanical, constant rotation
     */
}


/* ============================================
   KEYFRAMES DEFINITIONS
   ============================================
   
   @keyframes define the animation sequences
   Referenced by --animation-* tokens above
   
   USAGE:
   1. Use pre-defined animation tokens (recommended):
      animation: var(--animation-fade-in);
   
   2. Or reference keyframes directly:
      animation: fadeIn 0.3s ease-in-out;
   
   3. Customize with animation properties:
      animation: fadeIn 0.3s ease-in-out 0.1s infinite;
      [name] [duration] [timing] [delay] [iteration]
   */

/* ============================================
   FADE ANIMATIONS
   ============================================ */

@keyframes fadeIn {
    /* Fade in: 0% → 100% opacity
     * Use for: Revealing content, loading complete, element appears
     * Effect: Smooth transition from invisible to visible
     */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    /* Fade out: 100% → 0% opacity
     * Use for: Dismissing elements, hiding content, removal
     * Effect: Smooth transition from visible to invisible
     * Note: Add "forwards" to keep element hidden after animation
     *   Example: animation: fadeOut 0.2s ease forwards;
     */
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ============================================
   SLIDE ANIMATIONS
   ============================================ */

@keyframes slideUp {
    /* Slide up with fade: below → final position
     * Use for: Bottom sheets, toasts, notifications from bottom
     * Effect: Element starts 20px below + invisible, ends in position + visible
     * Motion: Slides upward while fading in
     */
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    /* Slide down with fade: above → final position
     * Use for: Dropdowns, top notifications, menu reveals
     * Effect: Element starts 20px above + invisible, ends in position + visible
     * Motion: Slides downward while fading in
     */
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   ATTENTION ANIMATIONS
   ============================================ */

@keyframes pulse {
    /* Pulse: Continuous fade in/out cycle
     * Use for: Loading indicators, "thinking" states, skeleton loaders
     * Effect: Opacity oscillates between 100% → 50% → 100%
     * Duration: Typically 2s (defined in --animation-pulse)
     * Iteration: Usually infinite (loops forever)
     * Visual: Gentle breathing effect
     */
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes spin {
    /* Spin: Continuous 360° rotation
     * Use for: Loading spinners, refresh icons, processing indicators
     * Effect: Full clockwise rotation
     * Duration: Typically 1s (defined in --animation-spin)
     * Easing: Linear (constant speed)
     * Iteration: Usually infinite (loops forever)
     * Common: Font Awesome icons, SVG spinners
     */
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes bounce {
    /* Bounce: Up and down motion
     * Use for: Playful interactions, scroll indicators, attention cues
     * Effect: Element moves up 10px and back continuously
     * Visual: Bouncing ball motion
     * Note: Not pre-configured as token - use directly if needed:
     *   animation: bounce 1s ease-in-out infinite;
     */
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


/* ============================================
   UTILITY CLASSES - TRANSITIONS
   ============================================
   
   Quick transition utilities for common patterns
   Apply directly to elements for instant animation behavior
   
   USAGE:
   <div class="transition-base hover:transform-lift">...</div>
   
   COMBINING:
   Add multiple classes for compound effects:
   <div class="transition-transform hover:transform-lift">Card</div>
   */

.transition-none { 
    transition: none; 

    /* No transition (instant changes)
     * Use for: Disabling inherited transitions, immediate updates
     * Example: <div class="transition-none">No animation</div>
     * Common: Resetting animations, data-driven updates
     */
}

.transition-base { 
    transition: var(--transition-base); 

    /* Base transition (all 0.2s ease)
     * Use for: General animations, prototyping, multi-property changes
     * Example: <div class="transition-base">Animates all</div>
     * 🔥 COMMON: Quick implementation when unsure which properties change
     * Warning: "all" can impact performance - prefer specific transitions
     */
}

.transition-fast { 
    transition: var(--transition-fast); 

    /* Fast transition (all 0.15s ease)
     * Use for: Small elements, quick feedback, snappy interactions
     * Example: <button class="transition-fast">Fast button</button>
     * Common: Icon hovers, tooltips, lightweight elements
     */
}

.transition-slow { 
    transition: var(--transition-slow); 

    /* Slow transition (all 0.3s ease)
     * Use for: Large elements, deliberate changes, emphasis
     * Example: <div class="transition-slow">Slow panel</div>
     * Common: Panel slides, modal appearances, major state changes
     */
}

.transition-colors { 
    transition: var(--transition-colors); 

    /* Color transition (color, background-color, border-color 0.2s ease)
     * Use for: Theme changes, color shifts, hover states
     * Example: <button class="transition-colors">Color change</button>
     * 🔥 COMMON: Buttons, links, theme-aware elements
     * Performance: ✅ Efficient - only animates color properties
     */
}

.transition-transform { 
    transition: var(--transition-transform); 

    /* Transform transition (transform 0.2s ease)
     * Use for: Hover lifts, scale effects, position changes
     * Example: <div class="transition-transform hover:transform-lift">Card</div>
     * 🔥🔥🔥 CRITICAL: BEST PERFORMANCE - GPU accelerated
     * Common: Card hovers, tile lifts, interactive elements
     */
}

.transition-shadow { 
    transition: var(--transition-shadow); 

    /* Shadow transition (box-shadow 0.2s ease)
     * Use for: Elevation changes, depth effects
     * Example: <div class="transition-shadow">Shadow change</div>
     * Common: Combined with transform for lift + shadow effect
     */
}


/* ============================================
   UTILITY CLASSES - TRANSFORMS
   ============================================
   
   Transform utilities for hover/active states
   Combine with transition utilities for smooth motion
   
   PATTERN (Dashboard-v2 standard):
   <div class="transition-transform hover:transform-lift">Card</div>
   
   COMBINING TRANSFORMS:
   Multiple transforms in one class (CSS limitation):
   .custom { transform: translateY(-2px) scale(1.05); }
   */

.transform-lift { 
    transform: var(--transform-lift); 

    /* Standard lift (-2px up) - DASHBOARD-V2 STANDARD
     * Use for: Card hovers, tile hovers, panel interactions
     * Example: <div class="hover:transform-lift">Lifts on hover</div>
     * 🔥🔥🔥 CRITICAL: Apply on :hover with transition-transform
     * Visual: Element moves up 2px (subtle elevation)
     */
}

.transform-lift-sm { 
    transform: var(--transform-lift-sm); 

    /* Small lift (-1px up)
     * Use for: Button hovers, small elements, subtle feedback
     * Example: <button class="hover:transform-lift-sm">Button</button>
     * Visual: Element moves up 1px (very subtle)
     */
}

.transform-lift-lg { 
    transform: var(--transform-lift-lg); 

    /* Large lift (-4px up)
     * Use for: Hero cards, featured elements, dramatic effects
     * Example: <div class="hover:transform-lift-lg">Hero card</div>
     * Visual: Element moves up 4px (pronounced elevation)
     */
}

.scale-up { 
    transform: var(--transform-scale-up); 

    /* Scale up (105%)
     * Use for: Image hovers, icon emphasis, thumbnails
     * Example: <img class="hover:scale-up" />
     * Visual: Element grows by 5%
     * Common: Image galleries, icon buttons, zoom effects
     */
}

.scale-down { 
    transform: var(--transform-scale-down); 

    /* Scale down (95%)
     * Use for: Active states, button presses, click feedback
     * Example: <button class="active:scale-down">Press me</button>
     * Visual: Element shrinks by 5%
     * Purpose: Tactile "push" feedback
     */
}


/* ============================================
   UTILITY CLASSES - BACKDROP FILTERS
   ============================================
   
   Backdrop blur utilities for glassmorphism effects
   Dashboard-v2 uses heavy blur for navigation overlays
   
   USAGE:
   <div class="backdrop-blur-xl" style="background: rgba(15, 23, 42, 0.88);">
     Frosted glass container
   </div>
   
   CRITICAL: Always combine with semi-transparent background
   backdrop-filter alone is invisible - needs color behind it
   */

.backdrop-blur-none { 
    backdrop-filter: none; 

    /* No backdrop blur
     * Use for: Disabling inherited blur, solid backgrounds
     * Example: <div class="backdrop-blur-none">No blur</div>
     */
}

.backdrop-blur-sm { 
    backdrop-filter: var(--blur-sm); 

    /* Small blur (4px) - Subtle frosted effect
     * Use for: Tooltips, small overlays, light glass effect
     * Example: <div class="backdrop-blur-sm">Subtle blur</div>
     * Visual: Slightly softens background, mostly readable
     */
}

.backdrop-blur-md { 
    backdrop-filter: var(--blur-md); 

    /* Medium blur (8px)
     * Use for: Modals, dropdowns, overlays
     * Example: <div class="backdrop-blur-md">Modal</div>
     * Visual: Clear frosted glass, background visible but blurred
     */
}

.backdrop-blur-lg { 
    backdrop-filter: var(--blur-lg); 

    /* Large blur (12px) - DASHBOARD-V2 NAVIGATION STANDARD
     * Use for: Navigation elements, major overlays
     * Example: <nav class="backdrop-blur-lg">Nav</nav>
     * 🔥 COMMON: Navigation overlay in dashboard-v2
     * Visual: Strong frosted glass effect
     */
}

.backdrop-blur-xl { 
    backdrop-filter: var(--blur-xl); 

    /* Extra large blur (24px) - DASHBOARD-V2 CONTAINER STANDARD
     * Use for: Main containers, hero sections, full overlays
     * Example: <div class="backdrop-blur-xl">Container</div>
     * 🔥🔥 VERY COMMON: Main dashboard containers
     * Visual: Heavy frosted glass, background barely visible
     * Performance: ⚠️ GPU-intensive, use thoughtfully
     */
}


/* ============================================
   UTILITY CLASSES - ANIMATIONS
   ============================================
   
   Animation utilities for pre-defined sequences
   Apply directly to trigger animations
   
   USAGE:
   <div class="animate-fade-in">Fades in</div>
   
   CUSTOMIZING:
   Override with inline styles:
   <div class="animate-pulse" style="animation-duration: 3s;">Slower pulse</div>
   */

.animate-fade-in { 
    animation: var(--animation-fade-in); 

    /* Fade in animation (0 → 1 opacity, 0.2s)
     * Use for: Revealing content, page loads
     * Example: <div class="animate-fade-in">Content</div>
     * Duration: 0.2s, plays once
     */
}

.animate-fade-out { 
    animation: var(--animation-fade-out); 

    /* Fade out animation (1 → 0 opacity, 0.2s)
     * Use for: Dismissing elements
     * Example: <div class="animate-fade-out">Dismissing</div>
     * Note: Add "animation-fill-mode: forwards" to keep hidden
     */
}

.animate-slide-up { 
    animation: var(--animation-slide-up); 

    /* Slide up animation (below → position, 0.2s)
     * Use for: Bottom notifications, toasts
     * Example: <div class="animate-slide-up">Toast</div>
     */
}

.animate-slide-down { 
    animation: var(--animation-slide-down); 

    /* Slide down animation (above → position, 0.2s)
     * Use for: Top notifications, dropdowns
     * Example: <div class="animate-slide-down">Dropdown</div>
     */
}

.animate-pulse { 
    animation: var(--animation-pulse); 

    /* Pulse animation (1 ↔ 0.5 opacity, 2s, infinite)
     * Use for: Loading states, skeleton loaders
     * Example: <div class="animate-pulse">Loading...</div>
     * 🔥 COMMON: Loading skeletons, processing indicators
     */
}

.animate-spin { 
    animation: var(--animation-spin); 

    /* Spin animation (360° rotation, 1s, infinite)
     * Use for: Loading spinners
     * Example: <i class="fas fa-spinner animate-spin"></i>
     * 🔥 VERY COMMON: Loading indicators, refresh icons
     */
}


/* ============================================
   HOVER EFFECT PATTERNS (Dashboard-v2)
   ============================================
   
   Pre-configured hover effects matching dashboard-v2 design
   Apply to elements for instant interactive behavior
   
   PATTERN:
   These classes include both transition AND hover state
   No need to add :hover in HTML - built-in
   
   USAGE:
   <div class="hover-card-lift">Card</div>  ← That's it!
   */

.hover-card-lift {
    /* Card hover effect - DASHBOARD-V2 STANDARD
     * Transition: transform + shadow (0.2s ease)
     * Hover state: -2px lift + enhanced shadow
     */
    transition: var(--transition-card-hover);
}

.hover-card-lift:hover {
    box-shadow: var(--shadow-card-hover);

    /* On hover: Lift up and enhance shadow
     * Use for: .admin-card, .statement-card, main content cards
     * 🔥🔥🔥 CRITICAL: THE standard card hover across entire app
     * Visual: Card floats up with enhanced depth
     */
    transform: var(--transform-lift);
}

.hover-tile-lift {
    /* Tile hover effect - DASHBOARD-V2 STANDARD
     * Transition: transform + border-color + shadow (0.2s ease)
     * Hover state: -2px lift + gold border + enhanced shadow
     */
    transition: var(--transition-tile-hover);
}

.hover-tile-lift:hover {
    border-color: var(--color-accent-gold);
    box-shadow: var(--shadow-tile-hover);

    /* On hover: Lift + change border to gold + enhance shadow
     * Use for: .stat-tile, navigation items, smaller cards
     * 🔥 COMMON: All dashboard stat tiles
     * Visual: Tile floats + golden accent appears + shadow enhances
     */
    transform: var(--transform-lift);
}

.hover-button {
    /* Button hover effect - DASHBOARD-V2 STANDARD
     * Transition: all properties (0.2s ease)
     * Hover state: -1px lift + enhanced shadow
     */
    transition: var(--transition-button);
}

.hover-button:hover {
    box-shadow: var(--shadow-button-hover);

    /* On hover: Small lift and shadow enhancement
     * Use for: .btn, .button, all button elements
     * Common: Primary buttons, CTAs, action buttons
     * Visual: Button lifts slightly with enhanced shadow
     */
    transform: var(--transform-lift-sm);
}