/* ── grid-effect.css ── */

body {
  background: #ffffff;
}

.grid-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(14, 1fr);
}

.grid-tile {
  position: relative;
  cursor: crosshair;
  overflow: visible;
  pointer-events: auto;
}

.grid-tile::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  /* colour & shadow set per nth-child in injected <style> */
  transition: width  500ms linear,
              height 500ms linear,
              box-shadow 500ms linear;
  /* sit above the tile itself */
  z-index: 1;
  /* make sure pseudo-element doesn't block neighbouring tile hover */
  pointer-events: none;
}

.grid-tile:hover::before {
  width:  40px;
  height: 40px;
  transition: width  70ms linear,
              height 70ms linear,
              box-shadow 70ms linear;
}