/* =============================================
   SCROLL PERFORMANCE OPTIMIZATIONS
   ============================================= */

/* --- Global --- */
html {
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
}

body {
    overscroll-behavior-y: none;
}

/* --- GPU Acceleration (animated elements only) --- */
.logo-track,
.testi-scroll-track {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.product-card,
.product-card-link,
.product-card-image,
.product-card-image img,
.carousel-track {
    will-change: auto !important;
    transform: none !important;
    backface-visibility: visible;
}

/* --- Section Containment --- */
.section,
.client-testimonial-section,
.why-choose-section,
.machine-gallery-section,
.category-bar--fullbleed,
.section-split-layout {
    contain: layout style;
    content-visibility: visible;
}

.section-highlight {
    contain: layout;
}

.section-highlight .product-card-image,
.section-highlight .carousel-track .product-card-image {
    background: #f8f9fa;
}

.section-highlight .product-card-image img,
.section-highlight .carousel-track img {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
}

.carousel-viewport {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.carousel-viewport::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* --- Disable Backdrop-filter --- */
.hero-carousel-dots,
.navbar-sticky.scrolled,
.product-badge,
.fab-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hero-carousel-dots {
    background: rgba(0, 0, 0, 0.55) !important;
}

/* Mobile: subtle dot container (overridden by hero-3banner.css for same breakpoint) */
@media (max-width: 768px) {
    .hero-carousel-dots {
        background: rgba(255, 255, 255, 0.2) !important;
    }
}

.navbar-sticky.scrolled {
    background-color: rgba(255, 255, 255, 0.97) !important;
}

/* --- Pause Animations During Scroll --- */
.is-scrolling .logo-track,
.is-scrolling .promo-wrapper,
.is-scrolling .testi-scroll-track {
    animation-play-state: paused !important;
}

.is-scrolling .floating-wa,
.is-scrolling .fab-nav-toggle {
    animation-play-state: paused !important;
}

.is-scrolling .hero-carousel-dot.active::before {
    animation: none !important;
}

.carousel-paused .promo-wrapper,
.carousel-paused .carousel-track,
.carousel-paused .hero-carousel-wrapper {
    animation-play-state: paused !important;
    transition: none !important;
}

/* --- Pause When Off-Viewport --- */
.logo-loop.animation-paused .logo-track {
    animation-play-state: paused !important;
}

.testi-scroll-wrapper.animation-paused .testi-scroll-track {
    animation-play-state: paused !important;
}

/* --- Banner & Grid Containment --- */
.section-split-layout {
    contain: layout style paint;
}

.section-banner-card {
    contain: layout style paint;
    backface-visibility: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.section-banner-card::after {
    display: none !important;
}

.section-product-grid {
    contain: layout style;
}

.section-banner-card[style*="background-image"] {
    transform: translate3d(0, 0, 0);
    isolation: isolate;
}

.hero-banner {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}

/* --- Disable Effects During Scroll --- */
.is-scrolling .product-card,
.is-scrolling .product-card-link,
.is-scrolling .section-banner-card,
.is-scrolling .section-featured-product,
.is-scrolling .hero-banner,
.is-scrolling .testi-card,
.is-scrolling .logo-item,
.is-scrolling .section-split-layout {
    box-shadow: none !important;
    transition: none !important;
}

.is-scrolling .product-card:hover,
.is-scrolling .product-card-link:hover,
.is-scrolling .section-featured-product:hover,
.is-scrolling .hero-banner:hover,
.is-scrolling .mp-banner-card:hover,
.is-scrolling .testi-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.is-scrolling .section-product-grid .product-card:not([data-reveal]) {
    transition: none !important;
    transition-delay: 0ms !important;
}

.is-scrolling .product-card-image img,
.is-scrolling .product-card:hover .product-card-image img {
    transform: none !important;
    transition: none !important;
}

.is-scrolling .section-banner-card::after {
    opacity: 0 !important;
}

.is-scrolling img {
    transition: none !important;
}

.is-scrolling .product-card.out-of-stock .product-card-image img {
    filter: none !important;
}

.is-scrolling [class*="blur"],
.is-scrolling [class*="grayscale"] {
    filter: none !important;
}

/* --- Image Containers --- */
.product-card-image {
    aspect-ratio: 4 / 3;
    contain: layout style paint;
    background: transparent;
}

.product-card-image img {
    aspect-ratio: 4 / 3;
    opacity: 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@keyframes smoothImageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.featured-product-image {
    contain: layout style paint;
    background: transparent;
}

.featured-product-image img {
    opacity: 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

img {
    opacity: 1 !important;
}

.carousel-track .product-card-link,
.grid-4 .product-card,
.product-grid .product-card {
    contain: layout style;
}

.section-banner-card {
    content-visibility: auto;
    contain-intrinsic-size: 100% 400px;
}

.logo-loop {
    content-visibility: auto;
    contain-intrinsic-size: 100% 100px;
}

/* --- Layout Containment --- */
.section,
.section-split-layout,
.client-testimonial-section {
    contain: layout style;
}

.logo-loop-wrapper {
    contain: layout style;
}

/* --- Transitions --- */
.product-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.section-featured-product {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .logo-track,
    .promo-wrapper,
    .hero-carousel-dot.active::before,
    .floating-wa,
    .fab-nav-toggle {
        animation: none !important;
    }
}

/* --- Hover States --- */
.hero-banner:hover {
    transform: translateY(-4px) translateZ(0);
}

.section-featured-product:hover {
    transform: translateY(-5px) translateZ(0);
}

.mp-banner-card:hover {
    transform: translateY(-5px) translateZ(0);
}

/* --- Visibility Hints --- */
.section[data-visible="false"] .logo-track,
.section-hidden .logo-track {
    animation-play-state: paused;
}

.section[data-visible="false"] .carousel-track,
.section-hidden .carousel-track {
    animation-play-state: paused;
}

.section-hidden {
    content-visibility: hidden;
    contain-intrinsic-size: 0 500px;
}

/* --- Lazy Images --- */
img[loading="lazy"] {
    content-visibility: auto;
}

.product-card-image img,
.hero-slide img,
.logo-item img {
    background: transparent;
}

.hero-slide img,
.section-banner-card img {
    opacity: 1;
}

/* --- Revealed State --- */
.is-revealed:not([data-reveal]),
.is-revealed *:not([data-reveal]):not(.logo-track):not(.testi-scroll-track),
.is-visible:not([data-reveal]),
.is-visible *:not([data-reveal]):not(.logo-track):not(.testi-scroll-track),
.reveal-done:not([data-reveal]),
.reveal-done *:not([data-reveal]):not(.logo-track):not(.testi-scroll-track) {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transition: none !important;
}

.is-revealed .product-card,
.is-revealed .store-card,
.is-revealed .gallery-item,
.is-revealed a,
.is-revealed button {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.section-product-grid.is-visible .product-card,
.section-product-grid.reveal-done .product-card,
.section-product-grid.is-revealed .product-card {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

/* --- Animation Duration --- */
.floating-wa {
    animation-duration: 3s !important;
}

.hero-carousel-dot.active::before {
    animation-duration: 3s !important;
}

/* --- Mobile Optimizations --- */
@media (max-width: 768px) {
    .product-card:hover,
    .product-card-link:hover,
    .mp-banner-card:hover,
    .hero-banner:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }

    .product-card,
    .section-banner-card,
    .hero-banner {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    }

    .product-card-image img {
        transform: none !important;
        max-width: 100%;
        height: auto;
    }

    img {
        opacity: 1 !important;
        transition: none !important;
    }
}

/* --- Transition Overrides --- */
.hero-banner,
.hero-banner-large,
.hero-banner-small {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.hero-carousel-dot {
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease !important;
}

.hero-carousel-btn {
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.product-card:not([data-reveal]),
.product-card-link:not([data-reveal]),
.mp-product-card:not([data-reveal]) {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out !important;
}

.nav-search-input,
.search-input {
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.nav-item,
.nav-link,
.fab-link {
    transition: color 0.2s ease !important;
}

.gallery-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.store-card {
    transition: box-shadow 0.3s ease !important;
}

/* --- GPU Compositing --- */
.hero-carousel-dot::before,
.floating-wa,
.fab-nav-toggle {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* --- Force Image Visibility --- */
html body img,
html body main img,
html body section img,
html body .section img,
html body .container img {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    background: transparent !important;
    content-visibility: visible !important;
}

html body .product-card-image,
html body .product-card-image img,
html body .section-highlight .product-card-image,
html body .section-highlight .product-card-image img,
html body .carousel-track .product-card-image,
html body .carousel-track .product-card-image img,
html body .section-product-grid .product-card-image,
html body .section-product-grid .product-card-image img {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transition: none !important;
    background: transparent !important;
}

html body .hero-slide img,
html body .hero-carousel-wrapper img,
html body .hero-section-3banner img {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}

html body .promo-slide img,
html body .promo-carousel img {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}

html body .logo-item img,
html body .logo-track img {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}

html body .gallery-item img,
html body .machine-gallery-section img {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}

html body .category-icon img,
html body .service-icon-img {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}

html body .post-image img,
html body .related-card img {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}

.product-card-image img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: auto;
}

@media (hover: hover) {
    .product-card:hover .product-card-image img {
        transform: scale(1.03);
        transition: transform 0.3s ease-out !important;
    }
}

/* --- Prevent Image Re-render --- */
.product-card-image,
.hero-slide,
.promo-slide,
.logo-item,
.gallery-item,
.post-image {
    contain: layout style;
    content-visibility: visible !important;
    backface-visibility: hidden;
}

/* --- Logo Loop Animation --- */
.logo-loop {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.logo-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.logo-loop:not(.reverse) .logo-track {
    animation: logoSlideRight 30s linear infinite;
}

.logo-loop.reverse .logo-track {
    animation: logoSlideLeft 30s linear infinite;
}

@keyframes logoSlideRight {
    from { transform: translate3d(-50%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes logoSlideLeft {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* --- Testimonial Scroll Animation --- */
.testi-scroll-wrapper {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

.testi-scroll-track {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation: testiScrollUp 25s linear infinite;
}

@keyframes testiScrollUp {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, -50%, 0); }
}

/* --- Pause on Hover --- */
.logo-loop:hover .logo-track,
.testi-scroll-wrapper:hover .testi-scroll-track {
    animation-play-state: paused;
}