/* ═══════════════════════════════════════════
   LIQUID METAL BUTTON + LEGACY STYLES
   ═══════════════════════════════════════════ */

/* Liquid Metal Button with RGB Animation */
.liquid-metal-btn {
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.liquid-metal-btn:hover {
  transform: scale(1.08);
}

/* Animated RGB Border */
.liquid-metal-btn__outline::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--rgb-angle, 0deg),
    hsl(0deg 100% 60%),
    hsl(60deg 100% 60%),
    hsl(120deg 100% 60%),
    hsl(180deg 100% 60%),
    hsl(240deg 100% 60%),
    hsl(300deg 100% 60%),
    hsl(360deg 100% 60%)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  animation: rgb-rotate 3s linear infinite;
  filter: brightness(1.2) saturate(1.5);
}

@keyframes rgb-rotate {
  from {
    --rgb-angle: 0deg;
    filter: brightness(1.2) saturate(1.5) hue-rotate(0deg);
  }
  to {
    --rgb-angle: 360deg;
    filter: brightness(1.2) saturate(1.5) hue-rotate(360deg);
  }
}