/* Gold metallic shine effect for "real time voice capture" */
.gold-shine {
  color: #FFD700;
  font-weight: bold;
  position: relative;
  display: inline-block;
  background: linear-gradient(
    to right, 
    #e0a800 0,    /* Medium gold - not too dark, not too light */
    #f5c935 22%,  /* Brighter gold */
    #FFFF00 45%,  /* Light gold */
    #FF4500 50%,  /* Pure white highlight at center */
    #FFFF00 55%,  /* Light gold */
    #f5c935 78%,  /* Brighter gold */
    #e0a800 100%  /* Medium gold - not too dark, not too light */
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-shine 4s linear infinite;
}

@keyframes gold-shine {
  to {
    background-position: 200% center;
  }
}

/* Blue shine with pulse effect - alternative option */
.blue-pulse-shine {
  color: #ff8c00;
  position: relative;
  display: inline-block;
  text-shadow: 0 0 5px rgba(51, 204, 255, 0.5);
  animation: pulse-shine 2s infinite;
}

@keyframes pulse-shine {
  0%, 100% {
    color: ff8c00;
    text-shadow: 0 0 5px rgba(51, 204, 255, 0.5);
  }
  50% {
    color: #00e6ff;
    text-shadow: 0 0 15px rgba(0, 230, 255, 0.8), 0 0 20px rgba(0, 230, 255, 0.5);
  }
}

/* Rainbow shine effect - another option */
.rainbow-shine {
  display: inline-block;
  position: relative;
  color: #f35626;
  background-image: linear-gradient(92deg, #f35626, #feab3a, #599eff, #a155da);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-hue 6s infinite linear;
  background-size: 400% 100%;
}

@keyframes rainbow-hue {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 400% 50%;
  }
}

/* Elegant sweep shine - subtle option */
.sweep-shine {
  position: relative;
  color: #FFFF00;
  display: inline-block;
  overflow: hidden;
}

.sweep-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 0, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: sweep 3s infinite;
}

@keyframes sweep {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}