/* 右下角的微信翻转卡（v1.8）：整块 105×106，上下和右边 PRODUCT…LIFE 那列文字对齐（底图坐标 y 734–840）。没有底色、没有阴影。
   正面 = 抠了底的「Hi」头像 + 微信图标 + VChatAIGC + 往左指的小箭头；背面 = 二维码 + 「微信扫一扫」。
   头像是独立的一层，翻的时候缩小、裁成圆、落到二维码正中 */
#wx {
  position: absolute; left: 1230px; top: 734px;
  width: 105px; height: 106px;
  perspective: 700px;
  cursor: pointer;
  z-index: 4000;
}
#wx .faces { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4, 0, .2, 1); }
#wx.flipped .faces { transform: rotateY(180deg); }
#wx .face { position: absolute; left: 0; top: 0; width: 105px; height: 106px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#wx .front .row { position: absolute; left: 0; right: 0; top: 80px; display: flex; align-items: center; justify-content: center; gap: 5px; font: 600 8.5px/1 "Inter", -apple-system, "PingFang SC", sans-serif; letter-spacing: .12em; color: var(--ink); }
#wx .front .row svg.wx { width: 13px; height: 13px; flex: none; }
#wx .front .row svg.arrow { width: 10px; height: 8px; flex: none; animation: nudge 1s ease-in-out infinite alternate; }
@keyframes nudge { from { transform: translateX(1px) } to { transform: translateX(-3px) } }
#wx .back { transform: rotateY(180deg); }
#wx .back img { display: block; width: 86px; height: 86px; margin: 0 auto; }
#wx .back .cap { margin-top: 5px; text-align: center; font: 400 7.5px/1 "Inter", -apple-system, "PingFang SC", sans-serif; letter-spacing: .2em; color: var(--ink-soft); }
/* 会飞的头像：正面 84×74.3 居中靠上；翻过去缩到 .346 倍、只留圆的部分，圆心落在二维码中心 (52.5,43) */
#wx .avatar {
  position: absolute; left: 10.5px; top: 0; width: 84px; height: 74.3px;
  background: url(../assets/wechat/avatar-cut.png) center / contain no-repeat;
  transform-origin: 0 0;
  clip-path: circle(200px at 47.5px 38.6px);
  transition: transform .9s cubic-bezier(.4, 0, .2, 1), clip-path .9s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
#wx.flipped .avatar { transform: translate(25.6px, 29.6px) scale(.346); clip-path: circle(33.2px at 47.5px 38.6px); }
/* 「联系我」小标：压在卡的左上角，斜一点，正反面都在同一个位置 */
#wx .tag {
  position: absolute; left: -14px; top: -9px;
  padding: 4px 9px; border-radius: 2px;
  background: var(--ink); color: var(--paper);
  font: 500 8px/1 -apple-system, "PingFang SC", "Inter", sans-serif; letter-spacing: .28em; text-indent: .28em;
  transform: rotate(-9deg);
  pointer-events: none; z-index: 2;
}
@media (prefers-reduced-motion: reduce) { #wx .faces, #wx .avatar { transition: none; } #wx .front .row svg.arrow { animation: none; } }