/* Induction buttons (js/induction.js): live current around the edge.

   The button keeps its own font, padding and size; this only takes away
   its painted background and border, because the shader paints both.
   !important is load-bearing: the buttons it goes on carry id- and
   context-specific rules (#shoutbox-send, .shoutbox-input-row button)
   that would otherwise repaint the plate a flat colour over the canvas.

   isolation makes the button its own stacking context, so the canvas at
   z-index -1 sits behind the label but still in front of whatever the
   button's parent paints. */
.induction {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.5, 1) !important;
}
.induction:hover { transform: translateY(-2px); }
.induction:active { transform: translateY(1px) scale(0.99); }

.induction__gl {
  position: absolute;          /* placed and sized per button, to its arc margin */
  z-index: -1;
  display: block;
  /* reset.css caps canvases at their container's width; this one is
     meant to overhang the button by the arc margin on every side. */
  max-width: none;
  max-height: none;
  pointer-events: none;
}

.induction__label {
  position: relative;
  color: #f6e4e4;
  text-shadow: 0 0 10px rgba(200, 20, 40, 0.6), 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* No WebGL (or the context was lost): a steady red edge. */
.induction--flat {
  border-color: var(--color-red) !important;
  background: #0e0809 !important;
  box-shadow: 0 0 12px var(--color-red-glow) !important;
}

/* The 404's way home, styled as a button so it can carry the current. */
.induction-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--color-red);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .induction:hover,
  .induction:active { transform: none; }
}