/* Portfolio Image Optimization Styles */

/* Blur-up effect for loading images */
.portfolio-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background-color: #f0f0f0;
    transition: filter 0.3s ease-out;
    filter: blur(10px);
}

/* Once image is loaded, remove blur */
.portfolio-image.loaded,
.portfolio-image[src*=".webp"]:not([src*="100x100"]) {
    filter: blur(0px);
}

/* Optimize for faster initial render */
.portfolio-grid {
    display: grid;
    gap: 1rem;
    min-height: 600px;
}

/* Prevent layout shift during image load */
.portfolio-card img {
    aspect-ratio: 1;
}

/* Large items (for the layout) */
.item.large {
    min-height: 300px;
    grid-column: span 2;
    grid-row: span 2;
}

.item.large .portfolio-card img {
    aspect-ratio: 1;
}

/* Wide items */
.item.wide .portfolio-card img {
    aspect-ratio: 16/10;
}

/* Tall items */
.item.tall .portfolio-card img {
    aspect-ratio: 10/16;
}

/* Standard items */
.item .portfolio-card img {
    aspect-ratio: 1;
}

/* Preload optimization - reduce First Contentful Paint */
@media (max-width: 640px) {
    .portfolio-image {
        /* Mobile: reduce initial blur-up time */
        transition: filter 0.2s ease-out;
    }
}

/* High performance mode */
@media (prefers-reduced-motion: reduce) {
    .portfolio-image {
        transition: none;
    }
}