/* ============================================================
   首页卡片（.zhuige-base-list）· 悬停微交互
   ------------------------------------------------------------
   效果参考 steamdownload.cn/games 的游戏卡片：鼠标移入卡片后，
   类型小图标会「依次」向上跳动，同时角标、标签、尺寸、浏览数
   按不同延迟做形变（摇晃 / 果冻 / 挤压 / 弹跳），形成有节奏的
   一整串联动，而不是单个图标自己抖。

   生效条件：真实鼠标设备（hover:hover）+ 用户未开启「减少动态效果」。
   手机上（hover:none）和系统开了减弱动效时不会执行任何动画。
   ============================================================ */

/* ---------- 关键帧 ---------- */

/* 图标：向上跳一下再落回，末段带轻微旋转 */
@keyframes lyw-icon-hop {
  0%,
  100% { transform: none; }
  40%  { transform: translateY(-5px) rotate(-3deg); }
  70%  { transform: translateY(1px); }
}

/* 角标：左右摇晃 */
@keyframes lyw-mark-shake {
  0%,
  100% { transform: none; }
  20%  { transform: rotate(6deg) scale(1.07); }
  45%  { transform: rotate(-8deg); }
  70%  { transform: rotate(3deg); }
  85%  { transform: rotate(-2deg); }
}

/* 标签：果冻式挤压回弹 */
@keyframes lyw-tag-jelly {
  0%,
  100% { transform: none; }
  30%  { transform: scale(1.12, .88); }
  55%  { transform: scale(.94, 1.06); }
  80%  { transform: scale(1.03, .97); }
}

/* 尺寸胶囊：横向撑开、纵向压扁 */
@keyframes lyw-size-squish {
  0%,
  100% { transform: none; }
  30%  { transform: scale(1.14, .84); }
  60%  { transform: scale(.94, 1.08); }
  85%  { transform: scale(1.02, .98); }
}

/* 浏览数胶囊：整体弹跳 */
@keyframes lyw-view-bounce {
  0%,
  100% { transform: none; }
  30%  { transform: translateY(-6px); }
  55%  { transform: translateY(0) scale(1.06, .94); }
  75%  { transform: translateY(-2px); }
}

/* 浏览数里的小眼睛图标：跟着上下小幅摆动 */
@keyframes lyw-view-icon-drop {
  0%,
  100% { transform: none; }
  30%  { transform: translateY(-2px); }
  55%  { transform: translateY(3px); }
  75%  { transform: translateY(0); }
}

/* 日期：左右轻推一下 */
@keyframes lyw-date-nudge {
  0%,
  100% { transform: none; }
  35%  { transform: translateX(-4px); }
  65%  { transform: translateX(2px); }
}

/* ---------- 悬停编排 ---------- */
/* 默认开启（fail-open）：只在文件末尾「明确检测到 reduce」时才关闭。
   老浏览器不认识 prefers-reduced-motion 特性，用 no-preference 会把整块跳过。 */
  /* 1. 类型图标：整排依次起跳（错峰 40ms，形成一道波浪）
     现在图标外面有一层玻璃底板，动画挂在 .gi 上（整个徽章一起跳），
     比只让内部 svg 动更像一个整体；悬停单枚时的放大由 genre-icons.css 负责 */
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi {
    animation: lyw-icon-hop .42s cubic-bezier(.3, .7, .4, 1) backwards;
  }
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:nth-child(1) { animation-delay: .04s; }
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:nth-child(2) { animation-delay: .08s; }
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:nth-child(3) { animation-delay: .12s; }
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:nth-child(4) { animation-delay: .16s; }
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:nth-child(5) { animation-delay: .20s; }
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:nth-child(6) { animation-delay: .24s; }
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:nth-child(7) { animation-delay: .28s; }
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi:nth-child(n+8) { animation-delay: .28s; }

  /* 2. 「今日新增 / 更新 / 新作 / 热门」角标：摇晃 */
  .zhuige-list-container .zhuige-base-list:hover .zhuige-list-mark span {
    animation: lyw-mark-shake .62s ease-in-out;
  }

  /* 3. 卡片标签（必玩大作 / 精品小游…）：果冻 */
  .zhuige-list-container .zhuige-base-list:hover .zg-card-tags span {
    animation: lyw-tag-jelly .55s ease-out .04s;
  }

  /* 4. 封面右下角尺寸：挤压 */
  .zhuige-list-container .zhuige-base-list:hover .zg-size-pill {
    animation: lyw-size-squish .5s ease-out .18s;
  }

  /* 5. 封面右上角浏览数：弹跳，内部小图标跟着摆 */
  .zhuige-list-container .zhuige-base-list:hover .zg-view-pill {
    animation: lyw-view-bounce .55s ease-out .24s;
  }
  .zhuige-list-container .zhuige-base-list:hover .zg-view-pill svg {
    animation: lyw-view-icon-drop .55s ease-in-out .24s;
  }

  /* 6. 日期：轻推 */
  .zhuige-list-container .zhuige-base-list:hover .zg-card-date {
    animation: lyw-date-nudge .5s ease-out .09s;
  }

/* ---------- 仅当用户明确要求「减少动态效果」时才关闭 ---------- */
@media (prefers-reduced-motion: reduce) {
  .zhuige-list-container .zhuige-base-list:hover .zg-genre-icons .gi,
  .zhuige-list-container .zhuige-base-list:hover .zhuige-list-mark span,
  .zhuige-list-container .zhuige-base-list:hover .zg-card-tags span,
  .zhuige-list-container .zhuige-base-list:hover .zg-size-pill,
  .zhuige-list-container .zhuige-base-list:hover .zg-view-pill,
  .zhuige-list-container .zhuige-base-list:hover .zg-view-pill svg,
  .zhuige-list-container .zhuige-base-list:hover .zg-card-date {
    animation: none !important;
  }
}