/* All decorative pixel art belongs to the sibling layer beside <main>. */
.stage {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

.pixel-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
}

.pixel-layer.is-positioned {
  visibility: visible;
}

/* JS matches each anchor to its content section, including gallery resizes. */
.pixel-anchor {
  position: absolute;
}

.drift {
  position: absolute;
  transform: translateY(var(--drift-y, 0px));
}

.pixel-art {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  transform: rotate(var(--sprite-angle, 0deg));
}

.drift-eye {
  width: 224px;
  top: -24px;
  right: 30%;
  --sprite-angle: -8deg;
}

.drift-hand {
  width: 320px;
  top: -8px;
  right: -8px;
  --sprite-angle: 10deg;
}

.drift-snail {
  width: 256px;
  left: -12px;
  top: 37%;
  --sprite-angle: -8deg;
}

.drift-scissors {
  width: 240px;
  right: -20px;
  top: 70%;
  --sprite-angle: 12deg;
}

.drift-pigeon {
  width: 224px;
  right: 2%;
  top: -164px;
  --sprite-angle: -5deg;
}

.drift-portrait {
  width: 224px;
  right: 24px;
  bottom: 0;
  --sprite-angle: 10deg;
}

body:has(.publish-fields input:focus) .pixel-layer {
  opacity: 0;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .drift-eye {
    width: 176px;
    right: 29%;
  }
  .drift-hand {
    width: 248px;
    right: -16px;
  }
  .drift-snail {
    width: 208px;
  }
  .drift-scissors {
    width: 200px;
  }
}

@media (max-width: 760px) {
  .drift-eye {
    width: 144px;
    top: -8px;
    right: -18px;
  }
  .drift-hand {
    width: 176px;
    top: auto;
    bottom: -64px;
    right: -20px;
  }
  .drift-snail {
    width: 160px;
    top: 35%;
    left: -20px;
  }
  .drift-scissors {
    width: 160px;
    top: 72%;
    right: -24px;
  }
  .drift-pigeon {
    width: 152px;
    top: -112px;
    right: -8px;
  }
  .drift-portrait {
    width: 176px;
    right: -8px;
    bottom: -8px;
  }
}

@media (max-width: 360px) {
  .drift-eye {
    width: 128px;
    right: -16px;
  }
  .drift-hand {
    width: 160px;
    right: -24px;
    bottom: -76px;
  }
  .drift-snail {
    width: 144px;
  }
  .drift-scissors {
    width: 144px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drift {
    transform: none;
  }
}

@media print {
  .pixel-layer {
    display: none;
  }
}