/* =========================================================
   ThatDevPro visual upgrade. Additive, sitewide. All effects
   are gated by visual-upgrade.js (rich-mode only). On mobile,
   reduced-motion, or slow networks nothing here activates and
   no GPU/CPU is spent. Existing styles, fonts, and the Next.js
   hydration tree are untouched.
   ========================================================= */

/* WebGL showpiece canvas (created and positioned by JS). Sits
   inside the hero section, behind the headline, above the
   pre-existing blueprint background. */
.tdp-vu-canvas{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  display:block;
  opacity:0;
  transition:opacity 1.4s ease;
}
.tdp-vu-canvas.is-ready{ opacity:1; }

/* When the upgrade is live, retire the static blueprint grid so
   the iridescent surface dominates. The grid stays in markup for
   lite/mobile users where they get the original look. */
html.tdp-vu-active section[aria-labelledby="hero-h1"] .bg-blueprint.bg-grid-lg,
html.tdp-vu-active section[aria-labelledby="hero-h1"] [class*="animate-grid-pulse"]{
  display:none;
}

/* Cursor spotlight. A soft halo of brass-gold light that follows
   the pointer in screen blend, lifting the dark studio palette. */
.tdp-vu-spotlight{
  position:fixed;
  top:0; left:0;
  width:520px; height:520px;
  margin:-260px 0 0 -260px;
  pointer-events:none;
  z-index:9998;
  border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(205,169,104,0.22) 0%,
    rgba(205,169,104,0.08) 28%,
    rgba(16,100,124,0.06)  44%,
    rgba(205,169,104,0)    62%);
  mix-blend-mode:screen;
  transform:translate3d(-9999px,-9999px,0);
  will-change:transform;
  opacity:0;
  transition:opacity 0.35s ease;
}
html.tdp-vu-spot-on .tdp-vu-spotlight{ opacity:1; }

/* 3D card tilt baseline. Elements opted in (or auto-detected by
   the JS) get perspective on hover with a subtle gold rim glow. */
.tdp-vu-tilt{
  transform-style:preserve-3d;
  transition:transform 240ms cubic-bezier(.2,.6,.2,1),
             box-shadow 240ms ease,
             border-color 240ms ease;
  will-change:transform;
}
.tdp-vu-tilt:hover{
  box-shadow:
    0 30px 60px -22px rgba(0,0,0,0.55),
    0 0 26px -8px rgba(205,169,104,0.30);
}

/* Belt and suspenders: even if the JS ever forgets to gate,
   reduced-motion users see none of this. */
@media (prefers-reduced-motion: reduce){
  .tdp-vu-canvas,
  .tdp-vu-spotlight,
  .tdp-vu-tilt{ display:none !important; transform:none !important; }
}