:root {
  /* We define the gradient ONCE here. 
     Order: Dark -> Mid -> Light -> Mid -> Dark 
     This ensures a perfectly smooth loop without harsh edges.
  */
  --brand-gradient: linear-gradient(
    45deg, 
    #113f67, 
    #38598b, 
    #a2a8d3, 
    #38598b, 
    #113f67
  );
}

/* Shared Animation Definition 
   Moving the background position slowly creates the "shimmer" effect.
*/
@keyframes subtle-shimmer {
  0% { background-position: left; }
  50% { background-position: right; }
  100% { background-position: left; }
}

/* --- TEXT STYLING --- */
.animate-text-gradient {
  background: var(--brand-gradient);
  background-size: 200% 200%; /* Larger size = smoother transition */
  
  /* The Magic: Clips the background to the text shape */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Text must be transparent to show the background */
  color: transparent; 
  
  /* 12s is very slow. It breathes rather than flashes. */
  animation: subtle-shimmer 10s ease infinite;
}

/* --- BUTTON STYLING --- */
.animate-button-gradient {
  background: var(--brand-gradient);
  background-size: 300% 300%;
  color: white; /* Ensure text is readable against the dark parts of the gradient */
  border: none;
  
  /* 8s is slightly faster than text to invite interaction, but still calm */
  animation: subtle-shimmer 10s ease infinite;
  
  transition: opacity 0.3s ease, transform 0.2s ease;
}

/* On hover, we don't change the gradient (that's jarring). 
   We just brighten it slightly or lift the button. */
.animate-button-gradient:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}