/* ═══════════════════════════════════════════════════════════════
 * AXION TURBO CSS — Performance-Critical Styles
 * ═══════════════════════════════════════════════════════════════
 * These rules prevent layout thrashing, reduce paint area,
 * and enable GPU compositing for smooth animations.
 */

/* ── CSS Containment: Limit layout/paint recalculations ── */
#content-area {
  contain: layout style;
  overflow: hidden;
}

#content-area > div,
#content-area > section {
  contain: layout style paint;
}

/* ── GPU acceleration for frequently animated elements ── */
.nav-tab, .sub-tab, .menu-item {
  will-change: opacity, background-color;
  backface-visibility: hidden;
}

/* ── Reduce reflow on scroll containers ── */
[style*="overflow: auto"],
[style*="overflow:auto"],
[style*="overflow-y: auto"],
[style*="overflow-y:auto"],
.scrollable,
.panel-body,
.grid-body {
  contain: layout paint;
  -webkit-overflow-scrolling: touch;
}

/* ── Canvas optimization ── */
canvas {
  image-rendering: optimizeSpeed;
}

/* ── Reduce animation cost when tab hidden ── */
.hidden-tab * {
  animation-play-state: paused !important;
  transition: none !important;
}

/* ── Font rendering optimization ── */
body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Prevent massive SVG repaints ── */
svg {
  contain: layout paint;
  shape-rendering: optimizeSpeed;
}

/* ── Loading skeleton for instant perceived performance ── */
.axion-loading-skeleton {
  background: linear-gradient(90deg, var(--surface, #1a1a2e) 25%, rgba(255,255,255,0.05) 50%, var(--surface, #1a1a2e) 75%);
  background-size: 200% 100%;
  animation: axion-skeleton 1.5s infinite;
}

@keyframes axion-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Reduce transition cost for non-essential elements ── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}