/* ============================================
   ACG Events Dashboard v2 - Animation Utilities
   CSS Animations & Keyframes
   ============================================ */

/* === Keyframe Definitions === */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(139, 92, 246, 0.6);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

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

    to {
        transform: rotate(360deg);
    }
}

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

    100% {
        background-position: 1000px 0;
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* === Utility Animation Classes === */
.animate-fade-in {
    animation: fadeIn 0.5s var(--ease-out) forwards;
}

.animate-fade-out {
    animation: fadeOut 0.5s var(--ease-out) forwards;
}

.animate-slide-up {
    animation: slideUp 0.6s var(--ease-out) forwards;
}

.animate-slide-down {
    animation: slideDown 0.6s var(--ease-out) forwards;
}

.animate-slide-left {
    animation: slideLeft 0.6s var(--ease-out) forwards;
}

.animate-slide-right {
    animation: slideRight 0.6s var(--ease-out) forwards;
}

.animate-scale-in {
    animation: scaleIn 0.5s var(--ease-out) forwards;
}

.animate-scale-out {
    animation: scaleOut 0.5s var(--ease-out) forwards;
}

.animate-pulse {
    animation: pulse 2s var(--ease-in-out) infinite;
}

.animate-glow {
    animation: glow 2s var(--ease-in-out) infinite;
}

.animate-float {
    animation: float 3s var(--ease-in-out) infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-bounce {
    animation: bounce 1s var(--ease-in-out) infinite;
}

/* === Loading States === */
.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.skeleton {
    background: linear-gradient(90deg,
            var(--bg-secondary) 0%,
            var(--bg-tertiary) 50%,
            var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius);
}

/* === Hover Transitions === */
.hover-lift {
    transition: transform var(--transition-base) var(--ease-out),
        box-shadow var(--transition-base) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.hover-scale {
    transition: transform var(--transition-base) var(--ease-spring);
}

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

.hover-glow {
    transition: box-shadow var(--transition-base) var(--ease-out);
}

.hover-glow:hover {
    box-shadow: var(--shadow-glow-purple);
}

.hover-brightness {
    transition: filter var(--transition-base) var(--ease-out);
}

.hover-brightness:hover {
    filter: brightness(1.2);
}

/* === Stagger Animation Delays === */
.stagger-1 {
    animation-delay: 0.1s;
}

.stagger-2 {
    animation-delay: 0.2s;
}

.stagger-3 {
    animation-delay: 0.3s;
}

.stagger-4 {
    animation-delay: 0.4s;
}

.stagger-5 {
    animation-delay: 0.5s;
}

.stagger-6 {
    animation-delay: 0.6s;
}

.stagger-7 {
    animation-delay: 0.7s;
}

.stagger-8 {
    animation-delay: 0.8s;
}

/* === Page Transition === */
.page-transition {
    animation: fadeIn 0.3s var(--ease-out);
}

/* === Focus States === */
.focus-glow:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}

.focus-ring:focus {
    outline: 2px solid var(--accent-purple);
    outline-offset: 2px;
}

/* === Ripple Effect === */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
    width: 300px;
    height: 300px;
}

/* === Disabled State === */
.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* === Smooth Transitions === */
.transition-all {
    transition: all var(--transition-base) var(--ease-out);
}

.transition-colors {
    transition: background-color var(--transition-base) var(--ease-out),
        border-color var(--transition-base) var(--ease-out),
        color var(--transition-base) var(--ease-out);
}

.transition-transform {
    transition: transform var(--transition-base) var(--ease-out);
}

.transition-opacity {
    transition: opacity var(--transition-base) var(--ease-out);
}