/**
 * Treatment Plan Tracker - Reusable Animations
 *
 * @package eRide
 * @version 1.0.0
 * @author Claude Code (eRide Visual Stylist)
 *
 * Smooth, spa-themed animations adapted from lovable.ai skin-quest-manager
 * Used across both client dashboard and admin interface
 */

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */

/**
 * Float Animation - Gentle vertical floating effect
 * Used for: Level cards, featured elements
 * Duration: 3 seconds infinite loop
 */
@keyframes treatment-float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/**
 * Progress Glow - Pulsing glow effect for progress bars
 * Used for: Active progress bars, loading states
 * Duration: 2 seconds infinite loop
 */
@keyframes treatment-progress-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(100, 197, 178, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(100, 197, 178, 0.6);
    }
}

/**
 * Achievement Unlock - Scale and fade in animation
 * Used for: Newly unlocked achievements
 * Duration: 0.6 seconds once
 */
@keyframes treatment-achievement-unlock {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/**
 * Shimmer - Loading state shimmer effect
 * Used for: Skeleton loaders, loading states
 * Duration: 1.5 seconds infinite loop
 */
@keyframes treatment-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/**
 * Pulse - Subtle scale pulse
 * Used for: Notification badges, alerts
 * Duration: 2 seconds infinite loop
 */
@keyframes treatment-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/**
 * Slide In From Bottom
 * Used for: Cards entering viewport, modals
 * Duration: 0.4 seconds once
 */
@keyframes treatment-slide-in-bottom {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/**
 * Fade In
 * Used for: General content reveal
 * Duration: 0.3 seconds once
 */
@keyframes treatment-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/**
 * Floating Elements
 * Apply to cards and featured elements for gentle vertical movement
 */
.treatment-animate-float {
    animation: treatment-float 3s ease-in-out infinite;
}

/**
 * Progress Bar Glow
 * Apply to active progress bars for pulsing glow effect
 */
.treatment-animate-progress {
    animation: treatment-progress-glow 2s ease-in-out infinite;
}

/**
 * Achievement Unlock
 * Apply to newly unlocked achievement badges
 */
.treatment-animate-unlock {
    animation: treatment-achievement-unlock 0.6s ease-out forwards;
}

/**
 * Shimmer Loading
 * Apply to loading placeholders
 */
.treatment-animate-shimmer {
    background: linear-gradient(
        90deg,
        rgba(100, 197, 178, 0.05) 0%,
        rgba(100, 197, 178, 0.15) 50%,
        rgba(100, 197, 178, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: treatment-shimmer 1.5s ease-in-out infinite;
}

/**
 * Pulse Animation
 * Apply to notification badges and alerts
 */
.treatment-animate-pulse {
    animation: treatment-pulse 2s ease-in-out infinite;
}

/**
 * Slide In Bottom
 * Apply to cards and modals on page load
 */
.treatment-animate-slide-in {
    animation: treatment-slide-in-bottom 0.4s ease-out forwards;
}

/**
 * Fade In
 * Apply to general content reveals
 */
.treatment-animate-fade-in {
    animation: treatment-fade-in 0.3s ease-out forwards;
}

/* ==========================================================================
   Gradient Utilities
   ========================================================================== */

/**
 * Spa Gradient - Primary brand gradient (eRide green to warm gold)
 * Adapted from lovable.ai pink-to-peach gradient
 */
.treatment-gradient-spa {
    background: linear-gradient(
        135deg,
        hsl(170, 45%, 75%) 0%,
        hsl(40, 85%, 75%) 100%
    );
}

/**
 * Level Card Gradient - For level/points display
 * Enhanced version with eRide green
 */
.treatment-gradient-level {
    background: linear-gradient(
        135deg,
        #64c5b2 0%,
        #44B81B 100%
    );
}

/**
 * Achievement Gradient - For earned achievements
 * Soft glow effect with transparency
 */
.treatment-gradient-achievement {
    background: linear-gradient(
        135deg,
        rgba(100, 197, 178, 0.2) 0%,
        rgba(255, 193, 7, 0.2) 100%
    );
}

/* ==========================================================================
   Glow Effects
   ========================================================================== */

/**
 * Soft Glow - Gentle glow for cards and featured elements
 * Adapted from lovable.ai using eRide green
 */
.treatment-glow-soft {
    box-shadow: 0 0 30px rgba(100, 197, 178, 0.3);
}

/**
 * Glow Hover - Stronger glow on hover
 */
.treatment-glow-hover:hover {
    box-shadow: 0 0 40px rgba(100, 197, 178, 0.4);
    transition: box-shadow 0.3s ease-in-out;
}

/**
 * Achievement Glow - Gold glow for achievements
 */
.treatment-glow-achievement {
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.3);
}

/* ==========================================================================
   Transition Utilities
   ========================================================================== */

/**
 * Standard Transition - Use for most interactive elements
 */
.treatment-transition {
    transition: all 0.3s ease-in-out;
}

/**
 * Fast Transition - Use for quick interactions
 */
.treatment-transition-fast {
    transition: all 0.2s ease-in-out;
}

/**
 * Slow Transition - Use for smooth, noticeable changes
 */
.treatment-transition-slow {
    transition: all 0.5s ease-in-out;
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/**
 * GPU Acceleration Hint
 * Add to elements with animations for smoother performance
 */
.treatment-gpu-accelerate {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/**
 * Reduce Motion - Respect user preferences
 * Disable animations for users who prefer reduced motion
 */
@media (prefers-reduced-motion: reduce) {
    .treatment-animate-float,
    .treatment-animate-progress,
    .treatment-animate-unlock,
    .treatment-animate-shimmer,
    .treatment-animate-pulse,
    .treatment-animate-slide-in,
    .treatment-animate-fade-in {
        animation: none !important;
    }

    .treatment-transition,
    .treatment-transition-fast,
    .treatment-transition-slow {
        transition: none !important;
    }
}