/* ==========================================================================
   Wijze Wolf — Paw field (canvas mount) + CSS-only fallback
   ========================================================================== */

#paw-field {
  position: fixed;
  inset: 0;
  z-index: var(--z-paws);
  pointer-events: none;
  overflow: hidden;
  contain: paint;          /* never paint paws outside the box (anti horizontal-scroll) */
  max-width: 100vw;
  color: var(--paw-color); /* JS reads computed color for canvas fill */
}
#paw-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* No-JS fallback: a faint, slowly drifting tiled paw pattern */
.paw-field-css {
  position: fixed;
  inset: 0;
  z-index: var(--z-paws);
  pointer-events: none;
  opacity: .06;
  background-image: url("../img/paw.svg");
  background-repeat: space;
  background-size: 46px 46px;
  color: var(--paw-color);
  animation: pawDrift 60s linear infinite;
}
@keyframes pawDrift {
  from { background-position: 0 0; }
  to   { background-position: 240px 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .paw-field-css { animation: none; }
}

/* The global canvas paw field sits behind opaque dark bands, so carry the motif
   through with a subtle static amber paw texture on the dark sections (the spec's
   "crescendo" toward the contact CTA). Decorative only. */
.section--dark::after,
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/paw-amber.svg");
  background-repeat: space;
  background-size: 54px 54px;
  opacity: .05;
}
.section--dark > .container,
.cta-band > .container,
.cta-band__wave { position: relative; z-index: 1; }