.data-nft-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 500px;
  /* 优化折叠区渲染成本 */
  content-visibility: auto;
  contain-intrinsic-size: 600px 500px;
}

.data-nft-bg,
.data-nft-overlay,
.data-nft-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.data-nft-bg {
  background: url('/images/bio-dynamic.jpeg') center/cover no-repeat;
  transform: scale(1.02) translate3d(1%, -1%, 0);
  animation: kb 14s ease-in-out infinite;
  z-index: 0;
}

.data-nft-overlay {
  --grad: linear-gradient(180deg, rgba(5, 12, 24, 0.45) 0%, rgba(5, 12, 24, 0.65) 100%);
  --radA: 0.12;
  --rad: radial-gradient(50% 50% at 50% 50%, rgba(20, 30, 120, var(--radA)) 0%, rgba(0, 0, 0, 0) 60%);
  background: var(--grad), var(--rad);
  animation: breathe 11s ease-in-out infinite;
  z-index: 1;
}

.data-nft-canvas {
  width: 100%;
  height: 100%;
  z-index: 2;
}

[data-reduce-motion] .data-nft-bg,
[data-reduce-motion] .data-nft-overlay {
  animation: none;
}

@keyframes kb {
  0% {
    transform: scale(1.02) translate3d(1%, -1%, 0);
  }
  50% {
    transform: scale(1.05) translate3d(-1%, 1%, 0);
  }
  100% {
    transform: scale(1.02) translate3d(1%, -1%, 0);
  }
}

@keyframes breathe {
  0%,
  100% {
    --radA: 0.10;
  }
  50% {
    --radA: 0.18;
  }
}