/*
 * Module      : Avatar (styles)
 * Description : Styles for the avatar area: stage and small-mode placement,
 *               side switching, the dimmed state, and the avatar image.
 */

.avatar-area {
  position: absolute; left: -2%; bottom: 0;
  width: 18%; height: calc((100% - 52px) * 0.35);
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none; overflow: visible;
  z-index: 50;
  transition: opacity 0.4s ease, transform 0.5s ease, filter 0.4s ease;
}
.avatar-area.side-right { left: auto; right: 0; }
.avatar-area.mode-small {

  width: 140px;
  height: 170px;
  left: 16px;
  bottom: 160px;
  opacity: 1;
  pointer-events: auto;
}
.avatar-area.mode-small .avatar-img {
  height: 100%;
  width: auto;
  object-position: bottom center;
  filter: none;
}
.avatar-area.dimmed { opacity: 0.35; filter: saturate(0.6) blur(1px); }
.avatar-img {
  height: 98%;
  width: auto;
  object-position: bottom center;
  filter: none;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.5s ease;
}