/* =====================================================
   PCB BACKGROUND — layers + readability veil
   High-performance: no backdrop-filter, no mask-image
   on animated layers.
   ===================================================== */

#pcb-canvas,
#pcb-veil {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#pcb-canvas { z-index: -2; opacity: 0.60; overflow: hidden; contain: strict; }
[data-theme="light"] #pcb-canvas { opacity: 0.50; }

#pcb-canvas .pcb-base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#pcb-canvas .pcb-layer { position: absolute; inset: 0; overflow: hidden; }
#pcb-canvas .pcb-layer canvas {
  position: absolute; top: 0; left: 0; display: block;
  will-change: transform;
  backface-visibility: hidden;
}

/* Wide, dark reading column; board only fully visible at the far edges */
#pcb-veil {
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 120% at 50% 50%, rgba(4, 6, 12, 0.88) 0%, rgba(4, 6, 12, 0.78) 50%, rgba(4, 6, 12, 0.35) 85%, rgba(4, 6, 12, 0.1) 100%);
}
[data-theme="light"] #pcb-veil {
  background:
    radial-gradient(ellipse 80% 120% at 50% 50%, rgba(248, 250, 255, 0.9) 0%, rgba(248, 250, 255, 0.8) 50%, rgba(248, 250, 255, 0.4) 85%, rgba(248, 250, 255, 0.12) 100%);
}

/* Let the board show through the page sections */
html:not([data-theme="light"]) body { background-color: #04060c; }
#hero, #about, #skills, #projects, #experience, #references, #contact { background: transparent; }
html:not([data-theme="light"]) #footer { background: rgba(7, 11, 20, 0.92); }
[data-theme="light"] #footer { background: rgba(238, 242, 251, 0.94); }
.hero-bg-grid { display: none; }

/* ── Performance mode: kill GPU-heavy backdrop-filters and heavy blurs ── */
#navbar,
.nav-mobile {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(7, 11, 20, 0.95);
}
[data-theme="light"] #navbar,
[data-theme="light"] .nav-mobile { background: rgba(248, 250, 255, 0.96); }
.hero-chip { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.btn-secondary { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.hero-orb { filter: none !important; animation: none !important; display: none; }

/* ════════════════════════════════════════════════════
   MOBILE ZERO-ANIMATION ULTRA-PERFORMANCE MODE (<= 768px)
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Turn off all continuous background & element animations on mobile */
  *, *::before, *::after {
    animation: none !important;
    animation-delay: 0s !important;
  }

  /* Make sure reveal elements are immediately visible without laggy scroll observers */
  .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
  }

  /* Disable dynamic tall canvas layers on mobile - zero memory, zero scroll computation */
  #pcb-canvas .pcb-layer {
    display: none !important;
  }

  /* Subtle static base only */
  #pcb-canvas {
    opacity: 0.35;
  }

  #pcb-veil {
    background: rgba(4, 6, 12, 0.85);
  }
  [data-theme="light"] #pcb-veil {
    background: rgba(248, 250, 255, 0.88);
  }

  .hero-chip, .profile-ring::before {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
}