/* ============================================================
   V22 Spotlight Card + Border Glow · ReactBits 原生页面适配层
   ============================================================ */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .v22-pointer-card {
    --v22-mouse-x: 50%;
    --v22-mouse-y: 50%;
    --v22-edge-opacity: 0;
  }

  .v22-card-spotlight,
  .v22-card-edge-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  .v22-card-spotlight {
    z-index: 21;
    background: radial-gradient(
      circle 360px at var(--v22-mouse-x) var(--v22-mouse-y),
      rgba(205, 242, 255, .22),
      rgba(73, 169, 255, .09) 34%,
      transparent 72%
    );
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity 420ms ease;
  }

  .v22-pointer-card.is-v22-pointer-active .v22-card-spotlight {
    opacity: .72;
  }

  .v22-card-edge-glow {
    z-index: 22;
    padding: 3px;
    background: radial-gradient(
      circle 190px at var(--v22-mouse-x) var(--v22-mouse-y),
      rgba(255, 255, 255, 1) 0,
      rgba(128, 213, 255, .96) 22%,
      rgba(36, 139, 255, .72) 46%,
      rgba(27, 111, 230, .2) 66%,
      transparent 78%
    );
    opacity: var(--v22-edge-opacity);
    filter:
      drop-shadow(0 0 7px rgba(217, 247, 255, .96))
      drop-shadow(0 0 16px rgba(50, 159, 255, .78));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity 120ms ease-out;
  }

  .v22-pointer-card:not(.is-v22-pointer-active) .v22-card-edge-glow {
    opacity: 0;
    transition-duration: 520ms;
  }
}