/* static/css/card_animations.css */
/* Styles for card animations in the Pipeline Status view. */

/* Animation-related properties for email cards */
.email-card {
    /*
     IMPORTANT: The transition property is now applied by JavaScript when an
     animation is needed. This prevents unwanted animations on redraws.
    */
    cursor: grab;
    /* Hint to the browser about which properties will change, for performance. */
    will-change: opacity, transform;
}

.email-card:active {
    cursor: grabbing;
}

/* A card that is being removed */
.email-card.exiting {
    opacity: 0;
    transform: scale(0.8); /* Shrink in place */
    transition: transform 0.4s ease-in, opacity 0.3s ease-in;
}

/*
 The clone that "flies" from the old position to the new position.
*/
.flying-clone {
    /* Make it look like a card that's being lifted off the page */
    box-shadow: 0 15px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
    z-index: 1000;
    pointer-events: none;
    will-change: transform, opacity;
}

/*
 The clone for an entire GROUP of cards flying across the screen.
*/
.flying-group-clone {
    z-index: 1001; /* Above individual card clones */
    pointer-events: none;
    will-change: transform, opacity;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--surface);
    box-shadow: 0 20px 35px -10px var(--shadow-color), 0 10px 15px -8px var(--shadow-color);
    border: 1px solid var(--border);
}