/* ==========================================================================
   Venom Button — the Tailwind classes from the Nexus UI component, written
   out as CSS. The component's own stage (a 420px panel with its own pale
   background, button centred) is replaced by the hero: the goo needs room
   to reach, and a second panel would have broken the hero's alignment to
   the board. So the hero is the stage, the canvases cover it, and the
   button stays exactly where build-spec puts it.
   ========================================================================== */

.venom-gl,
.venom-fx,
.venom-hand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* the page underneath stays usable */
}

.venom-gl { z-index: 10; }
.venom-fx { z-index: 25; }
.venom-hand { z-index: 30; }

.venom-btn {
  position: relative;
  z-index: 20;
  cursor: pointer;
  /* framer-motion's whileTap={{ scale: 0.96 }} with a stiff spring */
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.venom-btn:active { transform: scale(0.96); }

/* While the glove is drawn, the system pointer is hidden — but only inside
   the hero, never across the rest of the page. */
.hero.is-gloved,
.hero.is-gloved .venom-btn { cursor: none; }

/* The shader draws the pill itself, so the CSS gloss is dropped once it is
   confirmed running. Until then, and whenever WebGL is unavailable, the
   button keeps the glossy pill from build-spec §3. */
.hero.is-live .venom-btn {
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 0 rgba(0,0,0,.75), 0 -0.5px 0 rgba(255,255,255,.25);
}

.hero.is-live .venom-btn:hover { transform: none; box-shadow: none; }
.hero.is-live .venom-btn:active { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
  .venom-btn { transition: none; }
  .venom-btn:active { transform: none; }
}