.image-screen { position:relative; background:transparent!important; }
.image-frame { display:block; }
.image-screen::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:var(--image-preview);
  background-size:var(--image-preview-fit,cover);
  background-position:var(--image-preview-position,center);
  background-repeat:no-repeat;
  filter:none;
  opacity:0;
  visibility:hidden;
  /* Feather the small preview into the paper without blurring the final artwork. */
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(0deg,transparent,#000 5%,#000 95%,transparent);
  mask-composite:intersect;
}
.image-screen[data-image-state="pending"]::before { opacity:.22; visibility:visible; }
.image-screen[data-image-state="pending"] img { opacity:0!important; }
.image-screen[data-image-state="revealing"] img { animation:image-ink-develop 400ms ease-out both; }
.image-screen[data-image-state="revealing"]::before {
  visibility:visible;
  animation:image-preview-clear 400ms ease-out both;
}
@keyframes image-ink-develop { from { opacity:0; } to { opacity:1; } }
@keyframes image-preview-clear { from { opacity:.22; } to { opacity:0; } }
.image-screen .shot-hint { display:none; }
.media-surface[data-image-state="pending"]::after,
.media-surface[data-image-state="revealing"]::after { opacity:0; }
.image-load-note {
  display:block;
  position:relative;
  height:0;
  top:2px;
  pointer-events:none;
  opacity:0;
  color:var(--txt-3,#656971);
  font-size:9px;
  line-height:12px;
  letter-spacing:.08em;
  font-weight:400;
}
.image-load-note.is-waiting { opacity:.7; }
/* Subpixel coverage on rotated DOM fallback edges, without blurring image detail. */
.media-surface:not(.fx-ready) {
  mask-image:linear-gradient(90deg,transparent,#000 .7px,#000 calc(100% - .7px),transparent),linear-gradient(0deg,transparent,#000 .7px,#000 calc(100% - .7px),transparent);
  mask-composite:intersect;
}
.image-screen.motion-capture img { opacity:1!important; animation:none!important; }
.image-screen.motion-capture::before { visibility:hidden; }
/* Match the artwork: only mouse devices use monochrome loading previews. */
@media(hover:hover) and (pointer:fine) {
  .image-screen::before { filter:grayscale(1); }
}
@media(prefers-reduced-motion:reduce) {
  .image-screen img,.image-screen::before { animation:none!important; }
  .image-screen[data-image-state="revealing"] img { opacity:1; }
  .image-screen[data-image-state="revealing"]::before { visibility:hidden; }
}