/* ==========================================================================
   Vivid Buttons — prefix: .vb-*
   Conic-gradient rotating border, glass fill, lift-on-hover.
   1:1 port from dev.vividwalls.eu
   ========================================================================== */

@keyframes vb-border-rotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.vb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: none;
  border-radius: var(--vivid-radius-lg);
  font-family: var(--vivid-font-body);
  font-weight: 800;
  font-size: 1rem;
  color: var(--vivid-ink);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: transform var(--vivid-dur-fast) ease,
              box-shadow var(--vivid-dur-fast) ease;
  will-change: transform;
}

/* Rotating conic-gradient layer */
.vb-btn::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 260%;
  aspect-ratio: 1;
  background: var(--vivid-gradient-conic);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: vb-border-rotate 4s linear infinite;
  z-index: -2;
  pointer-events: none;
}

/* Glass fill on top of rotating border */
.vb-btn::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(255, 224, 189, 0.88) 0%,
    rgba(253, 205, 215, 0.86) 35%,
    rgba(233, 213, 255, 0.86) 70%,
    rgba(199, 222, 255, 0.88) 100%);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  z-index: -1;
  pointer-events: none;
}

.vb-btn:hover { transform: translateY(-2px) scale(1.02); }
.vb-btn:hover::before { animation-duration: 1.6s; }

/* Primary — warm gamut (peach → coral → pink) */
.vb-btn-primary { box-shadow: var(--vivid-shadow-primary); }
.vb-btn-primary::after {
  background: linear-gradient(135deg,
    rgba(255, 232, 196, 0.90) 0%,
    rgba(255, 205, 178, 0.88) 40%,
    rgba(253, 194, 210, 0.88) 75%,
    rgba(250, 176, 200, 0.90) 100%);
}
.vb-btn-primary:hover { box-shadow: var(--vivid-shadow-primary-hover); }

/* Secondary — cool gamut (lavender → blue → cyan) */
.vb-btn-secondary { box-shadow: var(--vivid-shadow-secondary); }
.vb-btn-secondary::after {
  background: linear-gradient(135deg,
    rgba(226, 214, 255, 0.90) 0%,
    rgba(207, 214, 255, 0.88) 40%,
    rgba(199, 226, 255, 0.88) 75%,
    rgba(191, 238, 248, 0.90) 100%);
}
.vb-btn-secondary:hover { box-shadow: var(--vivid-shadow-secondary-hover); }

/* Ghost — no rotating border, plain translucent chip */
.vb-btn-ghost::before { display: none; }
.vb-btn-ghost::after {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(15,23,42,0.12);
}
.vb-btn-ghost:hover::after { background: rgba(255,255,255,0.88); }

/* Underline — text button with gradient bar */
.vb-btn-underline {
  display: inline-block;
  padding: 6px 2px;
  background: transparent;
  border: none;
  color: var(--vivid-ink);
  font-family: var(--vivid-font-body);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  background-image: var(--vivid-gradient-cta);
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: transform var(--vivid-dur-fast) ease;
}
.vb-btn-underline:hover { transform: translateY(-1px); }