/* Floating pixel ghosts behind the homepage.
 * Credit: MisterCurtis on CodePen
 * https://codepen.io/editor/MisterCurtis/pen/01a11d92-44b7-7b73-911d-c5aa2d5da177 */
.ghosts {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  background: linear-gradient(to top, var(--color-1) 0%, var(--color-3) 50%, var(--color-6) 100%);
}

.ghosts svg {
  position: absolute;
}

.ghosts-layer {
  position: absolute;
  inset: 0;
  filter: url(#ghosts-distortion);
}

.ghost {
  --size: 20px;
  --color: oklch(from var(--color-8) l c h / 60%);
  --px-size: calc(var(--size) / 5);
  --px-0: 0px;
  --px-1: calc(var(--px-size) * 1);
  --px-2: calc(var(--px-size) * 2);
  --px-3: calc(var(--px-size) * 3);
  --px-4: calc(var(--px-size) * 4);
  --px-5: calc(var(--px-size) * 5);
  --px-6: calc(var(--px-size) * 6);
  --px-9: calc(var(--px-size) * 9);
  --width: calc(var(--px-size) * 5);
  --height: calc(var(--px-size) * 15);

  mix-blend-mode: plus-lighter;
  filter: blur(0.5px);
  position: absolute;
  top: 0;
  left: calc(var(--index) / var(--total) * 99vw);
  width: var(--width);
  height: var(--height);
  animation:
    ghost-spooky 1s ease-in-out infinite alternate,
    ghost-float 5s linear infinite forwards;
  animation-delay: calc(var(--index) * -2s);
  animation-duration:
    calc((mod(var(--index), 5) + 1) * 0.65s),
    calc((mod(var(--index), 5) + 1) * 2.3s);
  transform-origin: center bottom;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--color), var(--color)),
    linear-gradient(var(--color), var(--color)),
    linear-gradient(var(--color), var(--color)),
    linear-gradient(var(--color), var(--color)),
    linear-gradient(var(--color), var(--color)),
    linear-gradient(var(--color), var(--color)),
    linear-gradient(to bottom, var(--color) 0%, transparent 100%);
  background-size:
    var(--px-3) var(--px-2),
    var(--px-1) var(--px-2),
    var(--px-1) var(--px-2),
    var(--px-1) var(--px-2),
    var(--px-2) var(--px-3),
    var(--px-2) var(--px-3),
    var(--px-5) var(--px-9);
  background-position:
    var(--px-1) var(--px-0),
    var(--px-0) var(--px-1),
    var(--px-4) var(--px-1),
    var(--px-2) var(--px-2),
    var(--px-0) var(--px-3),
    var(--px-3) var(--px-3),
    var(--px-0) var(--px-6);
}

@keyframes ghost-spooky {
  0% {
    transform: skew(1deg);
    scale: 1 1.2;
  }
  50% {
    scale: 1.4 0.6;
  }
  100% {
    transform: skew(-1deg);
    scale: 1 1.2;
  }
}

@keyframes ghost-float {
  from {
    translate: 0 calc(100vh + var(--height));
  }
  to {
    translate: 0 calc(0vh - var(--height));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ghosts {
    display: none;
  }
}