.button {
  --float-speed: 3s;
  --float-amplitude: 10px;
  --shadow-size: 20px;
  --shadow-opacity: 0.3;

  position: relative;
  padding: 0.875rem 2rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: inherit;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  overflow: hidden;
  animation: float var(--float-speed) ease-in-out infinite;
  box-shadow:
    0 var(--shadow-size) calc(var(--shadow-size) * 1.5) rgba(102, 126, 234, var(--shadow-opacity)),
    0 calc(var(--shadow-size) * 0.5) var(--shadow-size) rgba(118, 75, 162, calc(var(--shadow-opacity) * 0.5));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(var(--float-amplitude) * -1));
  }
}

.button:hover {
  animation-play-state: paused;
  transform: translateY(calc(var(--float-amplitude) * -0.5)) scale(1.02);
  box-shadow:
    0 calc(var(--shadow-size) * 1.5) calc(var(--shadow-size) * 2) rgba(102, 126, 234, calc(var(--shadow-opacity) * 1.5)),
    0 var(--shadow-size) calc(var(--shadow-size) * 1.5) rgba(118, 75, 162, calc(var(--shadow-opacity) * 0.8));
}

.button:active {
  transform: translateY(calc(var(--float-amplitude) * 0.5)) scale(0.98);
  box-shadow:
    0 calc(var(--shadow-size) * 0.5) var(--shadow-size) rgba(102, 126, 234, calc(var(--shadow-opacity) * 0.8)),
    0 calc(var(--shadow-size) * 0.25) calc(var(--shadow-size) * 0.5) rgba(118, 75, 162, calc(var(--shadow-opacity) * 0.4));
  transition: all 0.1s ease-out;
}

.button:disabled {
  animation: none;
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow:
    0 var(--shadow-size) calc(var(--shadow-size) * 1.5) rgba(0, 0, 0, 0.1);
}

/* Shine effect on hover */
.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: skewX(-25deg);
  transition: left 0.6s ease-out;
  pointer-events: none;
}

.button:hover::before {
  left: 150%;
}

/* Gradient animation */
.button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 25%,
    #f093fb 50%,
    #764ba2 75%,
    #667eea 100%
  );
  background-size: 300% 300%;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.button:hover::after {
  opacity: 1;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Content */
.content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  font-weight: 600;
}