/* p3.65 一:动态图标封面(第四套封面系统)——itshover 式设计语言的原生
   CSS 重写(只学动画设计,不搬它的 React/Motion 运行时)。图标本体是
   assets/icons/animated/ 下的本地化 stroke SVG(和 Lucide 静态图标同一
   套 24×24/currentColor 视觉语言),可动部件带 an-{icon}__{part} 类,
   这个文件按类名驱动。

   交互契约(Collin 定):
   ① 静止态 = 动画的最终帧——所有 keyframes 的 100% 都回到恒等姿态
      (和基础样式逐像素一致),平时看到的就是"已经播完的样子",不是一
      直在动;
   ② hover 播放一次:animation-iteration-count 1,播完停在最终帧;离
      开再悬停因为 :hover 重新匹配而自然重播(纯 CSS 重触发,零 JS);
   ③ 触发面和 p3.58 B3a 的 hover 微动画同一批语境(story/hero/row/
      post-icon/playlist 卡片级 hover),外加 .cover--has-anim:hover
      兜底(vcard/mini 等不在卡片选择器里的语境,封面自身被悬停也算);
   ④ 全部只用 transform/opacity 合成层属性,任何尺寸下不掉帧;尺寸跟
      随 .cover-icon 的既有分档表(svg 1em),这个文件不写尺寸;
   ⑤ prefers-reduced-motion / 无 hover 设备(手机 touch)= 整个文件
      不生效,静止最终帧照常显示(不缺失、不半截动画)。 */

/* transform 基准:SVG 子元素的 transform-origin 默认相对 viewBox,配
   合 fill-box 才是"相对这个部件自己的包围盒",铃铛绕顶、指针绕中心这
   类直觉写法才成立。基础态就设好,hover 态只改 animation。 */
