/* Animated liquid chrome border for CTA buttons */
@property --chrome-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes chromeRotate {
  to { --chrome-angle: 360deg; }
}

.chrome-wrap {
  position: relative;
  display: inline-flex;
  padding: 2.5px;
  border-radius: 10px;
  background: conic-gradient(
    from var(--chrome-angle),
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.25) 10%,
    rgba(200,220,255,0.3) 15%,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.18) 35%,
    rgba(220,200,255,0.25) 40%,
    rgba(255,255,255,0.03) 50%,
    rgba(255,255,255,0.15) 60%,
    rgba(200,255,220,0.18) 65%,
    rgba(255,255,255,0.04) 75%,
    rgba(255,255,255,0.25) 85%,
    rgba(255,200,200,0.15) 90%,
    rgba(255,255,255,0.03) 100%
  );
  animation: chromeRotate 4s linear infinite;
}

/* Blur glow behind */
.chrome-wrap::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  background: conic-gradient(
    from var(--chrome-angle),
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.25) 10%,
    rgba(200,220,255,0.3) 15%,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.18) 35%,
    rgba(220,200,255,0.25) 40%,
    rgba(255,255,255,0.03) 50%,
    rgba(255,255,255,0.15) 60%,
    rgba(200,255,220,0.18) 65%,
    rgba(255,255,255,0.04) 75%,
    rgba(255,255,255,0.25) 85%,
    rgba(255,200,200,0.15) 90%,
    rgba(255,255,255,0.03) 100%
  );
  filter: blur(8px);
  opacity: 0.15;
  z-index: -1;
  animation: chromeRotate 4s linear infinite;
  pointer-events: none;
}

.chrome-wrap:hover::after {
  opacity: 0.25;
}

/* Button inside the wrap */
.chrome-wrap > a,
.chrome-wrap > button {
  background: rgba(0,0,0,0.95) !important;
  border: none !important;
  border-radius: 8px !important;
  position: relative;
  z-index: 1;
  width: 100%;
  box-shadow: none !important;
}

.chrome-wrap:hover > a,
.chrome-wrap:hover > button {
  background: rgba(0,0,0,0.9) !important;
  color: #fff !important;
}

/* Full-width variant for card buttons */
.chrome-wrap.chrome-full {
  display: flex;
  width: 100%;
}