/* Sparse, fading fragments with deliberately unequal rectangular cells. */
body {
  --dc-grid-width: 1800px;
  --dc-grid-height: 2400px;
  --dc-grid-shift-x: 0px;
  --dc-grid-shift-y: 60px;
}

body.page-loaded::before {
  background-color: #fff;
  background-image: url("../assets/images/grid-fragments.svg?v=20261020-2");
  background-repeat: repeat-y;
  background-size: var(--dc-grid-width) var(--dc-grid-height);
  background-position: calc(50% + var(--dc-grid-shift-x)) var(--dc-grid-shift-y);
}

/* A small, non-interactive layer keeps repainting local to the pointer. */
.dc-grid-reveal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 360px;
  height: 360px;
  pointer-events: none;
  opacity: 0;
  background-image: url("../assets/images/grid-fragments-hover.svg?v=20261020-2");
  background-repeat: repeat;
  background-size: var(--dc-grid-width) var(--dc-grid-height);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .9) 25%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .9) 25%, transparent 100%);
  transition: opacity 240ms ease;
}

.dc-grid-reveal.is-visible {
  opacity: 1;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .dc-grid-reveal {
    display: none;
  }
}

@media (max-width: 760px) {
  body {
    --dc-grid-width: 1200px;
    --dc-grid-height: 1600px;
    --dc-grid-shift-x: 180px;
    --dc-grid-shift-y: 80px;
  }
}