/* 
 * Rava Solutions HRP Animation System
 * Based on DESIGN_SYSTEM_GUIDE.md Animation & Motion section
 */

/* ===================================
   Micro-interactions (150ms)
   =================================== */
.mud-button,
.mud-icon-button,
.mud-checkbox,
.mud-radio,
.mud-switch {
    transition: all 150ms var(--ease-out);
}

/* Button hover lift effect */
.mud-button:hover {
    transform: translateY(-1px);
}

/* Icon button rotation on hover */
.mud-icon-button:hover .mud-icon-root {
    transform: rotate(5deg);
}

/* ===================================
   Page Transitions (300ms)
   =================================== */
.page-transition-enter {
    opacity: 0;
    transform: translateX(20px);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 300ms var(--ease-out);
}

.page-transition-exit {
    opacity: 1;
    transform: translateX(0);
}

.page-transition-exit-active {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 300ms var(--ease-in);
}

/* ===================================
   Card Animations
   =================================== */
.mud-card {
    transition: transform 300ms var(--ease-out), 
                box-shadow 300ms var(--ease-out);
}

.mud-card:hover {
    transform: translateY(-2px);
}

/* Card appear animation */
@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-animate-in {
    animation: cardAppear 400ms var(--ease-out) forwards;
}

/* ===================================
   Modal/Dialog Animations
   =================================== */
.mud-dialog {
    animation: dialogAppear 250ms var(--ease-spring);
}

@keyframes dialogAppear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mud-overlay {
    animation: fadeIn 300ms var(--ease-out);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===================================
   Data Table Animations
   =================================== */
/* Row slide-in on add */
.mud-table-row-animate-in {
    animation: slideInFromBottom 300ms var(--ease-out);
}

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

/* Row fade-out on delete */
.mud-table-row-animate-out {
    animation: fadeOut 200ms var(--ease-in) forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Smooth sort animations */
.mud-table-row {
    transition: transform 400ms var(--ease-in-out);
}

/* ===================================
   Loading Animations
   =================================== */
/* Skeleton pulse */
.mud-skeleton {
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

@keyframes skeletonPulse {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}

/* Progress bar indeterminate */
.mud-progress-linear-indeterminate {
    animation: progressIndeterminate 2s linear infinite;
}

@keyframes progressIndeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Spinner rotation */
.mud-progress-circular svg {
    animation: rotate 1.4s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===================================
   Navigation Animations
   =================================== */
/* Drawer slide */
.mud-drawer-content {
    transition: transform 300ms var(--ease-out);
}

/* Nav link hover slide */
.mud-nav-link {
    transition: all 150ms var(--ease-out);
}

.mud-nav-link:hover {
    transform: translateX(4px);
}

/* Menu group expand/collapse */
.mud-collapse-container {
    transition: height 300ms var(--ease-in-out);
}

/* ===================================
   Form Animations
   =================================== */
/* Input focus - removed global transition to allow MudBlazor defaults */

/* Label float animation - moved to dialog-overrides.css for better control */

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

.mud-input-error {
    animation: shake 400ms var(--ease-out);
}

/* ===================================
   Snackbar Animations
   =================================== */
.mud-snackbar {
    animation: slideInFromBottom 300ms var(--ease-out);
}

.mud-snackbar-close {
    animation: slideOutToBottom 200ms var(--ease-in) forwards;
}

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

/* ===================================
   Chip Animations
   =================================== */
.mud-chip {
    transition: all 150ms var(--ease-out);
}

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

/* Chip delete animation */
.mud-chip-delete {
    animation: chipDelete 200ms var(--ease-in) forwards;
}

@keyframes chipDelete {
    to {
        transform: scale(0);
        opacity: 0;
    }
}

/* ===================================
   Tooltip Animations
   =================================== */
.mud-tooltip {
    animation: tooltipAppear 150ms var(--ease-out);
}

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

/* ===================================
   Tab Animations
   =================================== */
.mud-tab-slider {
    transition: all 300ms var(--ease-out);
}

.mud-tabs-panels {
    transition: transform 300ms var(--ease-out);
}

/* ===================================
   Expansion Panel Animations
   =================================== */
.mud-expand-panel-content {
    transition: all 300ms var(--ease-in-out);
}

/* ===================================
   Performance Optimizations
   =================================== */
/* Use GPU acceleration for transforms */
/* NOTE: .mud-dialog intentionally excluded - will-change creates a stacking context
   that traps fixed-position dropdowns inside the dialog layer */
.mud-card,
.mud-button,
.mud-drawer-content {
    will-change: transform;
}

/* Disable animations for reduced motion preference */
@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;
    }
}

/* ===================================
   Custom Component Animations
   =================================== */
/* Dashboard metric card pulse */
.metric-card-pulse {
    animation: pulse 2s var(--ease-in-out) infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 123, 5, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(239, 123, 5, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 123, 5, 0);
    }
}

/* Logo appear animation */
.logo-appear {
    animation: logoAppear 600ms var(--ease-spring);
}

@keyframes logoAppear {
    from {
        opacity: 0;
        transform: scale(0.8) rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Status indicator blink */
.status-blink {
    animation: blink 1s linear infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}