/* ==========================================
   Animations & Micro-interactions System
   ========================================== */

/* ---- Timing & easing tokens ---- */
:root {
    --anim-fast:   0.15s;
    --anim-normal: 0.25s;
    --anim-slow:   0.38s;
    --ease-out:    cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   Keyframe Definitions
   ========================================== */

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

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

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

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

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

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

@keyframes scaleInSpring {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

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

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

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

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

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

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

@keyframes pulseShadow {
    0%, 100% { box-shadow: 0 0 0 0 var(--focus-ring); }
    50%       { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.05); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

@keyframes ringBell {
    0%, 100% { transform: rotate(0deg); }
    10%       { transform: rotate(14deg); }
    30%       { transform: rotate(-14deg); }
    50%       { transform: rotate(8deg); }
    70%       { transform: rotate(-8deg); }
    90%       { transform: rotate(3deg); }
}

@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

@keyframes progressFill {
    from { width: 0; }
}

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

.animate-fade-in       { animation: fadeIn      var(--anim-normal) var(--ease-out) both; }
.animate-fade-in-up    { animation: fadeInUp    var(--anim-normal) var(--ease-out) both; }
.animate-fade-in-down  { animation: fadeInDown  var(--anim-normal) var(--ease-out) both; }
.animate-fade-in-right { animation: fadeInRight var(--anim-normal) var(--ease-out) both; }
.animate-scale-in      { animation: scaleIn     var(--anim-normal) var(--ease-out) both; }
.animate-scale-spring  { animation: scaleInSpring 0.4s var(--ease-spring) both; }
.animate-slide-up      { animation: slideInUp   var(--anim-normal) var(--ease-out) both; }
.animate-bounce-in     { animation: bounceIn    0.5s var(--ease-out) both; }
.animate-shake         { animation: shake       0.5s var(--ease-out) both; }
.animate-pulse         { animation: pulse       1.8s ease infinite; }
.animate-spin          { animation: spin        0.8s linear infinite; }

/* Stagger delays for lists */
.animate-delay-1 { animation-delay: 0.05s; }
.animate-delay-2 { animation-delay: 0.10s; }
.animate-delay-3 { animation-delay: 0.15s; }
.animate-delay-4 { animation-delay: 0.20s; }
.animate-delay-5 { animation-delay: 0.25s; }

/* Skeleton loading shimmer */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--gray-100) 25%,
        var(--gray-200) 50%,
        var(--gray-100) 75%
    );
    background-size: 800px 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================
   Reduced Motion — respect user preference
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Cards & containers entry animation */
@media (prefers-reduced-motion: no-preference) {
    .modern-card,
    .filter-card,
    .stat-card,
    .page-header-card {
        animation: fadeInUp var(--anim-normal) var(--ease-out) both;
    }

    .table-container,
    .table-responsive-clean {
        animation: fadeIn 0.3s var(--ease-out) both;
    }
}

/* ==========================================
   Micro-interactions & Hover Effects
   ========================================== */

/* Lift on hover with shadow transition */
.hover-lift {
    transition: transform var(--anim-normal) var(--ease-smooth), box-shadow var(--anim-normal) var(--ease-smooth) !important;
}
.hover-lift:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Elastic scale on hover */
.hover-scale {
    transition: transform var(--anim-fast) var(--ease-spring) !important;
}
.hover-scale:hover {
    transform: scale(1.05) !important;
}

/* Bell ring micro-interaction */
.hover-ring {
    transition: transform var(--anim-normal) var(--ease-smooth);
}
.hover-ring:hover {
    animation: ringBell 0.6s var(--ease-smooth) both;
}

/* Rotate icon on hover */
.hover-spin {
    transition: transform var(--anim-normal) var(--ease-smooth) !important;
}
.hover-spin:hover {
    transform: rotate(180deg) !important;
}
.hover-spin-full:hover {
    transform: rotate(360deg) !important;
}

/* Pulse shadow utility class */
.animate-pulse-shadow {
    animation: pulseShadow 2s var(--ease-smooth) infinite;
}

/* ==========================================
   Dark Theme Skeleton Override
   ========================================== */
[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        var(--surface) 25%,
        var(--surface-soft) 50%,
        var(--surface) 75%
    ) !important;
    background-size: 800px 100% !important;
}