/* ============================================================
 * VANNYAR — Smooth Scroll & GPU Performance Layer
 * Fixes slow/janky scroll on index.php
 * ============================================================ */

/* ── 1. NATIVE SMOOTH SCROLLING & OVERFLOW CONTROL ────────────── */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 50%, #f0f9ff 100%) !important;
    background-attachment: scroll !important; /* CRITICAL: never use fixed */
    color: #0f172a !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Override blue body gradient for sidebar — uses theme variables, not hardcoded colors */
.sidebar,
#sidebar {
    background: var(--sidebar-bg, #ffffff) !important;
    color: var(--sidebar-text, #202124) !important;
}



/* Simulate the fixed-background look using a fixed pseudo-element
   on the root. This stays still without triggering repaints. */
/* REMOVED: Fixed backgrounds combined with backdrop-filter cause massive repaint lags on scroll */

/* GPU Compositing removed because nested translateZ(0) with backdrop-filters causes VRAM explosion and scroll jank */

/* ── 4. REDUCE BACKDROP-BLUR COST DURING SCROLL ─────────────── */
/* Use will-change only on elements that will animate/transform.
   Do NOT set will-change on static sections — it wastes VRAM. */
.glass-hover,
.profile-card-modern,
.recent-card-portrait,
.stat-item {
    will-change: transform;
}

/* ── 5. CLEAN UP will-change AFTER float-up ANIMATION ───────── */
/* Keeping will-change permanently on .float-up wastes GPU memory.
   Reset it after the animation completes using animation-fill-mode. */
.float-up {
    animation: float-up 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    will-change: transform, opacity;
    animation-fill-mode: both;
}

/* After animation ends, remove will-change via JS-free trick:
   Use a very long animation to auto-clear — handled by JS below */
.float-up.animation-done {
    will-change: auto;
}

/* ── 6. PASSIVE SCROLL HANDLER UPGRADE ──────────────────────── */
/* Handled in the <script> tag added to index.php's footer.
   The header.php scroll listener for header shrink MUST use
   { passive: true } to not block the browser's scroll thread. */

/* ── 7. SMOOTH SCROLL FOR ANCHOR NAV LINKS ──────────────────── */
/* Ensure any anchor clicks scroll smoothly */
a[href^="#"] {
    scroll-behavior: smooth;
}

/* ── 8. IMAGE RENDER OPTIMIZATION ───────────────────────────── */
.portrait-img,
.profile-card-modern img,
.banner-image {
    image-rendering: auto;
}

/* ── 9. REDUCE TRANSITION COST DURING SCROLL ─────────────────── */
body.is-scrolling .glass-hover,
body.is-scrolling .profile-card-modern,
body.is-scrolling .recent-card-portrait {
    pointer-events: none; /* Disable pointer events instead of transitions to save CPU */
}

/* ── 10. OPTIMIZED SCROLL INDICATOR ANIMATION ───────────────── */
/* Reduce expensive animations that run continuously */
@keyframes scrollWheel {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(8px); opacity: 0; }
}

/* ── 11. IntersectionObserver REVEAL CLASSES ─────────────────── */
.section-hidden {
    opacity: 0;
    transform: translateY(30px);
}

.section-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    will-change: auto;   /* Release GPU memory once settled */
}

/* ── 12. SCROLLBAR STYLING ───────────────────────────────────── */
/* Thin, modern scrollbar — reduces visual weight */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(224, 242, 254, 0.4);
}
::-webkit-scrollbar-thumb {
    background: rgba(27, 31, 122, 0.35);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(27, 31, 122, 0.6);
}
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(27, 31, 122, 0.35) rgba(224, 242, 254, 0.4);
}


/* ── 15. REDUCE backdrop-filter cost on mobile & desktop ─────────────────── */
/* Disable heavy backdrop-filters on large sections to drastically improve scroll performance */
.recent-members-section,
.stats-bar-premium,
.district-coverage-section,
.services-section,
.success-section,
.featured-combined-section,
.section-dark,
.section-hero-gradient,
.glass-card,
.glass-panel,
.segmented-control-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 768px) {
    /* Keep disabled on mobile */
}