/* ==========================================================================
   Ztrauen — Rebar Mesh Header Effect
   A construction-themed canvas overlay that reveals a steel rebar grid
   under the cursor. Drop this file in and apply the `.rebar-hdr` class
   to any header-like element. Your existing content stays on top.
   ========================================================================== */

/* The container the effect lives in. Your existing header styles can
   stay; this just ensures the canvas can be positioned correctly. */
.rebar-hdr {
  position: relative;
  isolation: isolate;          /* keep z-index scoped */
}

/* The canvas itself. Absolute-filled, non-interactive, behind content. */
.rebar-hdr > canvas.rebar-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;                  /* sits behind header content */
  display: block;
}

/* Make sure your header content renders above the canvas. Wrap your
   existing header contents in an element with this class, or add
   `position: relative; z-index: 1;` to your existing wrapper. */
.rebar-hdr > .rebar-content,
.rebar-hdr > .container,       /* common Bootstrap-ish wrapper */
.rebar-hdr > nav {
  position: relative;
  z-index: 1;
}