/* Quiet perspective: the photograph tilts while the surrounding layout stays still. */
[data-depth-card] {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --light-x: 50%;
  --light-y: 50%;
  --depth-strength: 0;
}

.depth-sheen {
  display: none;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.depth-enabled [data-depth-card]:not(.reveal),
  html.depth-enabled [data-depth-card].reveal.visible {
    transform: perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-origin: center;
    backface-visibility: hidden;
  }

  html.depth-enabled [data-depth-card].depth-moving {
    transition: opacity .8s ease;
    will-change: transform;
  }

  html.depth-enabled [data-depth-card] > .depth-sheen {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    background: radial-gradient(ellipse at var(--light-x) var(--light-y),
      rgb(255 255 255 / .13), rgb(255 255 255 / .035) 25%, transparent 65%);
    opacity: var(--depth-strength);
    mix-blend-mode: screen;
  }

  html.depth-enabled [data-depth-card] > :is(.photo-tag, .image-note, .style-photo-label) {
    translate: 0 0 7px;
  }
}