/* Animation Component System
 * Consolidated animations and transitions from multiple CSS files
 * Requirements: 1.5, 2.2, 3.2
 */

/* Base animation settings */
:root {
    --animation-duration-fast: 0.15s;
    --animation-duration-normal: 0.3s;
    --animation-duration-slow: 0.6s;
    --animation-easing-ease: ease;
    --animation-easing-ease-in: ease-in;
    --animation-easing-ease-out: ease-out;
    --animation-easing-ease-in-out: ease-in-out;
    --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Keyframe Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

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

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

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

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.1);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(1);
    }
}

/* Animation Utility Classes */

/* Fade animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--animation-duration-slow) var(--animation-easing-ease-out),
                transform var(--animation-duration-slow) var(--animation-easing-ease-out);
}

.fade-in.visible,
.fade-in.animate {
    opacity: 1;
    transform: translateY(0);
}

.fade-out {
    animation: fadeOut var(--animation-duration-normal) var(--animation-easing-ease-out) forwards;
}

/* Slide animations */
.slide-in-left {
    animation: slideInLeft var(--animation-duration-normal) var(--animation-easing-ease-out);
}

.slide-in-right {
    animation: slideInRight var(--animation-duration-normal) var(--animation-easing-ease-out);
}

.slide-in-up {
    animation: slideInUp var(--animation-duration-normal) var(--animation-easing-ease-out);
}

.slide-in-down {
    animation: slideInDown var(--animation-duration-normal) var(--animation-easing-ease-out);
}

.slide-down {
    animation: slideDown var(--animation-duration-normal) var(--animation-easing-ease-out);
}

.slide-up {
    animation: slideUp var(--animation-duration-normal) var(--animation-easing-ease-out);
}

/* Pulse and bounce animations */
.pulse {
    animation: pulse 2s infinite;
}

.pulse-fast {
    animation: pulse 1s infinite;
}

.pulse-slow {
    animation: pulse 3s infinite;
}

.bounce {
    animation: bounce 1s;
}

.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

/* Shake animation */
.shake {
    animation: shake 0.5s var(--animation-easing-ease-in-out);
}

/* Spin animation */
.spin {
    animation: spin 1s linear infinite;
}

.spin-slow {
    animation: spin 2s linear infinite;
}

.spin-fast {
    animation: spin 0.5s linear infinite;
}

/* Zoom animations */
.zoom-in {
    animation: zoomIn var(--animation-duration-normal) var(--animation-easing-ease-out);
}

.zoom-out {
    animation: zoomOut var(--animation-duration-normal) var(--animation-easing-ease-out);
}

