/* ==========================================================================
   RNS ANIMATIONS
   Centralized animation library for consistent UX across all components
   
   USAGE GUIDELINES:
   - Use utility classes (.rns-fade-in, .rns-pulse, etc.) for simple cases
   - Reference keyframes directly for custom implementations
   - All durations are standardized but can be overridden
   
   NAMING CONVENTION:
   - Keyframes: @keyframes rns-{effect-name}
   - Utility Classes: .rns-{effect-name}[-variant]
   
   Version: 1.0.0
   Created: 2026-01-13
   ========================================================================== */

/* ==========================================================================
   SPINNER / ROTATION ANIMATIONS
   ========================================================================== */

/**
 * Standard rotation for spinners and loading indicators
 * Duration: 0.75s (fast), 1s (normal)
 */
@keyframes rns-spin {
    to { 
        transform: rotate(360deg); 
    }
}

/**
 * Spinner with vertical centering (for absolute positioned spinners)
 * Used in: Property calendar loading
 */
@keyframes rns-spin-centered {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

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

/**
 * Standard fade-in with subtle upward motion
 * Duration: 0.5s (standard), 0.3s (fast), 0.8s (slow)
 * Used for: Content appearing after async load, badges, button state changes
 */
@keyframes rns-fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * Fade-out (opposite of fade-in)
 * Used for: Dismissing alerts, hiding content
 */
@keyframes rns-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-5px);
    }
}

/**
 * Simple fade without motion (for overlays, backdrops)
 */
@keyframes rns-fade-simple {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/**
 * Slide down (dropdowns, expanding sections)
 * Duration: 0.2s (fast), 0.4s (standard)
 */
@keyframes rns-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * Slide up (used in association modal)
 */
@keyframes rns-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   SHIMMER / SKELETON LOADING
   ========================================================================== */

/**
 * Shimmer effect for skeleton loaders
 * One-directional smooth animation - no snap back
 * Duration: 2s (fast), 3s (standard), 4s (slow for complex tiles)
 * 
 * Background: linear-gradient(90deg, 
 *   transparent 0%, 
 *   rgba(255,255,255,0.3) 50%, 
 *   transparent 100%
 * ) over a solid base color
 * Background-size: 200% 100%
 * 
 * The gradient moves continuously in one direction, creating a subtle shimmer wave
 */
@keyframes rns-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/**
 * Skeleton loading variant (reverse direction, keeping for compatibility)
 * Used by some legacy components
 */
@keyframes rns-skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ==========================================================================
   PULSE ANIMATIONS
   ========================================================================== */

/**
 * Standard pulse (opacity oscillation)
 * Duration: 1.5s - 2s infinite
 * Used for: Loading states, attention indicators
 */
@keyframes rns-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/**
 * Subtle pulse (smaller opacity change)
 * Used for: Less prominent loading states
 */
@keyframes rns-pulse-subtle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/**
 * Background highlight pulse (for row highlighting)
 * Used in: Association reservations table
 */
@keyframes rns-highlight-pulse {
    0%, 100% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(59, 130, 246, 0.1);
    }
}

/* ==========================================================================
   INTERACTIVE / FEEDBACK ANIMATIONS
   ========================================================================== */

/**
 * Shake animation for errors
 * Duration: 0.4s
 */
@keyframes rns-shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-5px);
    }
}

/**
 * Bounce animation for map markers
 * Used in: Map component
 */
@keyframes rns-marker-bounce {
    0% {
        transform: translateY(0px);
    }
    20% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* ==========================================================================
   SPECIALIZED ANIMATIONS (CHECKOUT, FORMS)
   ========================================================================== */

/**
 * Rate update pulse (checkout page)
 * Combines scale and shadow for emphasis
 */
@keyframes rns-rate-update-pulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    50% { 
        transform: scale(1.02);
        box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.3);
    }
}

/**
 * Rate update glow effect
 */
@keyframes rns-rate-update-glow {
    0%, 100% { 
        opacity: 0;
    }
    50% { 
        opacity: 0.8;
    }
}

/**
 * Tile hover bounce (homepage tiles)
 */
@keyframes rns-tile-hover-bounce {
    0% {
        box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0 0 0 2px transparent;
        transform: translateY(0);
    }

    10% {
        box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px var(--primary-color, #0056b3);
        transform: translateY(1px);
    }

    40% {
        box-shadow: 0px 3px 4px rgba(16, 24, 40, 0.12), 0 0 0 1px var(--primary-color, #0056b3);
        transform: translateY(-1px);
    }

    70% {
        box-shadow: 0px 5px 8px rgba(16, 24, 40, 0.18), 0 0 0 2px var(--primary-color, #0056b3);
        transform: translateY(-3px);
    }

    100% {
        box-shadow: 0px 6px 12px rgba(16, 24, 40, 0.26), 0 0 0 2px var(--primary-color, #0056b3);
        transform: translateY(-4px);
    }
}

/**
 * Tile hover out (reverse)
 */
@keyframes rns-tile-hover-out {
    0% {
        box-shadow: 0px 4px 8px rgba(16, 24, 40, 0.16);
        transform: translateY(-3px);
    }

    50% {
        box-shadow: 0px 2px 4px rgba(16, 24, 40, 0.12);
        transform: translateY(-1px);
    }

    100% {
        box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
        transform: translateY(0px);
    }
}

/* ==========================================================================
   UTILITY CLASSES
   Apply animations with simple class names
   ========================================================================== */

/* Fade-in variants */
.rns-fade-in {
    animation: rns-fade-in 0.5s ease-in;
}

.rns-fade-in-fast {
    animation: rns-fade-in 0.3s ease-in;
}

.rns-fade-in-slow {
    animation: rns-fade-in 0.8s ease-in;
}

/* Slide variants */
.rns-slide-down {
    animation: rns-slide-down 0.3s ease-out;
}

.rns-slide-down-slow {
    animation: rns-slide-down 0.4s ease-out;
}

.rns-slide-up {
    animation: rns-slide-up 0.3s ease-out;
}

/* Pulse variants */
.rns-pulse {
    animation: rns-pulse 2s ease-in-out infinite;
}

.rns-pulse-fast {
    animation: rns-pulse 1.5s ease-in-out infinite;
}

.rns-pulse-subtle {
    animation: rns-pulse-subtle 2s ease-in-out infinite;
}

/* Shake */
.rns-shake {
    animation: rns-shake 0.4s ease-in-out;
}

/* ==========================================================================
   ANIMATION UTILITY CLASSES
   Apply animations without additional styling
   ========================================================================== */

/* Spinner animation utility - applies spin animation only */
.rns-spin {
    animation: rns-spin 1s linear infinite;
}