/* Smooth Scroll and Background Optimization */

/* Enable smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Optimize background image loading */
.hero-background,
.glass-circle,
.section-background,
.all-wrapper,
.starkly-ai-spotlight,
.modern-hero-section {
    will-change: transform; /* Hardware acceleration */
    transform: translateZ(0); /* Force GPU rendering */
    backface-visibility: hidden; /* Reduce flickering */
}

/* Improve rendering of background images */
.glass-circle {
    transform: translateZ(0);
    transition: background-color 0.3s ease;
}

/* Preload critical background elements */
.hero-background,
.glass-circle.main-circle-1,
.glass-circle.main-circle-2,
.glass-circle.main-circle-3 {
    background-attachment: fixed;
    background-size: cover;
    transition: opacity 0.3s ease;
}

/* Optimize for fast scrolling */
@media screen and (min-width: 768px) {
    .all-wrapper {
        perspective: 1000px;
        transform-style: preserve-3d;
    }
    
    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }
        
        .hero-background,
        .glass-circle,
        .section-background {
            transition: none;
        }
    }
}

/* Ensure background colors load immediately */
.circle-purple {
    background-color: rgba(149, 76, 233, 0.2) !important;
}

.circle-blue {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

/* Improve performance during scroll */
body {
    overflow-x: hidden;
}

/* Ensure smooth scrolling works on all browsers */
@supports not (scroll-behavior: smooth) {
    html, body {
        scroll-behavior: auto;
    }
}