/* =====================================================================
   Mido Hasan — CSS RENDERING DEBUG + STABILITY (Phase 10.2.3)
   /assets/css/00__debug-rendering.css

   PART A: Debug toggle overrides — only active under debug class on html.
            These let you isolate CSS categories causing rendering issues.
            Apply via URL: ?motiondebug=1&noFilters=1 etc.

   PART B: Surgical stability fixes applied permanently.
            These address the compositing repaint root causes identified
            in Phase 10.2.3 audit without removing the design language.
   ===================================================================== */


/* =====================================================================
   PART A — CSS DEBUG TOGGLES
   Each toggle neutralizes one category of risky CSS for testing.
   ===================================================================== */

/* --- noFilters: disable filter effects (blur, saturate, brightness etc.) --- */
.cbm-no-filters *,
.cbm-no-filters *::before,
.cbm-no-filters *::after {
  filter: none !important;
  -webkit-filter: none !important;
}

/* --- noMasks: disable mask-image effects --- */
.cbm-no-masks *,
.cbm-no-masks *::before,
.cbm-no-masks *::after {
  mask-image: none !important;
  -webkit-mask-image: none !important;
  mask: none !important;
}

/* --- noBackdrop: disable backdrop-filter (glass cards etc.) --- */
.cbm-no-backdrop *,
.cbm-no-backdrop *::before,
.cbm-no-backdrop *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- noWillChange: remove all will-change hints --- */
.cbm-no-will-change *,
.cbm-no-will-change *::before,
.cbm-no-will-change *::after {
  will-change: auto !important;
}

/* --- noTransforms: remove non-essential transforms (not layout-critical ones) --- */
/* Only neutralizes transforms on decorative/animated elements, not nav/layout */
.cbm-no-transforms .cbm-perspective-reveal__word,
.cbm-no-transforms [data-reveal],
.cbm-no-transforms .cbm-logo-mark,
.cbm-no-transforms .cbm-who-card--mreveal,
.cbm-no-transforms .cbm-project-gallery__item,
.cbm-no-transforms .cbm-work-tile:hover {
  transform: none !important;
}

/* --- noCssAnimations: kill all CSS @keyframes animations and transitions --- */
.cbm-no-css-animations *,
.cbm-no-css-animations *::before,
.cbm-no-css-animations *::after {
  animation: none !important;
  transition: none !important;
}

/* --- noSticky: convert sticky elements to relative for testing --- */
/* Only applied to content sections, NOT nav (nav must stay fixed) */
.cbm-no-sticky .cbm-who-scroll__pin {
  position: relative !important;
  top: auto !important;
  height: auto !important;
}

/* --- noDecor: hide heavy decorative pseudo-elements, orbs, glows --- */
/* This specifically targets the fixed body/html pseudo-elements that cause repaints */
.cbm-no-decor html::before,
.cbm-no-decor body::before,
.cbm-no-decor body::after {
  display: none !important;
}
.cbm-no-decor .cbm-perspective-reveal__glow,
.cbm-no-decor .cbm-who-scroll__orb,
.cbm-no-decor .cbm-client-glow {
  display: none !important;
}


/* =====================================================================
   PART B — SURGICAL STABILITY FIXES (always applied)

   ROOT CAUSE: body::before and body::after are position:fixed pseudo-
   elements. body::after has mask-image applied. html::before is also
   position:fixed with a tiled SVG background.

   Fixed pseudo-elements with mask-image force browser to recreate
   compositing layers on every viewport change (zoom, resize, scroll).
   This triggers a full repaint pass across ALL composited content above.

   Fix: Convert from position:fixed to position:absolute on body pseudos.
   The visual result is identical (they cover the viewport at page load),
   but absolute positioning does NOT force layer recreation on zoom/resize.

   EXCEPTION: html::before (grain) must remain fixed for consistent
   coverage — but we can reduce its compositing cost by removing
   mix-blend-mode (the main compositing trigger) and lowering opacity.
   ===================================================================== */

/* Phase 10.2.3 SURGICAL FIX 1:
   body::before and body::after — change position:fixed → position:absolute.
   These are z-index:-2/-1 decorative backgrounds. Converting to absolute
   means the browser does not need to repaint them on every zoom/resize.
   Visual appearance is identical for a full-page decorative layer. */
body::before,
body::after {
  position: absolute !important;
}

/* Phase 10.2.3 SURGICAL FIX 2:
   html::before grain texture — keep fixed for full coverage, but remove
   mix-blend-mode:overlay which forces a compositing layer on the html
   element. Replace with a transparent background approach.
   The grain remains visible but at reduced compositing cost. */
html::before {
  mix-blend-mode: normal !important;
  opacity: 0.025 !important; /* slightly lower opacity compensates for no blend */
}

/* Phase 10.2.3 SURGICAL FIX 3:
   html { isolation: isolate } creates a stacking context on the root.
   Combined with fixed pseudo-elements, this causes the entire page to
   be treated as one compositing layer. Remove isolation from html. */
html {
  isolation: auto !important;
}

/* Phase 10.2.3 SURGICAL FIX 4:
   .cbm-logo-mark will-change: transform, opacity, filter
   The 'filter' hint is expensive — logos have filter:blur in their
   reveal animation (which is now gated on js-enabled) but after reveal
   will-change:filter has no purpose. Reduce to transform only.
   The animation still works; we just stop hinting the browser to keep
   a filter compositor layer permanently reserved for each logo. */
.cbm-logo-item.is-visible .cbm-logo-mark {
  will-change: auto;
}

/* Phase 10.2.3 SURGICAL FIX 5:
   07__how-i-think animated mesh background uses filter:saturate+brightness
   inside a @keyframes animation. Animated filters on a large element are
   expensive. Remove the filter from the animation — the mesh still moves,
   just without animated saturation/brightness changes. */
@keyframes cbmMeshMove {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 18%; }
  50%  { background-position: 80% 100%; }
  75%  { background-position: 10% 80%; }
  100% { background-position: 0% 0%; }
}
@keyframes cbmTasteMeshMove {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 18%; }
  50%  { background-position: 80% 100%; }
  75%  { background-position: 10% 80%; }
  100% { background-position: 0% 0%; }
}