.animated-gradient-border-effect {
  position: relative;
  border-radius: 16px;

  border: 2px solid var(--color-gray-500); /* 默认灰色边框 */
  transition: border-color 0.3s ease-in-out;
}

.group:hover .animated-gradient-border-effect {
  border-color: var(--color-primary-500); /* hover 时红色边框 */
}

.no-gradient-background {
  background: var(
    --Gradient-Radial-Sunrise,
    radial-gradient(
      141.42% 141.42% at 0% 100%,
      #fe080c 0%,
      #ff8c40 36%,
      #fd7801 62.29%,
      #ff01bb 100%
    )
  );
  background-size: 100% 100%;
  position: relative;
  z-index: 1; /* 确保整个元素有合适的z-index */
}

.no-gradient-background:hover {
  background: var(
    --Gradient-Radial-Sunrise,
    radial-gradient(
      141.42% 141.42% at 0% 100%,
      #fe080c 0%,
      #ff8c40 36%,
      #fd7801 62.29%,
      #ff01bb 100%
    )
  );
  background-size: 100% 100%;
  position: relative;
  z-index: 1; /* 确保整个元素有合适的z-index */
}

.no-gradient-background:active {
  background: var(
    --Gradient-Radial-Sunrise,
    radial-gradient(
      141.42% 141.42% at 0% 100%,
      #fe080c 0%,
      #ff8c40 36%,
      #fd7801 62.29%,
      #ff01bb 100%
    )
  );
  background-size: 100% 100%;
  position: relative;
  z-index: 1; /* 确保整个元素有合适的z-index */
}

/* CTA按钮渐变 */
.gradient-background {
  background: var(
    --Gradient-Radial-Sunrise,
    radial-gradient(
      141.42% 141.42% at 0% 100%,
      #fe080c 0%,
      #ff8c40 36%,
      #fd7801 62.29%,
      #ff01bb 100%
    )
  );
  background-size: 100% 100%;
  position: relative;
  z-index: 1; /* 确保整个元素有合适的z-index */
}

.gradient-background:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(
    --Gradient-Radial-Sunrise,
    radial-gradient(
      141.42% 141.42% at 0% 100%,
      #ff01bb 0%,
      #fd7801 36%,
      #ff8c40 62.29%,
      #fe080c 100%
    )
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: inherit;
  z-index: -1; /* 将伪元素置于内容之下 */
}

.gradient-background:hover:before {
  opacity: 1;
}