.ai-button {
  position: relative;
  display: inline-flex;
  padding: 1px;
  border-radius: 999px;
  overflow: hidden;
  text-decoration: none;
}

.ai-button-border {
  position: absolute;
  inset: 0;
  border-radius: 999px;

  background: conic-gradient(
    from 0deg,
    #8e6732,
    #b88d4a,
    #d6b46a,
    #f3dca0,
    #d6b46a,
    #b88d4a,
    #8e6732
  );

  animation: rotateBorder 7s linear infinite;
  opacity: 0.35;
  transition: 0.4s;
  filter: blur(0.5px);
}

.ai-button-content {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 0.6rem;

  padding: 10px 25px;
  border-radius: 999px;

  background: #0f0f0f;
  border: 2px solid rgba(255, 255, 255, 0.08);

  color: rgba(255, 255, 255, 0.8);
  transition: 0.35s;
}

.ai-button-content i {
  color: #d6b46a;
  font-size: 13px;
  transition: 0.35s;
}

.ai-button:hover .ai-button-border {
  opacity: 1;
  animation-duration: 2.2s;
  filter: blur(1px) brightness(1.3);
}

.ai-button:hover .ai-button-content {
  color: #fff;
  border-color: transparent;
  background: #101010;
}

.ai-button:hover i {
  transform: rotate(15deg) scale(1.15);
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.ai-button-border {
  background: conic-gradient(
    from var(--angle),
    #8e6732,
    #b88d4a,
    #d6b46a,
    #fff1b8,
    #d6b46a,
    #b88d4a,
    #8e6732
  );

  animation: spinGradient 6s linear infinite;
}

.ai-button:hover .ai-button-border {
  animation-duration: 1.8s;
}

/* Core Conic Gradient Tracker */
.ai-search-border {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: conic-gradient(
    from var(--angle),
    #8e6732,
    #b88d4a,
    #d6b46a,
    #fff1b8,
    #d6b46a,
    #b88d4a,
    #8e6732
  );
  animation: spinGradient 8s linear infinite;
  opacity: 0.25;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter: blur(1px);
}

/* Target wrapper state when inner inputs take focus */
.ai-search-container:focus-within .ai-search-border {
  opacity: 1;
  animation-duration: 2s;
  filter: blur(2px) brightness(1.2);
}

/* Pulse icon wrapper on search interaction */
.ai-search-container:focus-within .fa-wand-magic-sparkles {
  transform: scale(1.15) rotate(15deg);
  color: #fff1b8;
}

@keyframes spinGradient {
  to {
    --angle: 360deg;
  }
}