/* =============================================================================
   Dr. UK — 3D / WebGL Background + Interaction FX
   Layering, custom cursor, magnetic buttons, 3D card tilt, a11y fallbacks.
   ============================================================================= */

/* --- Cosmic fallback backdrop, always painted BEHIND the WebGL canvas ---
   Guarantees an intentional deep-space background when: WebGL is unavailable,
   the GPU context is lost (common on phones), or on mobile where we deliberately
   skip the costly nebula shader and let this gradient stand in for it. Without
   this the page would flash blank when the canvas clears. */
html { background-color: #030a1a; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;                 /* behind #space-bg (z-index:0) and all content */
  background:
    radial-gradient(115% 80% at 18% 12%, rgba(139, 92, 246, 0.20), transparent 60%),
    radial-gradient(110% 75% at 85% 88%, rgba(0, 212, 255, 0.16), transparent 55%),
    radial-gradient(140% 120% at 50% 40%, #07142b 0%, #040c1d 55%, #030a1a 100%);
}

/* --- Site-wide WebGL canvas, behind all content --- */
#space-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Keep real content above the 3D canvas (canvas is the only z-index:0 layer) */
#main-content { position: relative; z-index: 1; }
footer        { position: relative; z-index: 1; }

/* When WebGL takes over: let the global nebula show through the hero and
   retire the 2D fallback canvas. */
body.webgl-on .hero            { background: transparent !important; }
body.webgl-on #particles-canvas { display: none; }
/* Let the 3D cosmos show behind the flip-book panels (home). The book-stack
   JS fades the next panel in during the flip so content never double-stacks. */
body.webgl-on .book-page       { background: transparent !important; }

/* =============================================================================
   Readability over the moving 3D field
   Brighten the plain descriptive WRITING — the hero bio line, the "I build"
   tagline, section descriptions and long-form page prose — and lift each off
   the busy cosmos with a soft dark halo. Cards / badges keep their own styling.
   ============================================================================= */
body.webgl-on .hero-bio,
body.webgl-on .hero-typewriter { color: #eaf2fd; }
body.webgl-on .hero-bio a      { color: #aef0ff; }   /* links a touch brighter */
body.webgl-on .section-desc    { color: #cdd9ec; }

body.webgl-on .hero-bio,
body.webgl-on .hero-typewriter,
body.webgl-on .hero-label,
body.webgl-on .section-desc,
body.webgl-on .post-subtitle,
body.webgl-on .blog-post p,
body.webgl-on .blog-post li,
body.webgl-on .page-content p {
  text-shadow: 0 1px 10px rgba(2, 7, 18, 0.96), 0 0 4px rgba(2, 7, 18, 0.92);
}

/* =============================================================================
   Custom cursor glow (desktop / fine-pointer only)
   ============================================================================= */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, 0.6);
  background: radial-gradient(circle, rgba(0, 212, 255, 0.18), transparent 70%);
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.5), inset 0 0 8px rgba(139, 92, 246, 0.4);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity .3s ease, width .2s ease, height .2s ease,
              margin .2s ease, background .2s ease, border-color .2s ease;
  mix-blend-mode: screen;
  will-change: transform;
}
.cursor-glow.active { opacity: 1; }
.cursor-glow.hovering {
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 70%);
  border-color: rgba(139, 92, 246, 0.7);
}

/* =============================================================================
   3D tilt cards + magnetic buttons (transform driven by JS)
   ============================================================================= */
.glass-card,
.featured-card,
.post-card { transform-style: preserve-3d; will-change: transform; }

.btn-primary,
.btn-secondary,
.btn-ghost { will-change: transform; }

/* =============================================================================
   Accessibility / capability fallbacks
   ============================================================================= */
@media (hover: none), (pointer: coarse) {
  .cursor-glow { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none !important; }
  /* three-bg.js already renders a single static frame under reduced-motion */
}