/**
 * Blur-Up Image Loading (LQIP)
 * Progressive image reveal with blur placeholder and dominant color fallback.
 * Containers marked with [data-blur-up] get a smooth blur-to-sharp transition
 * once their child <img> finishes loading.
 *
 * @version 1.0.0
 */

.blur-up {
  position: relative;
  overflow: hidden;
  background-color: var(--placeholder-color, oklch(0.2 0.01 260));

  /* Prevent layout shift - default 1:1 for album covers */
  &:not([style*="aspect-ratio"]) {
    aspect-ratio: 1 / 1;
  }

  /* Image transition layer */
  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
  }

  /* Blurred placeholder state (before load) */
  &:not(.blur-up--loaded) img {
    filter: blur(20px);
    transform: scale(1.1);
    opacity: 0.7;
  }

  /* Loaded state - sharp image fully visible */
  &.blur-up--loaded img {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }

  /* Error state - show placeholder color, hide broken image */
  &.blur-up--error img {
    opacity: 0;
  }

  &.blur-up--error::after {
    content: '';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--placeholder-color, oklch(0.2 0.01 260));
  }
}

/* Gallery variant - 4:3 default aspect ratio */
.blur-up--gallery {
  aspect-ratio: 4 / 3;
}

/* Reduced motion: skip the blur animation entirely */
@media (prefers-reduced-motion: reduce) {
  .blur-up {
    & img {
      transition: none;
    }

    &:not(.blur-up--loaded) img {
      filter: none;
      transform: none;
      opacity: 0;
    }

    &.blur-up--loaded img {
      opacity: 1;
    }
  }
}