.portrait-matrix { position:relative; display:inline-block; width:80%; max-width:100%; padding:0; border:0; margin:4px 0 27px; background:transparent; color:inherit; vertical-align:middle; }
.portrait-matrix.has-depth { cursor:grab; touch-action:none; }
.portrait-matrix.has-depth:active { cursor:grabbing; }
.portrait-matrix__face { display:block; position:relative; background:#000; border-radius:50%; overflow:hidden; }
.portrait-matrix img { display:block; width:100%; height:auto; margin:0; pointer-events:none; }
.portrait-matrix canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; border-radius:50%; }
.portrait-matrix.is-parallax img { opacity:0; }
.portrait-matrix.is-parallax canvas { opacity:1; }
.portrait-matrix:focus-visible { outline:3px solid #16cbf6; outline-offset:6px; border-radius:50%; }
@media(prefers-reduced-motion:reduce) { .portrait-matrix.has-depth { touch-action:auto; cursor:default; } .portrait-matrix.is-parallax img { opacity:1; } .portrait-matrix.is-parallax canvas { opacity:0; } }