/**
 * Pixelated Image Reveal Styles
 * Progressive loading effect for hero image
 */

/* Hide images with data-pixelate until JS processes them */
img[data-pixelate] {
  visibility: hidden;
}

/* Canvas replacements in book grid */
.book-item canvas {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.pixelated-image-container {
  width: 100%;
  max-width: 600px;
  margin: 2rem auto 0;
  position: relative;
  overflow: hidden;
}

.pixelated-image-container canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Responsive adjustments */
@media screen and (max-width: 960px) {
  .pixelated-image-container {
    max-width: 100%;
    margin: 1.5rem auto 0;
    padding: 0 1rem;
  }
}

@media screen and (max-width: 640px) {
  .pixelated-image-container {
    margin: 1rem auto 0;
  }
}