/* ============================================================
   关于页 · 互动表情脸（纯 CSS 动画 + JS 瞳孔跟随鼠标）
   - 入场：眼睛从下方浮现、鼻子下落、微笑画出
   - 循环：眼皮周期性眨眼
   - 交互：瞳孔由 js/main.js 的 initFace() 驱动跟随鼠标
   ============================================================ */

/* ---------- 布局：lede 左 · 表情脸右 ---------- */
.about-intro {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  flex-wrap: wrap;
  margin-bottom: clamp(48px, 8vw, 90px);
}

.about-intro .lede {
  flex: 1 1 300px;
  max-width: 30ch;
  margin-bottom: 0;
}

.about-face {
  flex: 0 1 240px;
  min-width: 180px;
  display: flex;
  justify-content: center;
}

.face {
  width: 100%;
  max-width: 230px;
  color: var(--fg);
}

/* ---------- 入场动画 ---------- */
/* 眼睛（含瞳孔）从下方浮现 */
.face__eyes {
  animation: face-eyes-in 1s 0.3s var(--ease) both;
}

/* 鼻子下落 */
.face__nose {
  animation: face-nose-in 1s 0.3s var(--ease) both;
}

/* 微笑从中间向两侧画出 */
.face__mouth-left,
.face__mouth-right {
  stroke-dasharray: 100;
  animation-duration: 1.1s;
  animation-delay: 0.45s;
  animation-fill-mode: forwards;
  animation-timing-function: var(--ease);
}
.face__mouth-left { stroke-dashoffset: -100; animation-name: face-mouth-left; }
.face__mouth-right { stroke-dashoffset: 100; animation-name: face-mouth-right; }

/* ---------- 循环动画：眨眼 ---------- */
.face__eye-lid {
  animation: face-eye-lid 4.5s 1.8s infinite;
}

/* ---------- 瞳孔：JS 驱动，加平滑过渡 ---------- */
.face__pupil {
  transition: transform 0.16s ease-out;
  will-change: transform;
}

/* ---------- 关键帧 ---------- */
@keyframes face-eyes-in {
  from { transform: translateY(80px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes face-nose-in {
  from { transform: translateY(-12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes face-mouth-left {
  from, 50% { stroke-dashoffset: -100; }
  to { stroke-dashoffset: 0; }
}

@keyframes face-mouth-right {
  from, 50% { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes face-eye-lid {
  0%, 42%, 47%, 100% { transform: translateY(0); }
  44.5% { transform: translateY(62px); }
}

/* ---------- 移动端：换行后脸在文字下方 ---------- */
@media (max-width: 719px) {
  .about-face { padding: 8px 0 16px; }
}

/* ---------- 减少动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .face__eyes,
  .face__nose,
  .face__eye-lid,
  .face__mouth-left,
  .face__mouth-right { animation: none; }
  .face__mouth-left,
  .face__mouth-right { stroke-dashoffset: 0; }
  .face__pupil { transition: none; }
}