/* ============================================================
   BLB 3D v3 — sitewide true-3D layer (blacklabelbots.com + blvigil.com)
   1) WebGL depth scene canvas (blb-3d.js: gold particle volume +
      wireframe floor grid + near bokeh dust, perspective + fog,
      idle camera drift; 2D fallback)
   2) Pointer-tracked 3D tilt + glare on card surfaces; the card's
      direct children lift onto their own Z plane while active,
      headings/media lift onto a deeper plane
   3) Perspective entrance for .fx-reveal sections
   Additive only — composes with blb-motion / blb-futuristic.
   ============================================================ */

.blb3d-stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.9;
}

/* --- 3D section entrances (deepens the existing .fx-reveal) --- */
html.blb3d-on .fx-reveal {
  transform: perspective(1100px) rotateX(9deg) translateY(44px)
             translateZ(-60px) scale(0.975);
  transform-origin: 50% 100%;
}
html.blb3d-on .fx-reveal.fx-revealed {
  transform: perspective(1100px) rotateX(0deg) translateY(0)
             translateZ(0) scale(1);
}

/* --- tilt surfaces (blb-3d.js tags cards + drives the vars) --- */
.blb3d-tilt {
  transform: perspective(950px)
             rotateX(var(--blb3d-rx, 0deg))
             rotateY(var(--blb3d-ry, 0deg))
             translateZ(var(--blb3d-z, 0px));
  transform-style: preserve-3d;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease;
  position: relative;
}
.blb3d-tilt.blb3d-active {
  transition: transform 0.06s linear, box-shadow 0.35s ease;
  box-shadow: 0 32px 74px -26px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(201, 169, 97, 0.25),
              0 22px 52px -20px rgba(201, 169, 97, 0.18);
  z-index: 2;
}

/* direct children lift onto their own Z plane while the card is
   tilted — :where() keeps specificity at zero so site CSS wins any
   conflict; the glare span stays flat on the surface */
.blb3d-tilt > :where(:not(.blb3d-glare)) {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.blb3d-tilt.blb3d-active > :where(:not(.blb3d-glare)) {
  transform: translateZ(16px);
}
/* headings and media pop onto a deeper plane than body copy —
   same zero specificity, later in file so it wins the base lift */
.blb3d-tilt.blb3d-active > :where(h1, h2, h3, h4, img, svg, figure, video, picture) {
  transform: translateZ(30px);
}

/* glare highlight that follows the pointer (own node, so card
   ::before/::after styling is never clobbered) */
.blb3d-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    420px circle at var(--blb3d-gx, 50%) var(--blb3d-gy, 50%),
    rgba(212, 197, 160, 0.14),
    rgba(201, 169, 97, 0.055) 40%,
    transparent 65%
  );
}
.blb3d-tilt.blb3d-active .blb3d-glare { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.blb3d-on .fx-reveal,
  html.blb3d-on .fx-reveal.fx-revealed { transform: none; }
  .blb3d-tilt { transform: none !important; }
  .blb3d-tilt.blb3d-active > :where(:not(.blb3d-glare)) { transform: none; }
  .blb3d-stars { display: none; }
}