/* Content stays visible without JavaScript; motion never owns layout or focus. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  html.motion-enabled .motion-image-hover.motion-in-view .motion-photo {
    transition: scale 420ms cubic-bezier(.2, .7, .2, 1);
  }

  html.motion-enabled .motion-image-hover.motion-in-view:hover .motion-photo {
    scale: 1.025;
  }

  /* Independent scale preserves the portfolio's intentional 90-degree rotations. */
  html.motion-enabled .music-release:hover .music-release-art img.motion-photo,
  html.motion-enabled .trophy-card:hover .trophy-media img.motion-photo {
    transform: none;
  }

  html.motion-enabled .motion-tilt .motion-tilt-card {
    transform: perspective(1000px) rotateX(var(--kozo-motion-x, 0deg))
      rotateY(var(--kozo-motion-y, 0deg)) var(--kozo-motion-base);
    transition: transform 180ms ease-out;
  }
}

/* No transition may linger after an image leaves the viewport. */
.motion-image-hover:not(.motion-in-view) .motion-photo,
.motion-tilt:not(.motion-in-view) .motion-tilt-card {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .motion-photo { scale: none !important; transition: none !important; }
  .motion-tilt-card { transform: var(--kozo-motion-base) !important; transition: none !important; }
}

@media print {
  .motion-photo { scale: none !important; }
  .motion-tilt-card { transform: var(--kozo-motion-base) !important; }
}