/* Smooth transition from skeleton to real content */

/* Fade in animation for content */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply fade-in to trip cards when they load */
.trip-card-loaded {
    animation: fadeIn 0.4s ease-out;
}

/* Skeleton pulse animation for better loading feel */
.mud-skeleton {
    animation: pulse 1.5s ease-in-out infinite;
}

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

/* Smooth opacity transition for section swaps */
.dashboard-section {
    transition: opacity 0.3s ease-in-out;
}

.dashboard-section.loading {
    opacity: 0.7;
}

.dashboard-section.loaded {
    opacity: 1;
}