/* Animate re-placements (breakpoint changes) but not the very first placement: `data-face-crop-ready` is set one frame after the first object-position is applied. */ img[data-face-crop-ready] { transition: object-position 300ms ease-out; } @media (prefers-reduced-motion: reduce) { img[data-face-crop-ready] { transition: none; } } /* Optional debug overlay — enable with */ [data-face-crop-debug] img[data-face-crop="ok"] { outline: 3px solid lime; outline-offset: -3px; } [data-face-crop-debug] img[data-face-crop="partial"] { outline: 3px dashed gold; outline-offset: -3px; } [data-face-crop-debug] img[data-face-crop="overflow"] { outline: 3px solid red; outline-offset: -3px; } [data-face-crop-debug] img[data-face-crop="none"] { outline: 3px dashed red; outline-offset: -3px; } [data-face-crop-debug] img[data-face-crop="error"] { outline: 3px dotted magenta; outline-offset: -3px; }