/* Hover animations */
.hover-lift {
    transition: transform var(--animation-duration-normal) var(--animation-easing-ease-out),
                box-shadow var(--animation-duration-normal) var(--animation-easing-ease-out);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.hover-lift-sm {
    transition: transform var(--animation-duration-fast) var(--animation-easing-ease-out),
                box-shadow var(--animation-duration-fast) var(--animation-easing-ease-out);
}

.hover-lift-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hover-lift-lg {
    transition: transform var(--animation-duration-normal) var(--animation-easing-ease-out),
                box-shadow var(--animation-duration-normal) var(--animation-easing-ease-out);
}

.hover-lift-lg:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.hover-scale {
    transition: transform var(--animation-duration-normal) var(--animation-easing-ease-out);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-scale-sm {
    transition: transform var(--animation-duration-fast) var(--animation-easing-ease-out);
}

.hover-scale-sm:hover {
    transform: scale(1.02);
}

.hover-rotate {
    transition: transform var(--animation-duration-normal) var(--animation-easing-ease-out);
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

/* Loading animations */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f4f6;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

.loading-spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.loading-spinner-lg {
    width: 60px;
    height: 60px;
    border-width: 6px;
}

.loading-dots {
    display: inline-flex;
    gap: 4px;
}

.loading-dots::after {
    content: '';
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0%, 20% {
        content: '.';
    }
    40% {
        content: '..';
    }
    60%, 100% {
        content: '...';
    }
}

/* Progress animations */
.progress-bar-animated {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
    animation: progressStripes 1s linear infinite;
}

@keyframes progressStripes {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1rem 0;
    }
}

/* Transition utilities */
.transition-none {
    transition: none !important;
}

.transition-all {
    transition: all var(--animation-duration-normal) var(--animation-easing-ease);
}

.transition-colors {
    transition: color var(--animation-duration-normal) var(--animation-easing-ease),
                background-color var(--animation-duration-normal) var(--animation-easing-ease),
                border-color var(--animation-duration-normal) var(--animation-easing-ease);
}

.transition-opacity {
    transition: opacity var(--animation-duration-normal) var(--animation-easing-ease);
}

.transition-transform {
    transition: transform var(--animation-duration-normal) var(--animation-easing-ease);
}

.transition-shadow {
    transition: box-shadow var(--animation-duration-normal) var(--animation-easing-ease);
}

/* Duration modifiers */
.duration-fast {
    transition-duration: var(--animation-duration-fast) !important;
}

.duration-normal {
    transition-duration: var(--animation-duration-normal) !important;
}

.duration-slow {
    transition-duration: var(--animation-duration-slow) !important;
}

/* Easing modifiers */
.ease-linear {
    transition-timing-function: linear !important;
}

.ease-in {
    transition-timing-function: var(--animation-easing-ease-in) !important;
}

.ease-out {
    transition-timing-function: var(--animation-easing-ease-out) !important;
}

.ease-in-out {
    transition-timing-function: var(--animation-easing-ease-in-out) !important;
}

.ease-bounce {
    transition-timing-function: var(--animation-easing-bounce) !important;
}

/* Animation delay utilities */
.delay-75 {
    animation-delay: 75ms;
}

.delay-100 {
    animation-delay: 100ms;
}

.delay-150 {
    animation-delay: 150ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-500 {
    animation-delay: 500ms;
}

.delay-700 {
    animation-delay: 700ms;
}

.delay-1000 {
    animation-delay: 1000ms;
}

/* Animation fill modes */
.fill-none {
    animation-fill-mode: none;
}

.fill-forwards {
    animation-fill-mode: forwards;
}

.fill-backwards {
    animation-fill-mode: backwards;
}

.fill-both {
    animation-fill-mode: both;
}

/* Animation iteration counts */
.animate-once {
    animation-iteration-count: 1;
}

.animate-infinite {
    animation-iteration-count: infinite;
}

/* Stagger animations for lists */
.stagger-children > * {
    animation-delay: calc(var(--stagger-delay, 100ms) * var(--stagger-index, 0));
}

/* Specific component animations consolidated from other files */

/* Feature card hover (from theme.css) */
.feature-card {
    transition: transform var(--animation-duration-normal) var(--animation-easing-ease-out),
                box-shadow var(--animation-duration-normal) var(--animation-easing-ease-out);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Test section transitions (from styles.css) */
.test-section {
    transition: all var(--animation-duration-normal) var(--animation-easing-ease);
}

/* Refresh button animations (from dashboard files) */
.refresh-btn {
    transition: background-color var(--animation-duration-fast) var(--animation-easing-ease);
}

.refresh-btn:active {
    transform: translateY(1px);
}

.refresh-icon {
    transition: transform var(--animation-duration-normal) var(--animation-easing-ease);
}

.refresh-btn:hover .refresh-icon {
    transform: rotate(180deg);
}

/* Metric card animations (from dashboard files) */
.metric-card {
    transition: transform var(--animation-duration-fast) var(--animation-easing-ease-out),
                box-shadow var(--animation-duration-fast) var(--animation-easing-ease-out);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Health card animations (from monitoring dashboard) */
.health-card {
    transition: transform var(--animation-duration-fast) var(--animation-easing-ease-out),
                box-shadow var(--animation-duration-fast) var(--animation-easing-ease-out);
}

.health-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .hover-lift:hover,
    .hover-lift-sm:hover,
    .hover-lift-lg:hover {
        transform: none;
        box-shadow: none;
    }
    
    .hover-scale:hover,
    .hover-scale-sm:hover {
        transform: none;
    }
    
    .hover-rotate:hover {
        transform: none;
    }
    
    /* Reduce animation intensity on mobile */
    .feature-card:hover {
        transform: translateY(-2px);
    }
}

/* Reduced motion support */
@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;
    }
    
    .fade-in {
        transform: none;
        opacity: 1;
    }
    
    .pulse,
    .pulse-fast,
    .pulse-slow,
    .spin,
    .spin-slow,
    .spin-fast,
    .bounce,
    .heartbeat,
    .shake {
        animation: none;
    }
    
    .loading-spinner {
        animation: none;
        border-top-color: transparent;
    }
    
    .progress-bar-animated {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .loading-spinner {
        border-color: currentColor;
        border-top-color: transparent;
    }
}

/* Print styles */
@media print {
    .fade-in,
    .slide-in-left,
    .slide-in-right,
    .slide-in-up,
    .slide-in-down,
    .zoom-in,
    .zoom-out {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .loading-spinner,
    .pulse,
    .spin,
    .bounce {
        display: none;
    }
}