/* Performance optimized CSS */

/* Use transform and opacity for animations (GPU accelerated) */
.route-card {
    will-change: transform, opacity;
    transform: translateZ(0); /* Force hardware acceleration */
}

.route-card:hover {
    transform: translateY(-4px) translateZ(0);
}

/* Optimize image loading */
.route-image {
    background-color: #f0f0f0;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.route-image.loaded {
    opacity: 1;
}

.route-image.error {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%23f0f0f0"/><text x="50" y="50" text-anchor="middle" dy=".3em" fill="%23999">No Image</text></svg>');
    background-size: cover;
}

/* Optimize scrolling performance */
.route-list {
    contain: layout style paint;
    overflow-anchor: auto;
}

/* Use containment for better performance */
.route-card {
    contain: layout style paint;
}

/* Optimize animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .route-card,
    .route-image {
        transition: none;
    }
}

/* Critical CSS for above-the-fold content */
.route-tabs-container,
.route-tabs,
.route-tab {
    display: flex;
    /* Inline critical styles here */
}

/* Defer non-critical styles */
.route-detail-modal {
    /* Non-critical styles can be loaded later */
}