/* ============================================
   PERFORMANCE OVERRIDES
   Add this AFTER smooth.css in all HTML files
   ============================================ */

/* --- Optimize font loading --- */
@font-face {
    font-display: swap; /* Prevents invisible text during font load */
}

/* --- GPU acceleration for animated elements --- */
.reveal,
.hero__content,
.hero__video-wrap,
.product-card,
.nav {
    will-change: transform, opacity;
}

/* --- After animation completes, remove will-change --- */
.reveal.visible {
    will-change: auto;
}

/* --- Mobile video optimization --- */
@media (max-width: 768px) {
    /* Hide videos on mobile — use poster image instead */
    .hero__video,
    .products-hero__video,
    .proj-hero__video,
    .proj-focus__video {
        display: none;
    }

    /* Show poster image as background */
    .hero__video-wrap,
    .products-hero__video-wrap,
    .proj-hero__video-wrap {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .hero__video-wrap {
        background-image: url('../images/hero-farmland.jpg');
    }

    .products-hero__video-wrap {
        background-image: url('../images/tech-radar.jpg');
    }

    .proj-hero__video-wrap {
        background-image: url('../images/hero-farmland.jpg');
    }

    /* Reduce section padding on mobile */
    .section {
        padding: 60px 0;
    }

    /* Smaller hero on mobile */
    .hero {
        min-height: 500px;
    }
}

/* --- Reduce motion for users who prefer it --- */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .hero__label,
    .hero__title,
    .hero__desc,
    .hero__actions,
    .hero__scroll,
    .products-hero__title,
    .products-hero__desc,
    .proj-hero__title,
    .proj-hero__desc,
    .about-hero__title,
    .about-hero__desc,
    .contact-hero__title,
    .contact-hero__desc {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero__scroll-line {
        animation: none;
    }

    .mockup__map::before,
    .mockup-large__map-pin {
        animation: none;
    }
}

/* --- Image rendering optimization --- */
img {
    content-visibility: auto;
}

/* --- Smooth scrollbar (Webkit browsers) --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}