/* ============================================
   PERF 2026 — content-visibility, containment, INP-friendly
   ============================================ */

/* ============== CONTENT-VISIBILITY ==============
   Skip layout/paint for sections far from viewport.
   IMPORTANT: must NOT be applied to sections with IntersectionObserver-driven
   reveals (word-stagger, .reveal, etc) — content-visibility:auto skips
   subtree rendering and prevents IO from firing reliably. */
.cases-grid,
.faq-list,
.bs-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}
.tl49-section { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* Sections with reveals/word-stagger MUST stay visible — see comment above */
.editorial,
.editorial.inertia,
.editorial.backstage,
.cta,
.section.cta,
.cta-final,
.op-radar-section,
.rev-comp-section,
.decay-section,
.number-slide,
.hero,
.nav,
.footer,
.strip { content-visibility: visible; }

/* ============== CONTAIN HINTS ==============
   Subtree containment: layout/paint cannot affect outside. */
.cases-grid > *,
.faq-item,
.bs-card,
.flow-card,
.case-figure,
.anatomy-layer,
.tl49-strip,
.persona-card,
.foundation-card,
.stat,
.decay-stat { contain: layout style paint; }

/* ============== GPU PROMOTION (cirúrgico) ==============
   Promote ONLY during animation; release after. */
.reveal:not(.in) { will-change: opacity, transform; }
.reveal.in { will-change: auto; }
.hero-title { will-change: auto; }
.cursor-glow,
.scroll-progress,
.hero-particles { will-change: transform; transform: translateZ(0); }

/* ============== MOBILE FALLBACKS ============== */
@media (max-width: 700px) {
  .hero-glow { filter: blur(60px) !important; opacity: .6 !important; }
  .orb { filter: blur(20px) !important; }
  .cursor-glow,
  .hero-particles,
  .scroll-progress { display: none !important; }
  .reveal { transition-duration: .45s !important; }
  [data-stagger-words] .word-i { transition-duration: .45s !important; }
  /* Backdrop-filter is GPU-expensive on mobile */
  .nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0,0,0,.94) !important; }
  /* Remove hover transforms on mobile (no hover, just paint cost) */
  *:hover { transform: none !important; }
}

/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-particles, .cursor-glow, .scroll-progress, .orb { display: none !important; }
  [data-stagger-words] .word-i { transform: none !important; opacity: 1 !important; }
}

/* ============== IMAGE PERF ============== */
img { content-visibility: auto; max-width: 100%; height: auto; }

/* ============== SCROLLBAR ============== */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb {
  background: #1a1a1a;
  border: 3px solid #000;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: #2a2a2a; }

/* ============== LAYER ELIMINATION ==============
   Avoid promoting too many elements to GPU layers. */
.section { contain: layout style; }

/* Avoid expensive box-shadow repaints on scroll */
@supports (overflow: clip) {
  body { overflow-x: clip; }
}

/* ============== FONT METRICS (CLS prevention) ============== */
@font-face {
  font-family: 'Inter-fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Fraunces-fallback';
  src: local('Georgia');
  size-adjust: 105%;
  ascent-override: 88%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ============== TRANSITION CAP ==============
   Force transitions to use compositor-only props. */
@media (max-width: 1024px) {
  .reveal { transition-property: opacity, transform; }
}