/* Performance-optimized filtering animations using CSS instead of JS */

.tool-card {
    transition: all 0.2s ease;
    will-change: transform, opacity;
}


/* Hide filtered cards completely to avoid overlap and allow grid reflow */
.tool-card.filtered-hidden {
    display: none !important;
}

/* Visible cards use default layout; the class is kept for compatibility */
.tool-card.filtered-visible {
    display: block;
}

/* Optimize icon loading states */
.optimized-icon {
    transition: opacity 0.15s ease;
}

.optimized-icon:not(.icon-loaded):not(.icon-fallback) {
    opacity: 0.6;
    background: linear-gradient(45deg, #f1f5f9 25%, transparent 25%);
    animation: loading-shimmer 1.5s infinite linear;
    background-size: 20px 20px;
}

@keyframes loading-shimmer {
    0% { background-position: 0 0; }
    100% { background-position: 20px 20px; }
}

.icon-loaded,
.icon-fallback {
    opacity: 1;
    background: none;
    animation: none;
}

/* Optimize mobile menu performance */
.sidebar {
    will-change: transform;
    backface-visibility: hidden;
}

.mobile-overlay {
    will-change: opacity;
    backface-visibility: hidden;
}

/* Reduce repaints for scrolling */
.nav-item,
.tool-card,
.section-header {
    will-change: auto;
    backface-visibility: hidden;
}

/* Critical path optimization */
.js-enabled .progressive-enhancement {
    display: block;
}

/* Lazy loading states */
[data-lazy-load="true"] {
    opacity: 0.8;
}

[data-lazy-load="false"] {
    opacity: 1;
}

/* GPU acceleration for transforms */
.tool-card:hover {
    transform: translateY(-2px);
    transform-style: preserve-3d;
}