:host {
  /**
   * @prop --transition-duration: Duration of appearing animation
   */
  --transition-duration: 500ms;
  display: block;
  object-fit: contain;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: inherit;
  object-position: inherit;
  opacity: 0;
}

:host(.img-animated) img {
  transition: opacity var(--transition-duration) cubic-bezier(0.32, 0.72, 0, 1);
}

:host(.img-locked) {
  position: relative;
}
:host(.img-locked)::before {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  content: "";
  z-index: 10;
}

:host(.img-loaded) img {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  :host(.img-animated) img {
    transition: none;
  }
}