/* Smooth image reveal — lightweight, layout-stable, and reduced-motion safe. */
img.smooth-image {
  opacity: 0;
  filter: blur(10px) saturate(.92) brightness(.98);
  transform: translate3d(0, 10px, 0) scale(.982);
  transition:
    opacity 420ms var(--ease-out, cubic-bezier(.23,1,.32,1)),
    transform 620ms var(--ease-out, cubic-bezier(.23,1,.32,1)),
    filter 620ms var(--ease-out, cubic-bezier(.23,1,.32,1));
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}

img.smooth-image.is-image-loaded {
  opacity: 1;
  filter: blur(0) saturate(1) brightness(1);
  transform: translate3d(0, 0, 0) scale(1);
}

/* Gallery swaps feel intentional instead of flashing between screenshots. */
.project-case-image.smooth-image {
  transition-duration: 260ms, 360ms, 360ms;
}

/* Keep the tab/brand icon immediate; it is tiny UI chrome, not page media. */
.brand-tab-icon {
  opacity: 1;
  filter: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  img.smooth-image,
  img.smooth-image.is-image-loaded {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* FINAL About-photo interaction override.
   Desktop is detected by a real hover/fine pointer, not viewport width.
   This keeps the collage tilted even in a narrow desktop browser window. */
@media (hover:hover) and (pointer:fine) {
  .about-media > li:nth-child(1) {
    transform: rotate(-6deg) !important;
  }
  .about-media > li:nth-child(2) {
    transform: rotate(4deg) !important;
  }
  .about-media > li:nth-child(3) {
    transform: rotate(-3deg) !important;
  }
  .about-media > li:nth-child(4) {
    transform: rotate(7deg) !important;
  }

  .about-media > li {
    transform-origin: 50% 50%;
    transition:
      transform 420ms var(--ease-out, cubic-bezier(.23,1,.32,1)),
      opacity 220ms var(--ease-out, cubic-bezier(.23,1,.32,1));
  }

  .about-media > li:hover,
  .about-media > li:focus-within {
    transform: rotate(0deg) translate3d(0,-7px,0) scale(1.025) !important;
    z-index: 40 !important;
  }

  .about-media > li:hover .record-frame,
  .about-media > li:focus-within .record-frame {
    border-color: var(--sage);
    box-shadow: 8px 10px 0 var(--pix-shadow);
  }

  .about-media > li:hover .record-frame img.smooth-image.is-image-loaded,
  .about-media > li:focus-within .record-frame img.smooth-image.is-image-loaded {
    transform: translate3d(0,0,0) scale(1.03);
  }
}

/* Touch devices stay straight and stable, regardless of screen width. */
@media (hover:none), (pointer:coarse) {
  .about-media > li,
  .about-media > li:hover,
  .about-media > li:focus-within {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (hover:hover) and (pointer:fine) {
  .about-media > li {
    transition: none !important;
  }
}