// 组合类驱动的通用卡片 hover 能力。
// 仅在客户端完成挂载后生效，脚本失败时保留组件原有表现。
.card-hover.is-card-hover-ready
  position: relative
  --card-hover-mouse-x: 50%
  --card-hover-mouse-y: 50%
  --card-hover-rotate-x: 0deg
  --card-hover-rotate-y: 0deg

if hexo-config('features.card_hover.tilt')
  .card-hover.is-card-hover-ready.card-hover--tilt
    transform: perspective(900px) translate3d(0, 0, 0) rotateX(var(--card-hover-rotate-x)) rotateY(var(--card-hover-rotate-y))
    transform-origin: center
    transition: transform .25s ease-out, box-shadow .2s ease-out

  .card-hover.is-card-hover-ready.card-hover--tilt.is-card-hover-active
    transform: perspective(900px) translate3d(0, -2px, 0) rotateX(var(--card-hover-rotate-x)) rotateY(var(--card-hover-rotate-y))
    transition-duration: .08s, .2s
    will-change: transform

if hexo-config('features.card_hover.spotlight')
  .card-hover__spotlight
    position: absolute
    inset: 0
    z-index: 2
    border-radius: inherit
    corner-shape: inherit
    background: radial-gradient(circle at var(--card-hover-mouse-x) var(--card-hover-mouse-y), var(--card-hover-spotlight-color, rgba(255, 255, 255, .25)), transparent 80%)
    opacity: 0
    pointer-events: none
    transition: opacity .25s ease-out

  .card-hover.is-card-hover-ready.card-hover--spotlight
    &.is-card-hover-active, &:focus-within
      > .card-hover__spotlight
        opacity: .6

if hexo-config('features.card_hover.tilt')
  // Reveal 使用外层 .post-card-wrap 的 transform；倾斜只作用于内层卡片。
  // 启用插件时把同尺寸包装器的阴影移到卡片本体，使阴影随 3D transform 移动。
  .post-list:not(.topic) .post-card-wrap
    box-shadow: none

  .post-list:not(.topic) .post-card.card-hover,
  .post-list.wiki .wiki-card.card-hover
    box-shadow: $boxshadow-card

  .post-list.wiki .post-card-wrap
    box-shadow: none

  // link/grid 原本通过 hoverable-card() 写入 transform；显式组合类接管后统一合成倾斜与上浮。
  .md-text .link-card.card-hover.card-hover--tilt.is-card-hover-ready,
  .tag-plugin.grid[bg='card'] > .cell.card-hover.card-hover--tilt.is-card-hover-ready
    transform: perspective(900px) translate3d(0, 0, 0) rotateX(var(--card-hover-rotate-x)) rotateY(var(--card-hover-rotate-y))
    &.is-card-hover-active
      transform: perspective(900px) translate3d(0, -2px, 0) rotateX(var(--card-hover-rotate-x)) rotateY(var(--card-hover-rotate-y))

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce)
  .card-hover.is-card-hover-ready.card-hover--tilt,
  .card-hover.is-card-hover-ready.card-hover--tilt.is-card-hover-active,
  .md-text .link-card.card-hover.card-hover--tilt.is-card-hover-ready,
  .tag-plugin.grid[bg='card'] > .cell.card-hover.card-hover--tilt.is-card-hover-ready
    transform: none
    transition: none
  .card-hover.is-card-hover-ready.card-hover--spotlight > .card-hover__spotlight
    opacity: 0