/* Gradient Border - 动画渐变边框 */
/* 原理: 用 conic-gradient 做背景，内部卡片盖住中心 */

.gradient-border-wrap {
  position: relative;
  padding: 3px;
  border-radius: 18px;
  background: conic-gradient(
    from var(--gb-angle, 0deg),
    #6366f1, #ec4899, #f59e0b, #10b981, #6366f1
  );
  animation: gb-rotate 3s linear infinite;
  display: inline-block;
}

@keyframes gb-rotate {
  to { --gb-angle: 360deg; }
}

@property --gb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.gradient-border-wrap__inner {
  background: #0f172a;
  border-radius: 15px;
  padding: 2rem;
  color: #e2e8f0;
  position: relative;
  z-index: 1;
}

/* 变体 */
.gradient-border-wrap--slow {
  animation-duration: 6s;
}

.gradient-border-wrap--fast {
  animation-duration: 1.5s;
}

.gradient-border-wrap--rainbow {
  background: conic-gradient(
    from var(--gb-angle, 0deg),
    #ff0000, #ff7700, #ffdd00, #00ff00, #0077ff, #7700ff, #ff0077, #ff0000
  );
}

/* 虚线版本 */
.gradient-border-wrap--dashed .gradient-border-wrap__inner {
  background: transparent;
  border: 2px dashed rgba(99, 102, 241, 0.5);
  color: #e2e8f0;
}

.gradient-border-wrap--dashed {
  background: none;
  animation: none;
  padding: 0;
}

.gradient-border-wrap--dashed::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: conic-gradient(
    from var(--gb-angle, 0deg),
    #6366f1, #ec4899, #f59e0b, #10b981, #6366f1
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 2px;
  animation: gb-rotate 3s linear infinite;
}