/* Background grid, hover reveal, ripples, and random squares. */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: 34px 34px;
  background-repeat: repeat;
}

/* The site's normal white grid is always present. */
body::before {
  background-image:
    linear-gradient(var(--grid-color) 3px, transparent 3px),
    linear-gradient(90deg, var(--grid-color) 3px, transparent 3px);
}

/* Optional black grid sweep. */
body::after {
  --grid-sweep-x: -20%;
  opacity: 0;
  transition: opacity 500ms ease;
  background-image:
    linear-gradient(#000 3px, transparent 3px),
    linear-gradient(90deg, #000 3px, transparent 3px);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent calc(var(--grid-sweep-x) - 22%),
    rgba(0, 0, 0, 0.35) calc(var(--grid-sweep-x) - 13%),
    #000 calc(var(--grid-sweep-x) - 5%),
    #000 calc(var(--grid-sweep-x) + 5%),
    rgba(0, 0, 0, 0.35) calc(var(--grid-sweep-x) + 13%),
    transparent calc(var(--grid-sweep-x) + 22%)
  );
  mask-image: linear-gradient(
    90deg,
    transparent calc(var(--grid-sweep-x) - 22%),
    rgba(0, 0, 0, 0.35) calc(var(--grid-sweep-x) - 13%),
    #000 calc(var(--grid-sweep-x) - 5%),
    #000 calc(var(--grid-sweep-x) + 5%),
    rgba(0, 0, 0, 0.35) calc(var(--grid-sweep-x) + 13%),
    transparent calc(var(--grid-sweep-x) + 22%)
  );
}

body.background-grid-enabled::after {
  opacity: 1;
  animation: background-grid-sweep 9s ease-in-out infinite alternate;
}

@keyframes background-grid-sweep {
  from { --grid-sweep-x: -20%; }
  to { --grid-sweep-x: 120%; }
}

/* Pointer-following black grid reveal. */
.grid-hover-layer {
  --hover-grid-x: 50vw;
  --hover-grid-y: 50vh;
  position: fixed;
  inset: 0;
  z-index: 0;
  contain: strict;
  isolation: isolate;
  pointer-events: none;
  opacity: 0;
  background-image:
    linear-gradient(#000 3px, transparent 3px),
    linear-gradient(90deg, #000 3px, transparent 3px);
  background-size: 34px 34px;
  background-repeat: repeat;
  -webkit-mask-image: radial-gradient(
    circle 120px at var(--hover-grid-x) var(--hover-grid-y),
    #000 0 66%,
    rgba(0, 0, 0, 0.94) 76%,
    rgba(0, 0, 0, 0.58) 88%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle 120px at var(--hover-grid-x) var(--hover-grid-y),
    #000 0 66%,
    rgba(0, 0, 0, 0.94) 76%,
    rgba(0, 0, 0, 0.58) 88%,
    transparent 100%
  );
  transition: opacity 220ms ease;
  will-change: opacity, -webkit-mask-position, mask-position;
}

.grid-hover-layer.is-active {
  opacity: 1;
}

.grid-hover-ripple {
  position: fixed;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: var(--ripple-width, 3px) solid rgba(126, 205, 255, var(--ripple-alpha, 0.92));
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.08);
  opacity: 0;
  pointer-events: none;
  animation: grid-hover-droplet var(--ripple-duration, 1050ms) cubic-bezier(0.16, 0.68, 0.22, 1) forwards;
}

@keyframes grid-hover-droplet {
  0% { transform: translate(-50%, -50%) scale(0.08); opacity: 0; }
  4% { opacity: var(--ripple-alpha, 0.92); }
  65% { opacity: calc(var(--ripple-alpha, 0.92) * 0.48); }
  100% { transform: translate(-50%, -50%) scale(var(--ripple-scale, 14)); opacity: 0; }
}

/* Optional random filled cells. */
.grid-random-cells {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.grid-random-cell {
  position: absolute;
  width: 31px;
  height: 31px;
  background: #000;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  will-change: opacity;
}

.grid-random-cell.is-visible {
  opacity: 0.62;
}

#page {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .grid-random-cells {
    display: none;
  }

  .grid-hover-layer,
  .grid-hover-ripple {
    transition: none;
    animation: none;
  }
}