/* ============================================================
   CHROME BROWSER OPTIMIZATIONS
   GPU acceleration, scroll optimization, scrollbar styling,
   composite layer management, and rendering performance
   ============================================================ */

/* --- 1. GPU Layer Promotion for Animated Elements --- */
/* Promote elements to their own compositing layer to avoid repaint */
.navbar.scrolled,
.hero-bg-img,
.hero-video,
.hero-content,
.brand-wall,
.card-tilt,
.product-card,
.btn-magnetic,
.vision-bg,
.reveal,
[data-aos] {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Only apply GPU layers on devices that can handle it */
@media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 1) {
    .hero-bg-img,
    .vision-bg {
        transform: translateZ(0);
    }
}

/* --- 2. Chrome Scrollbar Styling --- */
/* Custom scrollbar for Chrome (WebKit/Blink) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #06122B;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 207, 255, 0.3);
    border-radius: 5px;
    border: 2px solid #06122B;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 207, 255, 0.5);
}

::-webkit-scrollbar-corner {
    background: #06122B;
}

/* Prevent scrollbar-induced layout shift */
html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

/* --- 3. Scroll Snap for Product Galleries --- */
.gallery-grid,
.solution-flow,
.brand-logos,
.case-cards {
    scroll-snap-type: x proximity;
}

.gallery-grid > *,
.case-cards > * {
    scroll-snap-align: start;
}

/* --- 4. Overscroll Behavior (Chrome) --- */
/* IMPORTANT: overscroll-behavior:none on <html> blocks scroll chaining.
   When the mouse is over a non-scrollable container (like .hero with overflow:clip),
   wheel events need to chain through to the viewport. Setting auto allows this.
   We keep none on specific scroll containers (.search-results, .nav-menu) only. */
html {
    overscroll-behavior-y: auto;
    overscroll-behavior-x: auto;
}

/* --- 5. Text Rendering & Font Optimization --- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    font-kerning: normal;
}

/* Headings: tighter rendering for Chrome */
h1, h2, h3, h4, h5, h6 {
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
    text-rendering: optimizeLegibility;
}

/* --- 6. Image Rendering Quality --- */
img {
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* High-DPI: use smooth rendering */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* --- 7. Containment for Rendering Isolation --- */
/* Isolate paint/layout for independent sections */
.hero,
.hero-bg,
.hero-video,
.hero-overlay {
    contain: layout paint style;
}

.section,
.footer {
    contain: layout style;
}

.navbar {
    contain: layout style;
}

/* Content visibility: skip rendering off-screen sections */
section:not([class*="hero"]):not([class*="nav"]) {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* --- 8. Stacking Context Isolation --- */
/* Create isolated stacking contexts to limit compositing */
.dropdown-menu,
.search-overlay,
.nav-menu,
.modal,
.gallery-overlay {
    isolation: isolate;
}

/* --- 9. Animation Performance --- */
/* Use only composite-friendly properties */
.reveal {
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

[data-aos] {
    transition-property: opacity, transform;
    will-change: opacity, transform;
}

/* Disable will-change after animation completes to free memory */
.reveal.revealed,
[data-aos].aos-animate {
    will-change: auto;
}

/* --- 10. Backdrop Filter Optimization --- */
.navbar.scrolled,
.search-overlay-bg,
.dropdown-menu,
.hero-badge {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Promote to own layer for filter performance */
    transform: translateZ(0);
    will-change: backdrop-filter;
}

/* --- 11. Touch & Input Optimization --- */
/* Disable touch delay on Chrome mobile */
a, button, [role="button"], .btn, .nav-link, .faq-question {
    touch-action: manipulation;
}

/* Prevent text selection on UI elements */
.btn, .nav-toggle, .nav-link, .lang-btn, .search-btn,
.brand-logo, .case-tag, .section-tag {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* --- 12. Focus Visible (Chrome) --- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Remove default outline only for mouse, keep for keyboard */
:focus:not(:focus-visible) {
    outline: none;
}

/* --- 13. Viewport Overflow Prevention --- */
/* IMPORTANT: use overflow-x:clip on <body> (not hidden).
   overflow-x:hidden makes overflow-y compute to auto, turning body into a
   scroll container. On mobile this traps touch scrolling inside body and
   can prevent the page from scrolling at all. overflow-x:clip clips without
   creating a scroll container, so overflow-y stays visible and the viewport
   remains the sole scroller.
   @supports fallback: older browsers use hidden. */
body {
    overflow-x: hidden; /* fallback for older browsers */
    max-width: 100%;
    touch-action: pan-y; /* allow vertical touch scrolling on mobile */
}
@supports (overflow: clip) {
    body {
        overflow-x: clip; /* preferred: doesn't create scroll container */
    }
}

/* --- 14. Prefers-Reduced-Motion (Chrome Accessibility) --- */
@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-bg-img,
    .hero-content,
    .hero-video,
    .vision-bg {
        transform: none !important;
    }

    .reveal,
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --- 15. Prefers-Color-Scheme Support --- */
@media (prefers-color-scheme: dark) {
    /* Ensure dark theme colors are consistent */
    html {
        color-scheme: dark;
    }
}

/* --- 16. Print Optimization (Chrome) --- */
@media print {
    ::-webkit-scrollbar {
        display: none;
    }

    html {
        scrollbar-gutter: auto;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .navbar, .nav-toggle, .search-overlay, .hero-scroll,
    .brand-wall, .case-videos, .footer-social, video,
    .btn, .section-tag, .hero-badge {
        display: none !important;
    }

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

    section {
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
    }
}

/* --- 17. Chrome Dark Scrollbar Override --- */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-track {
        background: #050B1A;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 207, 255, 0.25);
    }
}

/* --- 18. Connection Quality Awareness --- */
/* Serve reduced motion on slow connections */
@media (prefers-reduced-data: reduce) {
    video {
        preload: none !important;
    }

    img[loading="lazy"] {
        loading: lazy !important;
    }
}

/* --- 19. Hover Optimization (Chrome) --- */
/* Only apply hover effects on devices that support hover */
@media (hover: hover) and (pointer: fine) {
    .product-card:hover,
    .card-tilt:hover {
        will-change: transform;
    }

    .btn:hover {
        will-change: transform, box-shadow;
    }
}

/* Disable hover effects on touch devices to prevent stuck states */
@media (hover: none) {
    .product-card:hover,
    .card-tilt:hover,
    .btn-magnetic:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* --- 20. Selection Styling --- */
::selection {
    background: rgba(0, 207, 255, 0.3);
    color: #FFFFFF;
    text-shadow: none;
}

::-moz-selection {
    background: rgba(0, 207, 255, 0.3);
    color: #FFFFFF;
}

/* === end chrome-optimizations === */