.cover-anim .an-bell__body,
.cover-anim .an-bell__clapper,
.cover-anim .an-heart__shape,
.cover-anim .an-star__shape,
.cover-anim .an-rocket__ship,
.cover-anim .an-rocket__flame,
.cover-anim .an-music__note,
.cover-anim .an-chat__bubble,
.cover-anim .an-chat__dot,
.cover-anim .an-camera__body,
.cover-anim .an-camera__lens,
.cover-anim .an-sun__core,
.cover-anim .an-sun__rays,
.cover-anim .an-rain__cloud,
.cover-anim .an-rain__drop,
.cover-anim .an-book__right,
.cover-anim .an-zap__bolt,
.cover-anim .an-compass__needle {
  transform-box: fill-box;
}
.cover-anim .an-bell__body { transform-origin: 50% 0%; }
.cover-anim .an-bell__clapper { transform-origin: 50% 0%; }
.cover-anim .an-heart__shape,
.cover-anim .an-star__shape,
.cover-anim .an-camera__lens,
.cover-anim .an-sun__core,
.cover-anim .an-sun__rays,
.cover-anim .an-zap__bolt,
.cover-anim .an-compass__needle { transform-origin: 50% 50%; }
.cover-anim .an-rocket__flame { transform-origin: 50% 0%; }
.cover-anim .an-music__note { transform-origin: 50% 100%; }
.cover-anim .an-chat__dot { transform-origin: 50% 100%; }
.cover-anim .an-book__right { transform-origin: 0% 50%; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  /* 铃铛:整铃绕顶摆动衰减归位,铃锤反向甩动 */
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--bell .an-bell__body {
    animation: an-bell-swing 900ms cubic-bezier(.36, .07, .19, .97) 1 both;
  }
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--bell .an-bell__clapper {
    animation: an-bell-clapper 900ms cubic-bezier(.36, .07, .19, .97) 1 both;
  }
  @keyframes an-bell-swing {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(14deg); }
    40% { transform: rotate(-11deg); }
    60% { transform: rotate(7deg); }
    80% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
  }
  @keyframes an-bell-clapper {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(-20deg); }
    40% { transform: rotate(14deg); }
    60% { transform: rotate(-8deg); }
    100% { transform: rotate(0deg); }
  }

  /* 爱心:两跳心跳(重-轻),归位 */
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--heart .an-heart__shape {
    animation: an-heart-beat 800ms ease-in-out 1 both;
  }
  @keyframes an-heart-beat {
    0% { transform: scale(1); }
    25% { transform: scale(1.28); }
    45% { transform: scale(1); }
    65% { transform: scale(1.14); }
    100% { transform: scale(1); }
  }

  /* 星星:带一点反向蓄力转 72°——五角星转一个角(72°)后与自身重合,
     最终帧 = 静止帧,天然满足"停在最终态" */
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--star .an-star__shape {
    animation: an-star-spin 800ms cubic-bezier(.3, .9, .3, 1.1) 1 both;
  }
  @keyframes an-star-spin {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-10deg) scale(.94); }
    70% { transform: rotate(76deg) scale(1.1); }
    100% { transform: rotate(72deg) scale(1); }
  }

  /* 火箭:箭体蓄力上窜回位,火焰拉长收束 */
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--rocket .an-rocket__ship {
    animation: an-rocket-lift 850ms cubic-bezier(.3, .8, .3, 1) 1 both;
  }
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--rocket .an-rocket__flame {
    animation: an-rocket-flame 850ms ease-in-out 1 both;
  }
  @keyframes an-rocket-lift {
    0% { transform: translateY(0); }
    30% { transform: translateY(1px); }
    65% { transform: translateY(-2.4px); }
    100% { transform: translateY(0); }
  }
  @keyframes an-rocket-flame {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    35% { transform: scaleY(.45); opacity: .7; }
    65% { transform: scaleY(1.5); opacity: 1; }
    82% { transform: scaleY(.8); }
  }

  /* 音乐:音符绕底部摇摆两拍 */
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--music .an-music__note {
    animation: an-music-sway 900ms ease-in-out 1 both;
  }
  @keyframes an-music-sway {
    0% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(-8deg) translateY(-1px); }
    55% { transform: rotate(5deg); }
    80% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg) translateY(0); }
  }

  /* 对话:三个点依次弹跳(打字中…读一遍就停),气泡轻轻一收 */
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--message-circle .an-chat__dot {
    animation: an-chat-hop 640ms ease-in-out 1 both;
  }
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--message-circle .an-chat__dot--2 { animation-delay: 110ms; }
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--message-circle .an-chat__dot--3 { animation-delay: 220ms; }
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--message-circle .an-chat__bubble {
    animation: an-chat-bubble 900ms ease-out 1 both;
  }
  @keyframes an-chat-hop {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-2px); }
  }
  @keyframes an-chat-bubble {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.03); }
  }

  /* 相机:镜头快门一收一放 */
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--camera .an-camera__lens {
    animation: an-camera-shutter 700ms cubic-bezier(.3, .8, .3, 1.1) 1 both;
  }
  @keyframes an-camera-shutter {
    0% { transform: scale(1); }
    30% { transform: scale(.7); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
  }

  /* 太阳:光芒转 45° 落位,光心呼吸 */
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--sun .an-sun__rays {
    animation: an-sun-rotate 900ms cubic-bezier(.3, .9, .3, 1.05) 1 both;
  }
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--sun .an-sun__core {
    animation: an-sun-core 900ms ease-in-out 1 both;
  }
  @keyframes an-sun-rotate {
    0% { transform: rotate(0deg); }
    70% { transform: rotate(50deg); }
    100% { transform: rotate(45deg); }
  }
  @keyframes an-sun-core {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
  }

  /* 雨云:云身轻浮,雨滴依次下落淡出再浮现(最终帧 = 原位全显) */
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--cloud-rain .an-rain__cloud {
    animation: an-rain-cloud 1s ease-in-out 1 both;
  }
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--cloud-rain .an-rain__drop {
    animation: an-rain-fall 640ms ease-in 1 both;
  }
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--cloud-rain .an-rain__drop--2 { animation-delay: 130ms; }
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--cloud-rain .an-rain__drop--3 { animation-delay: 260ms; }
  @keyframes an-rain-cloud {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-1px); }
  }
  @keyframes an-rain-fall {
    0% { transform: translateY(0); opacity: 1; }
    70% { transform: translateY(2.5px); opacity: .15; }
    71% { transform: translateY(0); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

  /* 阅读:右页沿书脊翻过去再翻回来 */
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--book-open .an-book__right {
    animation: an-book-flip 900ms cubic-bezier(.4, 0, .3, 1) 1 both;
  }
  @keyframes an-book-flip {
    0% { transform: scaleX(1); }
    45% { transform: scaleX(.08); }
    100% { transform: scaleX(1); }
  }

  /* 闪电:电流脉冲两闪 + 微放大 */
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--zap .an-zap__bolt {
    animation: an-zap-flash 700ms ease-in-out 1 both;
  }
  @keyframes an-zap-flash {
    0% { opacity: 1; transform: scale(1); }
    18% { opacity: .2; transform: scale(1.04); }
    36% { opacity: 1; }
    54% { opacity: .35; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
  }

  /* 罗盘:指针疯转一圈过冲回正(360° = 0°,最终帧 = 静止帧) */
  html[data-theme-style="appstore"] :is(.story-card, .hero, .article-row, .post-icon, .playlist-card, .cover--has-anim):hover .cover-anim--compass .an-compass__needle {
    animation: an-compass-spin 1s cubic-bezier(.25, .8, .3, 1) 1 both;
  }
  @keyframes an-compass-spin {
    0% { transform: rotate(0deg); }
    60% { transform: rotate(395deg); }
    80% { transform: rotate(352deg); }
    100% { transform: rotate(360deg); }
  }
}