/* ===========================================
   PERFORMANCE OPTIMIZATIONS
   - content-visibility for off-screen sections
   - contain for layout isolation
   - GPU-accelerated animations
   - will-change hints for interactive elements
   - Smooth scroll & reduced motion support
   =========================================== */

/* --- Content Visibility: skip rendering off-screen sections --- */
.services-section,
.why-choose-us,
.technology,
.homepage-cta,
.tracking-tech-section,
footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* --- Layout containment for repeating card grids --- */
.services-grid-new,
.features-container,
.company-values,
.additional-resources {
    contain: layout style;
}

.service-card-new,
.feature,
.white-paper-card {
    contain: layout style paint;
}

/* --- GPU-accelerated transforms for animated elements --- */
.service-card-new,
.feature,
.service-btn,
.btn,
.learn-more-btn,
.tech-btn,
.promise-btn,
.social-media a,
.nav-item .dropdown-menu,
.hero-slide,
.service-icon-wrapper {
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* --- Optimize hero slide transitions with GPU compositing --- */
.hero-slide {
    will-change: opacity;
    transform: translate3d(0, 0, 0);
}

.hero-content {
    will-change: transform, opacity;
}

/* --- Smooth image rendering --- */
img {
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.service-card-image img,
.feature-image img {
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* --- Optimized scroll behavior --- */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* --- Reduced motion for accessibility & performance --- */
@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-slide {
        transition: none !important;
    }

    .service-card-new:hover,
    .feature:hover,
    .btn:hover {
        transform: none !important;
    }
}

/* --- Optimized dropdown transitions --- */
.dropdown-menu {
    will-change: opacity, transform;
    transform: translate3d(0, 10px, 0);
    pointer-events: none;
}

.nav-item:hover .dropdown-menu {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

/* --- Paint containment for fixed elements --- */
header,
.top-bar {
    contain: layout style;
    will-change: background-color, box-shadow;
}

/* --- Optimize font rendering --- */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Smoother card hover transitions --- */
.service-card-new {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card-image img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Loading skeleton for CMS content --- */
.dynamic-sections-wrapper:empty {
    min-height: 0;
    transition: min-height 0.3s ease;
}

/* --- Optimize footer for late paint --- */
footer {
    contain-intrinsic-size: auto 400px;
}

/* --- Fade-in animation for lazy-loaded images --- */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

img[loading="lazy"].loaded,
img[loading="lazy"][complete] {
    opacity: 1;
}

/* Let natively loaded images show immediately */
img:not([loading="lazy"]),
img[loading="eager"] {
    opacity: 1;
}

/* --- Fix lazy image flash: show once decoded --- */
img {
    opacity: 1;
}

/* ===========================================
   MOBILE & TOUCH OPTIMIZATIONS
   =========================================== */

/* --- Fix 100vh on mobile browsers (address bar issue) --- */
.hero,
.login-hero,
.signup-hero {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
}

/* --- Scroll padding for fixed header (anchor links) --- */
html {
    scroll-padding-top: 80px;
}

/* --- Safe area for notched / rounded-corner devices --- */
body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

footer .footer-bottom {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

header,
.top-bar {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

/* --- Minimum touch target sizes (44px WCAG guideline) --- */
@media (pointer: coarse) {
    .btn,
    .service-btn,
    .learn-more-btn,
    .tech-btn,
    .promise-btn,
    .login-btn,
    .top-bar-link,
    .nav-item > a,
    .dropdown-menu a,
    .social-media a,
    .footer-links a,
    .header-actions a,
    button,
    input[type="submit"],
    input[type="button"],
    a.btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .checkbox-custom {
        min-width: 24px;
        min-height: 24px;
        width: 24px;
        height: 24px;
    }

    .toggle-password {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
}

/* --- Guard hover effects for actual hover devices --- */
@media (hover: none) {
    .service-card-new:hover {
        transform: none;
        box-shadow: none;
    }

    .service-card-image img:hover {
        transform: none;
    }

    .feature:hover {
        transform: none;
    }

    .btn:hover,
    .service-btn:hover,
    .learn-more-btn:hover {
        transform: none;
    }

    .social-media a:hover {
        transform: none;
    }
}

/* --- Tap highlight for touch devices --- */
@media (pointer: coarse) {
    a, button, input, select, textarea {
        -webkit-tap-highlight-color: rgba(230, 57, 70, 0.15);
    }
}

/* --- Fluid typography with clamp() --- */
@supports (font-size: clamp(1rem, 2vw, 2rem)) {
    .hero h1,
    .hero-content h1 {
        font-size: clamp(1.75rem, 4vw + 0.5rem, 3.6rem);
    }

    .hero p,
    .hero-content p {
        font-size: clamp(0.95rem, 1.5vw + 0.25rem, 1.3rem);
    }

    .services-section-header h2,
    .why-choose-us h2,
    .technology h2 {
        font-size: clamp(1.5rem, 3vw + 0.25rem, 2.75rem);
    }

    .service-card-body h3,
    .feature h3 {
        font-size: clamp(1.1rem, 1.8vw + 0.2rem, 1.5rem);
    }

    h2 {
        font-size: clamp(1.5rem, 3vw + 0.25rem, 2.5rem);
    }

    h3 {
        font-size: clamp(1.15rem, 2vw + 0.15rem, 1.75rem);
    }
}

/* --- Mobile-specific performance reductions --- */
@media (max-width: 768px) {
    /* Disable expensive backdrop-filter on mobile */
    .header.scrolled,
    .dropdown-menu,
    .modal-overlay {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Reduce will-change scope on mobile to save GPU memory */
    .service-card-new,
    .feature,
    .service-btn,
    .btn,
    .service-icon-wrapper {
        will-change: auto;
    }

    /* Simplify transitions on mobile */
    .service-card-new {
        transition: none;
    }

    .service-card-image img {
        transition: none;
    }

    /* Disable card hover transforms on mobile */
    .service-card-new:hover {
        transform: none;
    }

    .service-card-image img:hover {
        transform: none;
    }

    /* Fix header-actions overflow */
    .header-actions {
        margin-right: 0 !important;
    }

    /* Reduce containing for simpler layout on mobile */
    .services-grid-new {
        contain: style;
    }

    /* Avoid content-visibility on small pages */
    .tracking-tech-section {
        content-visibility: visible;
    }
}

/* --- Optimize images for high-DPI mobile screens --- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* --- Print styles for SEO (clean page output) --- */
@media print {
    .top-bar,
    .mobile-menu-toggle,
    .hero-slider,
    .hero-overlay,
    .scroll-indicator,
    .social-media,
    .header-actions,
    .dynamic-sections-wrapper,
    script,
    iframe {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }
}

/* --- Slow connection optimizations (class added by performance.js) --- */
.slow-connection .hero-slider,
.slow-connection .hero-image,
.slow-connection video,
.slow-connection iframe[src*="youtube"],
.slow-connection iframe[src*="maps"] {
    display: none !important;
}

.slow-connection .hero {
    min-height: 40vh;
    background: var(--dark-shade, #1a1a2e) !important;
}

.slow-connection img:not([loading="eager"]) {
    content-visibility: auto;
}

.slow-connection *,
.slow-connection *::before,
.slow-connection *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

.slow-connection .decorative,
.slow-connection .background-pattern,
.slow-connection .parallax-bg {
    background-image: none !important;
}