/*
 * Kouider — Hero cursor field layer
 * Full-bleed canvas behind the hero content (the hero is a full-width block with
 * global padding, so the layer is viewport-wide and re-centred, matching the
 * theme's own full-bleed technique). Blends with the hero photo via `screen`
 * so the dots glow instead of sitting on top as grey noise.
 */

.k-hero {
  position: relative;
  isolation: isolate;
}

.k-hero > .k-hero-cursor-field {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  /* WP 7.1 injects `.is-layout-constrained > :where(...) { max-width: content-size }`
     inline after the theme sheet, so the full-bleed width needs !important. */
  width: 100vw !important;
  max-width: none !important;
  height: 100%;
  transform: translateX(-50%);
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: .95;
  mix-blend-mode: screen;
  /* Fade only at the very edges so the grid visibly spans the whole section. */
  -webkit-mask-image: radial-gradient(150% 135% at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(150% 135% at 50% 50%, #000 78%, transparent 100%);
}

/* Everything else in the hero stays above the field. */
.k-hero > .k-hero-content {
  position: relative;
  z-index: 1;
}

@media (max-width: 781px) {
  .k-hero > .k-hero-cursor-field {
    opacity: .7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .k-hero > .k-hero-cursor-field {
    opacity: .6;
  }
}