/*
 * Photo frame: shows an image inside a clipping box using a saved crop.
 *
 * The crop is three custom properties on the frame element:
 *   --pf-zoom  zoom factor, 1 = the image just covers the box
 *   --pf-x     focal point, horizontal percent (50% = centered)
 *   --pf-y     focal point, vertical percent (50% = centered)
 * The same rules drive the admin crop editor and the public avatars, so what
 * the editor shows is exactly what visitors see at any avatar size.
 */
.photo-frame {
    overflow: hidden;
}
.photo-frame > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pf-x, 50%) var(--pf-y, 50%);
    transform: scale(var(--pf-zoom, 1));
    transform-origin: var(--pf-x, 50%) var(--pf-y, 50%);
}