/* Visitors are clipped by the photograph itself; they never change its size. */
.portrait-peek-stage { position: relative; isolation: isolate; width: 100%; overflow: hidden; overflow: clip; border-radius: 16px; }
.portrait-peek-photo { display: block; position: relative; z-index: 1; }
.portrait-peek-photo:focus-visible { outline-offset: -4px; }
.portrait-visitors { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.portrait-visitor { position: absolute; bottom: 0; left: clamp(calc(min(15%, 64px) + 8px), var(--visitor-x, 50%), calc(100% - min(15%, 64px) - 8px)); display: block; width: 30%; max-width: 128px; aspect-ratio: 1; opacity: 0; --visitor-hidden: translate(-50%, 100%); --visitor-reveal: translate(-50%, 0); transform: var(--visitor-hidden); transition: transform .24s ease-in, opacity .16s ease-in .08s; pointer-events: none; }
.portrait-peek .portrait-visitor > img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 0; background: transparent; pointer-events: none; image-rendering: pixelated; }
.portrait-visitor.is-visiting { opacity: 1; transform: var(--visitor-reveal); transition: transform 1.8s cubic-bezier(.22,.61,.36,1), opacity .2s ease; }
.portrait-visitor.is-exposed { pointer-events: auto; }
.portrait-visitor:focus-visible { outline: 2px solid var(--clay); outline-offset: -3px; border-radius: 8px; }
.portrait-peek-suspended .portrait-visitor { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .portrait-peek .portrait-visitor { display: none; transition: none; } }