@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  .cinder-image {
    display: block;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    background-color: var(--cinder-surface-inset);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  /* Pixelated placeholder only while the real image hasn't resolved.
 * Exclude the errored state too — a broken-image icon should render at the
 * browser's native fidelity, not pixel-snapped. */
  .cinder-image:not([data-cinder-loaded]):not([data-cinder-errored]) {
    image-rendering: pixelated;
  }

  .cinder-image__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
    opacity: 0;
    transition: opacity var(--cinder-duration-base) var(--cinder-ease-standard);
  }

  .cinder-image[data-cinder-loaded] .cinder-image__img {
    opacity: 1;
  }

  /* Errored without a fallback snippet: reveal the <img> so the browser's
 * native broken-image / alt-text rendering shows through, rather than
 * leaving a permanently-blank wrapper. */
  .cinder-image[data-cinder-errored]:not([data-cinder-fallback]) .cinder-image__img {
    opacity: 1;
  }

  /* Component clears the inline `style:background-image` after the image
 * resolves (via the `cssUrl` derivation), so transparent images don't show
 * the low-res layer through them and fallback snippets aren't painted over
 * a leftover blurry background. This rule covers the case where a consumer
 * has set their own background via a custom class on the wrapper. */
  .cinder-image[data-cinder-loaded],
  .cinder-image[data-cinder-errored] {
    background-image: none;
  }
}