/* ==========================================================================
   scroll-perf.css — Apple-level scroll performance layer
   GPU compositing, paint containment, and render-ahead optimizations.
   No visual changes — only performance.
   ========================================================================== */

/* Promote the entire page to a compositor layer for smooth 60-120fps scrolling */
html {
    -webkit-font-smoothing: subpixel-antialiased;
}

body {
    text-rendering: optimizeSpeed;
}

/* Eagerly decode images so fast scrolling never reveals blank placeholders */
img[loading="lazy"] {
    decoding: async;
}

/* Sections with heavy content: contain paint to prevent cross-section repaints */
#free-books,
#browse-courses,
#college-essentials,
#academy-x,
#study-material,
#how-it-works,
#gamification,
#safety,
#join,
#about-us {
    contain: layout style paint;
}

/* Cards, grids, and repeated heavy elements: isolate their paint */
.course-card,
.ai-course-card-apple,
.step-box-apple,
.nb-panel,
.nb-pass,
.nb-phone,
.nxh-card {
    contain: layout style;
    transform: translateZ(0);
}

/* Backdrop-filter elements are expensive during scroll — isolate them */
.mobile-nav-container,
.nex-request-btn,
#trading-simplified-card {
    contain: layout style;
    isolation: isolate;
}

/* Ticker animation: run entirely on compositor */
.nb-ticker__track {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Scroll-snap containers: ensure momentum is native */
[style*="scroll-snap"],
.no-scrollbar {
    -webkit-overflow-scrolling: touch;
}

/* Reduce paint complexity on decorative pseudo-elements during scroll */
section.bg-gray-50::before,
section.bg-white::before {
    contain: strict;
}

/* Modal backdrop: don't repaint during page scroll underneath */
.modal-backdrop {
    contain: strict;
}

/* Grid containers: prevent layout thrashing when cards appear/hide */
.grid {
    contain: layout style;
}

/* Prevent expensive resize observers from firing during scroll */
.expandable-content-wrapper,
.expandable-grid-wrapper {
    contain: layout style;
}