/* ==========================================================
   AIMAXIMUS — SCROLL PERFORMANCE LAYER v1.0
   GPU Compositing · Content Containment · Smooth Scroll
   ----------------------------------------------------------
   Loaded AFTER 2026-leap.css to override only perf-killing
   properties. Visual appearance is UNCHANGED.
   ========================================================== */

/* ── 1. Native Smooth Scroll ── */
html {
  scroll-behavior: smooth;
}

/* Disable smooth scroll for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ── 2. Body Noise Grain — Promote to GPU Layer ── */
/* The SVG noise overlay (body::before) was being repainted every
   frame during scroll. Making it a static composited layer stops
   that. contain:strict tells the browser this layer has NO
   dependencies on any scrolling content below it. */
body::before {
  contain: strict;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}

/* ── 3. Kill background-attachment:fixed ──
   background-attachment:fixed prevents the browser from using
   fast compositor-based scrolling. The visual effect of a subtle
   radial gradient is indistinguishable with scroll vs fixed on
   dark backgrounds, but performance jumps dramatically. */
body {
  background-attachment: scroll !important;
  animation: none !important;
}

/* ── 4. Fixed Navbar — GPU Compositing Hints ── */
.navbar-blur {
  will-change: transform, background-color;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style;
}

/* ── 5. Backdrop Filter Containment ──
   backdrop-filter is one of the MOST expensive CSS properties.
   Adding containment tells the browser not to recalculate the
   blur for content changes outside the element's bounds. */
.bento-card {
  contain: layout style paint;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
}

/* Inline backdrop-filter elements (cards with style="backdrop-filter") */
[style*="backdrop-filter"] {
  contain: layout style paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── 6. Cards — Reduce Compositing Overhead ── */
.card {
  contain: layout style paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── 7. Content Visibility — Skip Rendering Off-Screen Sections ──
   content-visibility:auto tells the browser to skip layout and
   painting for sections not currently in or near the viewport.
   contain-intrinsic-size gives a height estimate so scrollbar
   size doesn't jump. */
section {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* Don't apply to the hero/first section (it's always visible) */
header.hero,
.changelog-hero {
  content-visibility: visible;
}

/* Don't apply to manual sections — scrollspy needs accurate heights
   for getBoundingClientRect() anchor calculations */
.manual-section,
[data-bs-spy] section,
[data-bs-spy] .manual-section {
  content-visibility: visible;
}

/* ── 8. Floating Badge Animations — GPU-Accelerated ── */
.floating-badge {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint;
}

/* ── 9. Scan Line Animation — Composited Layer ── */
.scan-line {
  will-change: transform, top;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: strict;
}

/* ── 10. Back-to-Top — GPU Layer ── */
.back-to-top {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint;
}

/* ── 11. Scroll Progress Bar — GPU Layer ── */
.scroll-progress-bar {
  will-change: width;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style;
}

/* ── 12. Smart Cursor — GPU Optimization ── */
.smart-cursor-ring {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint;
}

/* ── 13. Spring Reveal Elements — Prepare for Animation ── */
.spring-reveal,
.reveal,
.reveal-left {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Remove will-change after animation completes to free GPU memory */
.spring-reveal.visible,
.reveal.visible,
.reveal-left.visible {
  will-change: auto;
}

/* ── 14. Product Showcase — Containment ── */
.product-showcase {
  contain: layout style;
}

/* ── 15. Tables — Contain within their section ── */
.table-responsive {
  contain: layout style paint;
}

/* ── 16. Footer — Content Visibility ── */
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* ── 17. Dropdown Menu — GPU Compositing for open/close ── */
.dropdown-menu {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint;
}

/* ── 18. Reduce Motion — Respect User Preference ── */
@media (prefers-reduced-motion: reduce) {
  .floating-badge,
  .scan-line,
  .spring-reveal,
  .reveal,
  .reveal-left {
    animation: none !important;
    transition: none !important;
  }

  .spring-reveal {
    opacity: 1;
    transform: none;
  }
}