/* 标题旁边的小伙伴（测试版）
   造型来自参考图：橙色半圆、紫色长条、黑色长条、黄色拱门。
   默认贴着「你的想法是什么？」大标题的右侧站，脚踩在标题底线上；
   右边空间不够（窄屏）时自动落到标题下面一行。
   它们的整张脸会跟着桌宠左右平移，眼睛不是钉死在左边的。 */

.hero-block {
  position: relative;
}

.desk-cast {
  position: relative;
  width: min(var(--cast-w, 172px), 100%);
  margin: 14px 0 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 620ms ease,
    transform 760ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.desk-cast.is-ready {
  opacity: 1;
  transform: translateY(0);
}

/* 贴在大标题右侧 */
.desk-cast.is-beside {
  position: absolute;
  left: var(--cast-x, 0px);
  bottom: 0;
  margin: 0;
}

/* 一点点落地阴影，让它们踩在页面上而不是飘着 */
.desk-cast::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -5px;
  height: 11px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(31, 44, 35, 0.16);
  filter: blur(7px);
}

.desk-cast-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* 身体轻微前倾 */
.desk-figure {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  will-change: transform;
}

/* 整张脸（眼睛 + 嘴）左右滑 */
.desk-face {
  will-change: transform;
}

/* 眨眼：以眼睛中心压扁 */
.desk-eye {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 90ms ease-out;
}

.desk-figure.is-blinking .desk-eye {
  transform: scaleY(0.16);
}

.desk-cast-svg .desk-eye-pupil {
  transform: translate(0, 0);
}

@media (max-width: 640px) {
  .desk-cast {
    width: min(var(--cast-w, 158px), 100%);
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desk-cast {
    transition: none;
    transform: none;
  }

  .desk-eye {
    transition: none;
  }
}