/* Performance Optimized CSS - Load after critical CSS */

/* Lazy loading animations */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy-loaded {
    opacity: 1;
}

/* Optimize animations for better performance */
* {
    will-change: auto;
}

/* Use transform instead of changing layout properties */
.hover-transform:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* Optimize images for better LCP */
img {
    content-visibility: auto;
    contain-intrinsic-size: 300px 200px;
}

/* Reduce paint complexity */
.card {
    contain: layout style paint;
}

/* Optimize scrolling performance */
.scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

/* Optimize font loading */
@font-face {
    font-family: 'ITC Garamond Std';
    font-display: swap;
    /* Add font files here when available */
}

/* Reduce layout thrashing */
.dynamic-content {
    min-height: 200px;
    contain: layout;
}

/* Optimize button interactions */
.btn {
    touch-action: manipulation;
    user-select: none;
}

/* Improve form performance */
.form-control {
    contain: layout style;
}

/* Optimize accordion animations */
.accordion-collapse {
    will-change: height;
}

/* Reduce repaints on hover */
.nav-link:hover,
.dropdown-item:hover {
    contain: layout style paint;
}

/* Optimize slick carousel if used */
.slick-slider {
    contain: layout;
}

.slick-track {
    will-change: transform;
}

/* Optimize modal performance */
.modal {
    contain: layout style paint;
}

/* Reduce CLS for dynamic content */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Optimize third-party embeds */
iframe {
    loading: lazy;
    contain: layout style paint;
}

/* Performance hints for browsers */
.preload-hint {
    content-visibility: auto;
    contain-intrinsic-size: 1px 1000px;
}

/* Optimize table rendering */
table {
    contain: layout style;
}

/* Reduce paint on scroll */
.fixed-header {
    contain: layout style paint;
    will-change: transform;
}

/* Optimize background images */
.bg-image {
    background-attachment: scroll; /* Better than fixed for mobile */
    contain: layout style paint;
}

/* Critical resource hints */
.critical-resource {
    font-display: swap;
    loading: eager;
}

/* Non-critical resource hints */
.non-critical-resource {
    loading: lazy;
    decoding: async;
}

/* Optimize print styles */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
    
    .no-print {
        display: none !important;
    }
}