/* ========================================
   Generic Animation Utilities Library
   Reusable animations for entire application
   ======================================== */

/* ========================================
   FLIP Animation Technique
   First, Last, Invert, Play - for smooth reordering
   ======================================== */

/**
 * FLIP Step 1: Mark element for animation
 * Used to track elements that will be animated
 */
.animate-flip-prepare {
    /* Mark for position tracking - no visual change */
}

/**
 * FLIP Step 2: Apply transform instantly (no transition)
 * This "inverts" the element back to its original position
 */
.animate-flip-invert {
    transition: none !important;
}

/**
 * FLIP Step 3: Play animation smoothly
 * Transform back to natural position with smooth transition
 */
.animate-flip-play {
    transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    transform: translate(0, 0) !important;
}

/**
 * FLIP Complete: Reset element
 */
.animate-flip-complete {
    transform: none !important;
    transition: none !important;
}

/* ========================================
   Reorder Animation
   Smooth vertical reordering of list items
   ======================================== */

.animate-reorder {
    transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.animate-reorder-fast {
    transition: transform 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.animate-reorder-slow {
    transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ========================================
   Fade Animations
   ======================================== */

.animate-fade-in {
    animation: fadeIn 300ms ease-in forwards;
}

.animate-fade-out {
    animation: fadeOut 300ms ease-out forwards;
}

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

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

/* ========================================
   Slide Animations
   ======================================== */

.animate-slide-up {
    animation: slideUp 300ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.animate-slide-down {
    animation: slideDown 300ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.animate-slide-left {
    animation: slideLeft 300ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.animate-slide-right {
    animation: slideRight 300ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

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

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

/* Slide down from collapsed state (for folder items) */
.animate-slide-down-fade {
    animation: slideDownFade 300ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.animate-slide-up-fade {
    animation: slideUpFade 250ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

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

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

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

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

/* ========================================
   Scale Animations
   ======================================== */

.animate-scale-in {
    animation: scaleIn 300ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.animate-scale-out {
    animation: scaleOut 300ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

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

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

/* ========================================
   Combined Scale + Fade Animations
   Quick "pop" effects for new elements
   ======================================== */

.animate-scale-fade-in {
    animation: scaleFadeIn 500ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.animate-scale-fade-out {
    animation: scaleFadeOut 150ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes scaleFadeIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scaleFadeOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.95);
        opacity: 0;
    }
}

/* ========================================
   Simple Popup Entrance (Original)
   Just scale and fade
   ======================================== */

.animate-popup-simple-enter {
    animation: popupSimpleEnter 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes popupSimpleEnter {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========================================
   Depth-Based Popup Entrance (Advanced)
   Background comes from back → front
   Content comes from front → back
   They meet in the middle (creates depth illusion)
   ======================================== */

/* Background: starts small/far, zooms forward */
.animate-popup-bg-enter {
    animation: popupBackgroundEnter 400ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

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

/* Content: starts large/close, zooms backward */
.animate-popup-content-enter {
    animation: popupContentEnter 400ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes popupContentEnter {
    from {
        transform: scale(2.2) translateY(-30px);
        opacity: 0;
        filter: blur(8px);
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
        filter: blur(0px);
    }
}

/* ========================================
   Bounce/Spring Animations
   ======================================== */

.animate-bounce {
    animation: bounce 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ========================================
   Height/Width Transitions
   Smooth expand/collapse animations
   ======================================== */

.animate-height {
    transition: height 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms ease;
    overflow: hidden;
}

.animate-width {
    transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms ease;
    overflow: hidden;
}

/* ========================================
   Pulse/Glow Animations
   For attention-grabbing effects
   ======================================== */

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0.0, 0.6, 1) infinite;
}

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

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

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(33, 150, 243, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(33, 150, 243, 0.6);
    }
}

/* ========================================
   Shake Animation
   For error states or attention
   ======================================== */

.animate-shake {
    animation: shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

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

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

/* Disable all animations/transitions instantly */
.no-transition,
.no-transition * {
    transition: none !important;
    animation: none !important;
}

/* Smooth all transitions */
.smooth-transition {
    transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}