/* components/ui/liquid-metal-button.css */
.liquid-metal-btn-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 100%;
}

.liquid-metal-btn-perspective {
  perspective: 1000px;
  perspective-origin: 50% 50%;
  width: 100%;
  display: flex;
  justify-content: center;
}

.liquid-metal-btn-container {
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s ease, height 0.4s ease;
  transform: none;
  max-width: 100%;
  will-change: transform, opacity;
}

.liquid-metal-label-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform-style: preserve-3d;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s ease, height 0.4s ease, gap 0.4s ease;
  transform: translateZ(20px);
  z-index: 30;
  pointer-events: none;
  will-change: transform, opacity;
}

.liquid-metal-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(1);
  white-space: nowrap;
  font-family: 'Inter', 'Orbitron', sans-serif;
  text-transform: uppercase;
}

.liquid-metal-inner-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transform-style: preserve-3d;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s ease, height 0.4s ease;
  transform: translateZ(10px) translateY(0) scale(1);
  z-index: 20;
  will-change: transform, opacity;
}

.liquid-metal-inner-bg {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  margin: 2px;
  border-radius: 100px;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s ease, height 0.4s ease, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.liquid-metal-canvas-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transform-style: preserve-3d;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s ease, height 0.4s ease;
  transform: translateZ(0px) translateY(0) scale(1);
  z-index: 10;
  will-change: transform, opacity;
}

.liquid-metal-canvas-container {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s ease, height 0.4s ease, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 36px 14px 0px rgba(0, 0, 0, 0.02), 0px 20px 12px 0px rgba(0, 0, 0, 0.08), 0px 9px 9px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}

.liquid-metal-btn-container.hover .liquid-metal-canvas-container {
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.4), 0px 12px 6px 0px rgba(0, 0, 0, 0.05), 0px 8px 5px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
}

.liquid-metal-btn-container.pressed .liquid-metal-canvas-container {
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}

.liquid-metal-btn-container.pressed .liquid-metal-inner-layer,
.liquid-metal-btn-container.pressed .liquid-metal-canvas-layer {
  transform: translateZ(5px) translateY(1px) scale(0.98);
}

.liquid-metal-btn-container.pressed .liquid-metal-inner-bg {
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.4), inset 0px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.shader-container-exploded {
  border-radius: 100px;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
  opacity: 0.15;
}

.liquid-metal-btn-container.hover .shader-container-exploded {
  opacity: 0.4;
}

.shader-container-exploded canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  border-radius: 100px !important;
}

.liquid-metal-trigger {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  z-index: 40;
  transform-style: preserve-3d;
  transform: translateZ(25px);
  overflow: hidden;
  border-radius: 100px;
}

.liquid-ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  animation: liquid-ripple-animation 0.6s ease-out forwards;
}

@keyframes liquid-ripple-animation {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* ============================================================
   Fallback styles for data-liquid-button before JS executes
   ============================================================ */
[data-liquid-button]:not(.liquid-metal-btn-wrapper) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  background-color: #000000;
  border-radius: 100px;
  font-family: 'Inter', 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  /* Default Dimensions if not inline overridden */
  width: 200px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #6f6f9f;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

[data-liquid-button]:not(.liquid-metal-btn-wrapper)[data-theme="analytics"] {
  color: #4d7c5f;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.3), 0px 0px 0px 2px rgba(10, 15, 25, 0.9), 0px 0px 0px 3px rgba(255, 255, 255, 0.4);
  border: none;
}
[data-liquid-button]:not(.liquid-metal-btn-wrapper)[data-theme="python"] {
  color: #8552d2;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3), 0px 0px 0px 2px rgba(10, 15, 25, 0.9), 0px 0px 0px 3px rgba(255, 255, 255, 0.4);
  border: none;
}
[data-liquid-button]:not(.liquid-metal-btn-wrapper)[data-theme="ml"] {
  color: #36873b;
  box-shadow: 0 0 20px rgba(79, 172, 254, 0.3), 0px 0px 0px 2px rgba(10, 15, 25, 0.9), 0px 0px 0px 3px rgba(255, 255, 255, 0.4);
  border: none;
}
[data-liquid-button]:not(.liquid-metal-btn-wrapper)[data-theme="dl"] {
  color: #9f54b0;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.15), 0px 0px 0px 2px rgba(10, 15, 25, 0.9), 0px 0px 0px 3px rgba(255, 255, 255, 0.4);
  border: none;
}
[data-liquid-button]:not(.liquid-metal-btn-wrapper)[data-theme="fastapi"] {
  color: #599b5b;
  box-shadow: 0 0 20px rgba(5, 196, 107, 0.3), 0px 0px 0px 2px rgba(10, 15, 25, 0.9), 0px 0px 0px 3px rgba(255, 255, 255, 0.4);
  border: none;
}
[data-liquid-button]:not(.liquid-metal-btn-wrapper)[data-theme="genai"] {
  color: #c923c4;
  box-shadow: 0 0 20px rgba(255, 113, 239, 0.3), 0px 0px 0px 2px rgba(10, 15, 25, 0.9), 0px 0px 0px 3px rgba(255, 255, 255, 0.4);
  border: none;
}
[data-liquid-button]:not(.liquid-metal-btn-wrapper)[data-theme="nlp"] {
  color: #cec216;
  box-shadow: 0 0 20px rgba(243, 156, 18, 0.3), 0px 0px 0px 2px rgba(10, 15, 25, 0.9), 0px 0px 0px 3px rgba(255, 255, 255, 0.4);
  border: none;
}