/**
 * Template Switcher Smooth Transitions
 * Prevents flickering when switching card templates by adding graceful fade effects
 */

/* Smooth fade-out during template switch */
.elementor-widget-ts-post-feed.vx-loading {
    opacity: 0 !important;
    transition: opacity 0.2s ease-out;
}

/* Ensure grid maintains height during transition to prevent page jumping */
.post-feed-grid {
    transition: all 0.2s ease-in-out;
    min-height: 200px;
}

/* Smooth fade-in when content loads */
.elementor-widget-ts-post-feed:not(.vx-loading) {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/* Add skeleton effect during loading for more graceful appearance */
.elementor-widget-ts-post-feed.vx-loading .post-feed-grid > * {
    opacity: 0;
    pointer-events: none;
}