/* ============================================================================
   Telegram 风格动画表情
   ---------------------------------------------------------------------------
   为什么不用 Lottie：
     · lottie-web 运行时要 165KB，为一个小图标不值
     · 手写 Lottie shape 语法极易出错，渲染不出来还很难查
   用 SVG + CSS 能做到同样的观感，体积 ~2KB，且完全可控：

   Telegram 动画表情的四个视觉特征（缺一个就"廉价"）：
     1. 立体感   —— 径向渐变高光 + 暗部，不是纯色块
     2. 弹性     —— squash & stretch，压缩时横向变宽、纵向变矮
     3. 节奏     —— 快起慢收 + 停顿，不是匀速循环
     4. 投影跟随 —— 弹起时投影变小变淡，落下时变大变实
   ============================================================================ */

/* 容器：固定方寸，内部 SVG 撑满 */
.anim-emoji{
  display:block;width:76px;height:82px;margin:0 auto 14px;
  position:relative;
  animation:emoji-hop 2.6s cubic-bezier(.22,.9,.24,1) infinite;
  will-change:transform;
}
.anim-emoji svg{display:block;width:100%;height:100%;overflow:visible}

/* 本体：跳跃 + 形变（压缩/拉伸） */
.anim-emoji .body{
  transform-origin:50% 100%;
  animation:emoji-squash 2.6s cubic-bezier(.22,.9,.24,1) infinite;
  transform-box:fill-box;
}

/* 投影：跟着高度变大小和浓淡 */
.anim-emoji .shadow{
  transform-origin:50% 50%;
  animation:emoji-shadow 2.6s cubic-bezier(.22,.9,.24,1) infinite;
  transform-box:fill-box;
}

/* 整体轻微摆动，增加"活"的感觉 */
@keyframes emoji-hop{
  0%   {transform:translate3d(0,0,0) rotate(0deg)}
  8%   {transform:translate3d(0,2px,0) rotate(-1.5deg)}
  22%  {transform:translate3d(0,-9px,0) rotate(1.2deg)}
  34%  {transform:translate3d(0,-2px,0) rotate(.4deg)}
  44%  {transform:translate3d(0,-4px,0) rotate(-.6deg)}
  56%  {transform:translate3d(0,0,0) rotate(0deg)}
  /* 56%–100% 保持静止：有停顿才不廉价 */
  100% {transform:translate3d(0,0,0) rotate(0deg)}
}

@keyframes emoji-squash{
  0%   {transform:scale(1,1)}
  6%   {transform:scale(1.14,.86)}   /* 起跳前压扁 */
  16%  {transform:scale(.94,1.09)}   /* 空中拉长 */
  26%  {transform:scale(1.03,.98)}
  36%  {transform:scale(.985,1.02)}  /* 落地小幅回弹 */
  48%  {transform:scale(1,1)}
  100% {transform:scale(1,1)}
}

@keyframes emoji-shadow{
  0%   {transform:scale(1,1);      opacity:.22}
  6%   {transform:scale(1.12,.9);  opacity:.26}
  22%  {transform:scale(.72,.72);  opacity:.10}
  36%  {transform:scale(1.04,.98); opacity:.23}
  56%  {transform:scale(1,1);      opacity:.22}
  100% {transform:scale(1,1);      opacity:.22}
}

/* 高光轻微游走（只在大屏开启，手机上省电） */
@media (prefers-reduced-motion: reduce){
  .anim-emoji,.anim-emoji .body,.anim-emoji .shadow{animation:none}
}

/* ------------------- 盾牌：对勾逐段描出 + 扫光 ------------------- */
.anim-shield .tick{
  stroke-dasharray: 56;
  stroke-dashoffset: 56;
  animation:tick-draw 2.6s cubic-bezier(.22,.9,.24,1) infinite;
}
@keyframes tick-draw{
  0%   {stroke-dashoffset:56}
  18%  {stroke-dashoffset:56}
  34%  {stroke-dashoffset:0}   /* 34% 时画完 */
  82%  {stroke-dashoffset:0}   /* 保持可见 */
  92%  {stroke-dashoffset:56}  /* 快速收起，准备下一轮 */
  100% {stroke-dashoffset:56}
}
.anim-shield .glint{
  stroke-dasharray: 18 60;
  stroke-dashoffset: 78;
  opacity: 0;
  animation:glint-run 2.6s cubic-bezier(.22,.9,.24,1) infinite;
}
@keyframes glint-run{
  0%,40%  {stroke-dashoffset:78; opacity:0}
  46%     {opacity:1}
  62%     {stroke-dashoffset:-16; opacity:1}
  72%,100%{stroke-dashoffset:-16; opacity:0}
}

/* ------------------------- 钥匙：左右轻摆 ------------------------- */
.anim-key .body{
  transform-origin:32% 28%;
  animation:key-swing 2.8s cubic-bezier(.22,.9,.24,1) infinite;
  transform-box:fill-box;
}
@keyframes key-swing{
  0%   {transform:rotate(0deg)}
  14%  {transform:rotate(-11deg)}
  28%  {transform:rotate(8deg)}
  40%  {transform:rotate(-5deg)}
  52%  {transform:rotate(3deg)}
  66%  {transform:rotate(0deg)}
  100% {transform:rotate(0deg)}
}

/* --------------------- 保险箱：转盘转动 + 箱门微开 --------------------- */
/* 转盘：一圈一圈地转，最后"咔"一下停住，像真的在对密码 */
.anim-safe .dial{
  transform-origin:50% 50%;
  animation:safe-dial 3.4s cubic-bezier(.3,.05,.2,1) infinite;
  transform-box:fill-box;
}
@keyframes safe-dial{
  0%   {transform:rotate(0deg)}
  26%  {transform:rotate(132deg)}
  38%  {transform:rotate(122deg)}   /* 回一点，像对准刻度 */
  54%  {transform:rotate(228deg)}
  64%  {transform:rotate(220deg)}
  78%  {transform:rotate(300deg)}   /* 到位 */
  86%  {transform:rotate(300deg)}
  92%  {transform:rotate(288deg)}
  100% {transform:rotate(0deg)}     /* 归位重来 */
}

/* 箱门：最后轻轻开一条缝再关上 */
.anim-safe .door{
  transform-origin:14% 50%;
  animation:safe-door 3.4s cubic-bezier(.3,.05,.2,1) infinite;
  transform-box:fill-box;
}
@keyframes safe-door{
  0%,80%  {transform:rotateY(0deg)}
  88%     {transform:rotateY(-16deg)}
  94%     {transform:rotateY(-12deg)}
  100%    {transform:rotateY(0deg)}
}

/* 转盘上的把手随箱子轻微呼吸 */
.anim-safe .knob{
  animation:safe-knob 3.4s cubic-bezier(.3,.05,.2,1) infinite;
  transform-box:fill-box;
  transform-origin:50% 50%;
}
@keyframes safe-knob{
  0%,76%  {transform:scale(1)}
  84%     {transform:scale(1.08)}
  92%     {transform:scale(1)}
  100%    {transform:scale(1)}
}

.anim-emoji.no-hop{animation:none}

.anim-emoji.sm{
  width:26px;height:26px;margin:0;animation:none;
}
.anim-emoji.sm .body,.anim-emoji.sm .shadow{animation:none}