/* The image remains visible without scripts. Layout sizes belong to each page. */
.context-art[data-context-art] {
  position: relative;
  display: block;
  isolation: isolate;
  pointer-events: none;
  user-select: none;
}
.context-art[data-context-art] > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.context-art[data-context-art] > .context-art-glints {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .context-art[data-context-art] > .context-art-glints { display: none; }
}

/* Swap only after the first complete canvas frame. Reduced motion and errors
   restore the unchanged image; its accessible/layout role never changes. */
.context-art[data-art-motion="active"] > img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .context-art[data-art-motion="active"] > img { opacity: 1; }
}

.context-art[data-context-art] > .context-art-glints[hidden] { display: none; }