/* ============================================================
   Blockpulse — Hero Cells Grid (Swiss Precision)
   Interactive grid that flashes brand-colored cells on hover.
   Companion JS: assets/js/hero-cells.js
   Wrap your hero in a positioned container, then add:
     <div class="hero-cells" aria-hidden="true"></div>
   The container needs position: relative so the cells absolutely fill it.
   ============================================================ */

.hero-cells {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  grid-auto-rows: 80px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
}
.hero-cell {
  position: relative;
  pointer-events: auto;
  border-right: 1px solid var(--line, #EAECF0);
  border-bottom: 1px solid var(--line, #EAECF0);
}
.hero-cell::before {
  content: "";
  position: absolute; inset: 0;
  background-color: var(--cell-color, transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.hero-cell.lit::before {
  opacity: 1;
  transition-duration: 0s;
}
.hero-cell .plus {
  position: absolute;
  top: -7px; left: -7px;
  width: 14px; height: 14px;
  color: var(--line-bright, #D0D5DD);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}