/* ═══════════════════════════════════════════════════════════════
   perf-overrides.css — load AFTER final.css (index.html already does)
   Pure performance fixes; no visual redesign.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Flow cards: animating filter:blur() on top of backdrop-filter is one of the
      most expensive things a browser can paint. Keep the slide+fade, drop the blur. */
.flow-node { will-change: opacity, transform; }
.flow-card-v.flow-node,
.flow-card-v.flow-node.fn-visible {
  filter: none;
  will-change: auto;
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}

/* 2. Phones / tablets: backdrop-filter and SVG glow filters re-rasterise on every
      scroll frame. Swap for slightly more opaque solid backgrounds. */
@media (max-width: 991px) {
  .service-card,
  .flow-card-v,
  .about-stats {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .service-card { background: rgba(255, 255, 255, 0.85); }
  .flow-card-v  { background: rgba(255, 255, 255, 0.72); }
  .about-stats  { background: rgba(255, 255, 255, 0.92); }
  .cable-glow   { display: none; }
}

/* 3. Skip layout/paint for big static sections until they near the viewport.
      (Only sections that come AFTER all scroll-pinned content, so ScrollTrigger
      positions are unaffected.) */
.sustain-outer,
.brand-partners {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* 4. Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-thumb { animation: none; }
}