/* A single CSS 3D scene. Its host needs a definite width and height. */
.skin-viewer {
  position: relative;
  display: block;
  isolation: isolate;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  contain: layout style;
}
.skin-viewer:focus-visible { outline: 3px solid var(--lime, #dbff81); outline-offset: -5px; border-radius: 20px; }
.skin-viewer.sv-dragging { cursor: grabbing; }
.sv-stage {
  position: absolute;
  display: block;
  inset: 0;
  container-type: size;
  perspective: 1000px;
  pointer-events: none;
}
.sv-figure {
  /* 32 skin pixels high: about 86% of its scene, without cropping on phones. */
  font-size: min(2.7cqh, 4.4cqw);
  position: absolute;
  display: block;
  width: 16em;
  height: 32em;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%) rotateX(-10deg) rotateY(var(--sv-yaw, -24deg));
  /* Target changes are eased even during a drag; no frame-by-frame JS loop. */
  transition: transform 400ms cubic-bezier(.2, .72, .2, 1);
  transform-style: preserve-3d;
}
.sv-bob { position: absolute; display: block; inset: 0; transform-style: preserve-3d; animation: sv-breathe 4s ease-in-out infinite; }
.sv-joint { position: absolute; display: block; width: 0; height: 0; transform-style: preserve-3d; transform-origin: 0 0; }
.sv-cube { position: absolute; display: block; width: var(--sv-w); height: var(--sv-h); transform-style: preserve-3d; }
.sv-face {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  /* Exact plane geometry + tiny edge overdraw are supplied by cubeFaces(). */
  border: 0;
  padding: 0;
  background-color: transparent;
  background-image: var(--sv-skin);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  image-rendering: pixelated;
  backface-visibility: hidden;
}
.sv-back { filter: brightness(.78); }
.sv-left { filter: brightness(.72); }
.sv-right { filter: brightness(.88); }
.sv-top { filter: brightness(1.12); }
.sv-bottom { filter: brightness(.6); }
.sv-head { animation: sv-look 6s ease-in-out infinite; }
.sv-right-arm { transform: rotateZ(4deg); }
.sv-left-arm { transform: rotateZ(-4deg); }
.skin-viewer[data-pose="wave"] .sv-right-arm { animation: sv-wave 1.55s ease-in-out 1; }
.skin-viewer.sv-paused .sv-bob,
.skin-viewer.sv-paused .sv-joint { animation-play-state: paused; }
@keyframes sv-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.35em); } }
@keyframes sv-look { 0%, 100% { transform: rotateY(0); } 40%, 60% { transform: rotateY(7deg) rotateX(-3deg); } }
@keyframes sv-wave {
  0%, 100% { transform: rotateZ(4deg); }
  22%, 58% { transform: rotateZ(134deg) rotateX(-10deg); }
  40%, 76% { transform: rotateZ(112deg) rotateX(12deg); }
}
@keyframes sv-wave-reduced { from, to { transform: rotateZ(4deg); } }
@media (prefers-reduced-motion: reduce) {
  .sv-figure { transition: none; }
  .sv-bob, .sv-joint { animation: none !important; }
  /* Still ends the one-shot gesture lifecycle, without animated movement. */
  .skin-viewer[data-pose="wave"] .sv-right-arm { animation: sv-wave-reduced 1ms linear 1 !important; }
  .skin-viewer.sv-paused .sv-joint { animation-play-state: paused !important; }
}