/* ====================================
   PERFORMANCE OPTIMIZATION CSS
   ==================================== */

/* Force GPU acceleration for smooth animations */
.reveal,
.glass-card,
.stat-card,
.lifestyle-banner-image,
.feature-image,
.scroll-indicator {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Optimize particle animations - reduce on mobile */
@media (max-width: 768px) {
    .floating-particles {
        display: none;
        /* Hide particles on mobile to improve performance */
    }

    .particle {
        display: none;
    }
}

/* Optimize background images for performance */
.hero {
    background-attachment: scroll;
    /* Change from fixed on mobile for better performance */
}

@media (min-width: 769px) {
    .hero {
        background-attachment: fixed;
        /* Parallax only on desktop */
    }
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Reduce motion for users who prefer it (accessibility + performance) */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .particle,
    .floating-particles {
        display: none;
    }
}

/* Optimize heavy blur effects - lighter on mobile */
@media (max-width: 768px) {
    .vision-content-box {
        backdrop-filter: blur(8px);
        /* Reduced from 20px */
    }

    .stat-card {
        backdrop-filter: blur(8px);
        /* Reduced from 20px */
    }

    .glass-card {
        backdrop-filter: blur(8px);
        /* Reduced from 20px */
    }
}

/* Content visibility optimization for off-screen content */
.blog-card,
.stat-card,
.glass-card {
    content-visibility: auto;
    contain-intrinsic-size: 400px;
    /* Estimated height */
}

/* Optimize animations with transform and opacity only */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) translateZ(0);
    }

    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* Containment for isolated rendering */
.section {
    contain: layout style paint;
}

.feature-row {
    contain: layout style;
}