/* Fix mobile scrolling flicker issues */

/* 1. Optimize transforms and transitions during scroll */
* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* Reduce paint operations on mobile */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* 2. Improve scrolling performance */
html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

body {
    /* Prevent scroll jank */
    overscroll-behavior: none;
}

/* 3. Fix bento-card transitions causing flicker on scroll */
.bento-card {
    /* Use will-change sparingly and only where needed */
    will-change: auto;
    /* Use GPU acceleration but prevent flicker */
    transform: translate3d(0, 0, 0);
    /* Reduce transition complexity during scroll */
    transition: all 0.5s var(--ease-smooth);
}

/* Disable hover effects on mobile to prevent flicker */
@media (pointer: coarse) and (hover: none) {
    .bento-card:hover {
        background: #14141780;
        border-color: #ffffff0f;
        box-shadow: 0 4px 24px -1px #0003;
        z-index: auto;
    }

    .bento-card:hover .spotlight {
        opacity: 0;
    }

    /* Disable scale transforms on mobile */
    .hover\:scale-105:hover,
    .hover\:scale-\[1\.02\]:hover {
        transform: none !important;
        scale: 1 !important;
    }

    .group-hover\:scale-105:is(:where(.group):hover *),
    .group-hover\:scale-110:is(:where(.group):hover *) {
        transform: none !important;
        scale: 1 !important;
    }
}

/* 4. Optimize backdrop-filter which can cause flicker */
.bento-card,
.dynamic-filter {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    /* Force layer creation for smoother rendering */
    isolation: isolate;
}

/* 5. Reduce complexity of spotlight effect on mobile */
@media (max-width: 768px) {
    .spotlight {
        display: none;
        /* Hide on mobile to prevent flicker */
    }

    /* Simplify transitions on mobile */
    .bento-card {
        transition: background 0.3s ease, border-color 0.3s ease;
    }

    .dynamic-filter {
        transition: background 0.3s ease;
    }

    /* Disable complex animations on mobile */
    .animate-\\[nebula-drift_30s_linear_infinite_alternate\\],
    .animate-\\[nebula-drift_45s_linear_infinite_alternate-reverse\\] {
        animation: none !important;
    }
}

/* 6. Fix text rendering flicker */
.text-glow,
.text-brand {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent text from jumping during scroll */
    text-rendering: optimizeLegibility;
}

/* 7. Smooth scroll containers */
[data-scroll-container],
.overflow-auto,
.overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 8. Prevent layout shift during scroll */
img,
video {
    /* Prevent images from causing reflow */
    display: block;
    max-width: 100%;
    height: auto;
}

/* 9. Optimize fixed/sticky elements */
.fixed,
.sticky {
    /* Ensure fixed elements don't cause repaint */
    will-change: transform;
    transform: translateZ(0);
}

/* 10. Reduce motion for users who prefer it */
@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;
    }
}

/* 11. Optimize scroll performance on iOS */
@supports (-webkit-touch-callout: none) {

    /* iOS-specific optimizations */
    body {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-font-smoothing: antialiased;
    }

    /* Prevent momentum scroll issues */
    * {
        -webkit-overflow-scrolling: touch;
    }
}