/* The actual head changes direction. The portrait/card itself never rotates. */
.studio-portrait {
  display: block;
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--portrait-ink);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
button.studio-portrait { width: 100%; touch-action: manipulation; cursor: pointer; }
button.studio-portrait:disabled { cursor: default; }
.studio-tilt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--portrait-tilt-gap);
  margin-block: var(--portrait-tilt-space);
  font-size: var(--portrait-tilt-copy-size);
}
.studio-tilt__actions { display: flex; gap: var(--portrait-tilt-gap); }
.studio-tilt button {
  min-height: var(--portrait-tilt-control-size);
  min-width: var(--portrait-tilt-control-size);
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: var(--hairline) solid currentColor;
  background: transparent;
  color: var(--accent);
  touch-action: manipulation;
}
.studio-tilt button:disabled { color: var(--muted); cursor: wait; }
.studio-tilt p { color: var(--muted); }
.studio-portrait .character__caption {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--portrait-caption-gap);
}
.studio-portrait .character__caption small {
  display: grid;
  gap: var(--portrait-role-gap);
  min-width: 0;
  max-width: 100%;
  color: var(--portrait-role-color);
  font-size: var(--portrait-role-size);
  line-height: var(--portrait-role-leading);
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.studio-portrait .character__caption small > span { display: block; }
.studio-portrait__art {
  display: block;
  width: 100%;
  aspect-ratio: var(--portrait-aspect);
  background-repeat: no-repeat;
  background-image: var(--portrait-current-sheet);
  background-size: var(--portrait-sheet-size);
  background-position: var(--portrait-frame-x) var(--portrait-frame-y);
  clip-path: inset(0 0 var(--portrait-crop-bottom) 0);
  pointer-events: none;
}
.studio-portrait[data-portrait="bry"] { --portrait-current-sheet: var(--portrait-bry-sheet); }
.studio-portrait[data-portrait="ryae"] { --portrait-current-sheet: var(--portrait-ryae-sheet); }
.studio-portrait[data-portrait="marco"] { --portrait-current-sheet: var(--portrait-marco-sheet); }
.studio-portrait[data-portrait="jocko"] { --portrait-current-sheet: var(--portrait-jocko-sheet); }
.studio-portrait[data-greeting="salute"] { --portrait-hello-position: var(--portrait-hello-salute-position); }
.studio-portrait[data-greeting="wave"] { --portrait-hello-position: var(--portrait-hello-wave-position); }
.studio-portrait[data-greeting="wink"] { --portrait-hello-position: var(--portrait-hello-wink-position); }
.studio-portrait[data-greeting="toast"] { --portrait-hello-position: var(--portrait-hello-toast-position); }
.studio-portrait[data-greeting] > .studio-portrait__art {
  background-image: var(--portrait-hello-sheet);
  background-size: var(--portrait-hello-sheet-size);
  background-position: var(--portrait-hello-position);
  transform-origin: var(--portrait-hello-origin);
  animation: studio-portrait-hello var(--portrait-hello-pop-duration) var(--portrait-hello-ease) both;
}
@keyframes studio-portrait-hello {
  0% { transform: translateY(var(--portrait-hello-enter-y)) scale(var(--portrait-hello-scale-from)); }
  45% { transform: translateY(var(--portrait-hello-pop-y)) scale(var(--portrait-hello-scale-pop)); }
  100% { transform: none; }
}
button.studio-portrait:focus-visible {
  outline: var(--portrait-focus-width) solid var(--portrait-focus);
  outline-offset: var(--portrait-focus-offset);
  border-radius: var(--portrait-focus-radius);
}
@media (prefers-reduced-motion: reduce) {
  .studio-portrait__art,
  .studio-portrait[data-greeting] > .studio-portrait__art {
    background-image: var(--portrait-current-sheet);
    background-size: var(--portrait-sheet-size);
    background-position: var(--portrait-static-x) var(--portrait-static-y);
    animation: none;
    transform: none;
  }
}