/* CSS Loading Test - This should make text red if CSS loads */
.css-test {
  color: red !important;
  background: yellow !important;
  padding: 5px !important;
  border: 2px solid green !important;
}

/* Impactful Metallic Blue Gradients - Dark-Bright-Dark Pattern */
.text-metallic-blue {
  background: linear-gradient(90deg, 
    #2C3E50 0%,     /* Dark steel blue */
    #4A6B82 25%,    /* Medium blue */
    #B8D4E8 50%,    /* Bright highlight */
    #4A6B82 75%,    /* Medium blue */
    #2C3E50 100%    /* Dark steel blue */
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: metallicShine 3s ease-in-out infinite;
  display: inline-block;
}

.text-metallic-blue-elegant {
  background: linear-gradient(90deg, 
    #1A252F 0%,     /* Very dark blue */
    #2C3E50 20%,    /* Dark steel */
    #5A7FA3 40%,    /* Medium blue */
    #B8D4E8 50%,    /* Bright center highlight */
    #5A7FA3 60%,    /* Medium blue */
    #2C3E50 80%,    /* Dark steel */
    #1A252F 100%    /* Very dark blue */
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: elegantMetallicShine 4s ease-in-out infinite;
  display: inline-block;
}

/* Alternative with silver highlights for more dramatic effect */
.text-metallic-blue-dramatic {
  background: linear-gradient(90deg, 
    #1E2A36 0%,     /* Almost black blue */
    #3B5475 25%,    /* Dark blue */
    #E5E5E5 50%,    /* Silver highlight */
    #3B5475 75%,    /* Dark blue */
    #1E2A36 100%    /* Almost black blue */
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: dramaticShine 2s ease-in-out infinite;
  display: inline-block;
}

/* Enhanced Animation Keyframes */
@keyframes metallicShine {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 0%; }
}

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

@keyframes dramaticShine {
  0%, 100% { background-position: 0% 0%; }
  25% { background-position: 50% 0%; }
  75% { background-position: 150% 0%; }
}

/* Force override Tailwind with impactful gradients */
h1.text-metallic-blue-elegant,
h2.text-metallic-blue-elegant,
h3.text-metallic-blue-elegant,
h4.text-metallic-blue-elegant,
strong.text-metallic-blue-elegant,
span.text-metallic-blue-elegant {
  background: linear-gradient(90deg, #1A252F 0%, #2C3E50 20%, #5A7FA3 40%, #B8D4E8 50%, #5A7FA3 60%, #2C3E50 80%, #1A252F 100%) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: elegantMetallicShine 4s ease-in-out infinite !important;
  display: inline-block !important;
}

h1.text-metallic-blue,
h2.text-metallic-blue,
h3.text-metallic-blue,
h4.text-metallic-blue,
strong.text-metallic-blue,
span.text-metallic-blue {
  background: linear-gradient(90deg, #2C3E50 0%, #4A6B82 25%, #B8D4E8 50%, #4A6B82 75%, #2C3E50 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: metallicShine 3s ease-in-out infinite !important;
  display: inline-block !important;
}

/* Alternative solid color approach for testing */
.text-metallic-blue-solid {
  color: #8BB5D9 !important;
  text-shadow: 0 0 10px rgba(139, 181, 217, 0.3);
}

.text-metallic-blue-elegant-solid {
  color: #8BB5D9 !important;
  text-shadow: 0 0 15px rgba(139, 181, 217, 0.5);
}

/* Metallic Blue Background Gradients */
.bg-metallic-blue {
  background: linear-gradient(135deg, 
    rgba(184, 212, 232, 0.1) 0%,
    rgba(139, 181, 217, 0.2) 50%,
    rgba(90, 127, 163, 0.1) 100%
  ) !important;
}

/* Hover effects */
.hover-metallic-blue:hover {
  color: #8BB5D9 !important;
  transition: color 0.3s ease;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
  .text-metallic-blue,
  .text-metallic-blue-elegant {
    color: #8BB5D9 !important;
    -webkit-text-fill-color: #8BB5D9 !important;
  }
}