/*
 * Performance Optimizations for Planet Pets Website
 * These optimizations improve loading speed and reduce resource usage
 */

/* Image optimization and lazy loading support */
img[loading="lazy"] {
    transition: opacity 0.3s ease-in-out;
}

img[loading="eager"] {
    opacity: 1;
}

/* Optimize hero background image while preserving original overlay */
.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)), url('../images/hero_back_1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* Changed from fixed to improve performance */
}

/* Support fallback for browsers that don't support WebP */
.no-webp .hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)), url('../images/hero_back_1.jpg');
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .hero-title {
        animation: none !important;
    }
    
    .fade-in-up,
    .fade-in-right,
    .delay-1,
    .delay-2 {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Critical path CSS optimizations */
.hero-title {
    font-display: swap; /* Ensure text is visible during font load */
}

/* Optimize carousel for better performance */
.carousel-track {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

.carousel-slide {
    backface-visibility: hidden;
}

/* Optimize scroll indicator */
.scroll-indicator {
    will-change: width;
    contain: layout style paint;
}

/* GPU acceleration for smooth animations */
.service-card {
    will-change: transform;
    backface-visibility: hidden;
}

.btn {
    will-change: transform;
    backface-visibility: hidden;
}

/* Optimize images for better rendering */
.hero-img,
.pet-img,
.doctor-dog-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: crisp-edges;
}

/* Optimize form inputs */
.form-input,
.form-select,
.form-textarea {
    will-change: border-color, box-shadow;
}

/* Preload critical fonts */
@font-face {
    font-family: 'Inter';
    font-display: swap;
    src: url('data:,') format('woff2');
}

/* Optimize contact grid layout */
.contact-grid {
    contain: layout style;
}

/* Reduce paint and layout thrashing */
.nav-menu {
    contain: layout style;
}

.services-grid {
    contain: layout;
}

/* Optimize loading states */
.loading .spinner {
    will-change: transform;
    backface-visibility: hidden;
}

/* Content visibility optimization for off-screen content */
.footer {
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}

.contact-info {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}

/* Preserve original hero overlay for text readability */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Optimize text rendering */
body {
    text-rendering: optimizeSpeed; /* Changed from optimizeLegibility for better performance */
}

.hero-title,
.section-title {
    text-rendering: optimizeLegibility; /* Keep high quality for headings only */
}

/* Reduce JavaScript execution blocking */
.hidden {
    display: none !important;
    visibility: hidden !important;
}

/* Optimize toast notifications */
.toast {
    will-change: opacity, transform;
    backface-visibility: hidden;
}

/* Memory optimization for large lists */
.nav-menu,
.services-grid,
.contact-grid {
    contain: layout style paint;
}

/* Optimize modal animations */
.modal {
    will-change: opacity;
    backface-visibility: hidden;
}

/* Performance-focused media queries */
@media (max-width: 768px) {
    /* Fix viewport and overflow issues */
    body {
        overflow-x: hidden;
    }
    
    .main {
        overflow-x: hidden;
    }
    
    /* Disable complex animations on mobile for better performance */
    .service-card {
        transform: none !important;
    }
    
    /* Fix hero section for mobile */
    .hero {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)), url('../images/hero_back_1.webp');
        background-attachment: scroll;
        min-height: 60vh;
        padding: 3rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-container {
        flex-direction: column;
        text-align: center;
        margin-left: 0;
        padding: 0 1.5rem;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 90rem;
    }
    
    .hero-content {
        max-width: 100%;
        margin-right: 0;
        padding-left: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .hero-title {
        font-size: 2.8rem !important;
        margin-bottom: 1.5rem;
    }
    
    .hero-description {
        font-size: 1.6rem !important;
        margin-bottom: 2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 28rem;
        padding: 1.2rem 2rem;
        font-size: 1.4rem;
    }
    
    .hero-image {
        display: none; /* Hide hero images on mobile for cleaner look */
    }
    
    /* Fix navigation */
    .nav-container {
        padding: 0 1.5rem;
    }
    
    .nav-logo h1 {
        font-size: 2rem;
    }
    
    /* Optimize services section */
    .services {
        padding: 4rem 0;
    }
    
    .services-grid {
        gap: 2rem;
        margin-top: 2rem;
    }
    
    .service-card {
        padding: 2rem 1.5rem;
        margin-bottom: 1rem;
    }
    
    .service-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    /* Fix carousel for mobile */
    .pets-carousel {
        flex: none;
        max-width: 100%;
        width: 100%;
        margin-top: 2rem;
    }
    
    .carousel-container {
        height: 30rem; /* Reduced height for mobile */
        border-radius: 1rem;
        margin: 0 1rem;
    }
    
    .pet-img {
        height: 30rem; /* Match container height */
        object-fit: cover;
    }
    
    .carousel-track {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }
    
    .carousel-slide {
        scroll-snap-align: start;
    }
    
    .carousel-btn {
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
    }
    
    .carousel-btn-prev {
        left: 1rem;
    }
    
    .carousel-btn-next {
        right: 1rem;
    }
    
    .carousel-indicators {
        bottom: 1rem;
        gap: 0.8rem;
    }
    
    .indicator {
        width: 1rem;
        height: 1rem;
    }
    
    .image-caption {
        font-size: 1.4rem;
        padding: 1.5rem 1rem 1rem;
    }
    
    .pets-showcase {
        padding: 0 1rem;
    }
    
    .pets-content {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .pets-features {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    /* Fix contact section */
    .contact-info {
        padding: 4rem 0;
    }
    
    .contact-grid {
        gap: 2rem;
    }
    
    .contact-item {
        text-align: center;
        padding: 1.5rem;
    }
    
    /* Fix appointment booking page */
    .appointment-trust-section {
        margin: 2rem 1rem;
        padding: 2rem 1rem;
    }
    
    .trust-content {
        padding: 0;
    }
    
    .doctor-dog-img {
        max-height: 25rem;
        width: 100%;
        object-fit: cover;
    }
    
    .appointment-form {
        margin: 2rem 1rem;
        padding: 2rem 1rem;
    }
    
    /* Fix form elements */
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 1.6rem;
        padding: 1.2rem;
    }
    
    .btn {
        font-size: 1.4rem;
        padding: 1.2rem 2rem;
    }
    
    .btn-large {
        font-size: 1.6rem;
        padding: 1.4rem 2.5rem;
    }
    
    /* Fix footer */
    .footer {
        padding: 3rem 0 1rem;
    }
    
    .footer-content {
        text-align: center;
        gap: 2rem;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
    
    .hero {
        min-height: 50vh;
        padding: 2rem 0;
    }
    
    .hero-title {
        font-size: 2.4rem !important;
    }
    
    .hero-description {
        font-size: 1.4rem !important;
    }
    
    .section-title {
        font-size: 2.4rem;
    }
    
    .nav-logo h1 {
        font-size: 1.8rem;
    }
    
    .service-card {
        padding: 1.5rem 1rem;
    }
    
    .appointment-trust-section,
    .appointment-form {
        margin: 1rem 0.5rem;
        padding: 1.5rem 1rem;
    }
    
    .trust-text h2 {
        font-size: 2.2rem;
    }
    
    .trust-text p {
        font-size: 1.5rem;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-img,
    .pet-img,
    .doctor-dog-img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Print optimizations */
@media print {
    .hero,
    .carousel,
    .scroll-indicator,
    .nav-toggle,
    .btn,
    .loading,
    .toast {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt !important;
    }
}

/* Optimize focus states for better accessibility */
*:focus-visible {
    outline: 2px solid #3498db;
    outline-offset: 2px;
    transition: outline-color 0.15s ease;
}

/* Remove focus outline for mouse users */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Critical resource hints styles */
.resource-hint {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}