/* Performance layer: loaded last. Keeps the same look, costs the GPU/CPU less. */

/* 1. Header: blur on a fixed bar is re-painted on every scroll frame. Use a nearly solid background instead. */
#navbar,#navbar.scrolled{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:rgba(255,255,255,.96);
}
.award-card,#projects .project-img-tag,#projects .project-img *,.mobile-menu{-webkit-backdrop-filter:none;backdrop-filter:none}
.mobile-menu{background:rgba(255,255,255,.99)}

/* 2. Animations pause when their section is off-screen (class set by js/perf.js) */
.perf-paused,.perf-paused *,.perf-paused *::before,.perf-paused *::after{animation-play-state:paused!important}

/* 3. Lite mode (older / low-power computers): drop decorative endless animations, keep the page content */
html.lite .hero-glow-a,html.lite .hero-glow-b,html.lite .hero-circuit,html.lite .stage-idle,
html.lite .stage-idle *,html.lite .iso-scene,html.lite .exp-strip *,html.lite .badge-icon,
html.lite .badge-icon::after,html.lite .seal-ring,html.lite .hp-ring,html.lite .hp-spark,
html.lite [class*="sweep"],html.lite .stat-num span:last-child{animation:none!important}
html.lite .reveal,html.lite .reveal-left,html.lite .reveal-right{transition-duration:.35s}

/* 4. Skip painting sections that are far below the screen until the visitor gets near them */
#services,#solutions,#projects,#why,.site-footer{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* 5. Tell the browser which things will move so it prepares them once */
.reveal,.reveal-left,.reveal-right{will-change:opacity,transform}
.reveal.visible,.reveal-left.visible,.reveal-right.visible{will-change:auto}