/* The supplied photo is always underneath the optional WebGL enhancement. */
#about {
  --about-photo: url("/about/portrait-depth-20260923.webp");
  background-color: #000;
}

#about [data-depth-image] {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: auto;
  touch-action: pan-y pinch-zoom;
}

#about [data-depth-image-state="active"] { opacity: 1; }

/* R3F sets touch-action on its measuring div. Preserve native vertical pan. */
#about [data-depth-image] :is(div, canvas) { touch-action: pan-y pinch-zoom !important; }

@media (max-width: 47.9375rem) {
  #about .about__photo { background-position: 32% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  #about [data-depth-image] { display: none; }
}