/* Keep the pixel preview edge-to-edge in both publication layouts. */
.paper-image.paper-preview,
.paper-card__media.paper-preview {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.paper-preview img {
  width: 100%;
  border: 0;
  border-radius: 0;
  /* A 4x crop of the upper-left eye reveals an aligned 8 by 8 pixel grid. */
  transform-origin: 33.333333% 33.333333%;
  transform: scale(var(--preview-scale, 1));
  transition: transform 0.36s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.paper-preview img:first-child {
  image-rendering: pixelated;
}

.paper-preview .paper-preview__indices {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: var(--preview-numbers, 0);
  pointer-events: none;
  transition:
    transform 0.36s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.16s ease var(--preview-reveal-delay, 0s);
}

@media (hover: hover) {
  .paper-container:hover .paper-preview,
  .paper-card:hover .paper-preview {
    --preview-scale: 4;
    --preview-numbers: 1;
    --preview-reveal-delay: 0.42s;
  }
}

.paper-container:focus-within .paper-preview,
.paper-card:focus-visible .paper-preview {
  --preview-scale: 4;
  --preview-numbers: 1;
  --preview-reveal-delay: 0.42s;
}

@media (prefers-reduced-motion: reduce) {
  .paper-preview img,
  .paper-preview .paper-preview__indices {
    transition: none;
  }
}