.badge-home-anchor{position:relative;width:min(620px,68%);aspect-ratio:1122/1402;margin-left:auto;isolation:isolate}
.badge-layer{position:absolute;inset:0;pointer-events:none}
.badge-entrance,.badge-pose{width:100%;height:100%;transform-style:preserve-3d}
.badge-pose{position:relative;transform-origin:50% 28%;pointer-events:auto}
.badge-decoration{position:absolute;inset:0;transform-origin:0 0}
.badge-decoration img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.badge-photo{position:absolute;left:54.45633%;top:56.34807%;width:19.60784%;height:23.18117%;object-fit:cover;object-position:50% 50%;border-radius:6.81818% / 4.61538%;filter:grayscale(1);pointer-events:none}
.badge-active .badge-layer{position:fixed;inset:auto;top:0;left:0;z-index:15;perspective:1100px;visibility:hidden;will-change:transform}
.badge-active .badge-layer.is-ready{visibility:visible}
.badge-active .badge-layer.is-entering .badge-entrance{animation:badge-arrive 1.2s cubic-bezier(.2,.75,.25,1) .35s both}
.badge-active .badge-layer.is-travelling .badge-entrance{animation:none;transform:none;opacity:1}
.badge-portrait-target{display:block;width:230px;height:280px;flex-shrink:0}
@keyframes badge-arrive{from{opacity:0;transform:translate3d(65px,-110px,0) rotate(7deg)}to{opacity:1;transform:translate3d(0,0,0) rotate(0)}}
@media(max-width:1050px){.badge-portrait-target{width:190px;height:240px}}
@media(max-width:700px){.badge-home-anchor{width:min(400px,100%)}.badge-portrait-target{width:100px;height:120px}}
@media(prefers-reduced-motion:reduce){.badge-entrance{animation:none!important}.badge-pose{transform:none!important}}

/* Keep the landed photo in normal document scrolling, including mobile inertia. */
.badge-portrait-target{position:relative}
.badge-portrait-target>.badge-photo.is-landed{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-position:45% 50%}