/* 1. Bottom Layer: Border */
.border-layer {
  background: linear-gradient(270deg, rgba(35, 115, 217, 0.8), rgba(37, 209, 186, 0.8) ,rgba(35, 115, 217, 0.8));
  background-size: 400% 100%;
  animation: borderAnimation 6s ease-in-out forwards;
  padding: 3px;
  margin: -16px;
  border-radius: 8px;
  display: inline-block;
}

/* 2. Mid Layer: Static Background */
.static-bg {
  background: linear-gradient(90deg,#1C3465, #1D366B);
  border-radius: 6px; 
  position: relative;
  overflow: hidden;  
  padding: 12px;
  z-index: 1;
  animation: staticBgAnimation 6s ease-in-out forwards;
}

/* 3. Top Layer: Animated Light Overlay (via pseudo-element) */
.static-bg::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background: linear-gradient(270deg, rgba(83, 173, 255, 0.4),rgba(64, 255, 115, 0.4),rgba(83, 173, 255, 0.4));
  background-size: 400% 100%;
  animation: overlayAnimation 6s ease-in-out forwards;

  z-index: 0;
  pointer-events: none; /* Allow clicks to pass through */
}

.static-bg p {
  position: relative;
  z-index: 1;
}

/* Border gradient animation (position shift) */
@keyframes borderAnimation {
  0%   { background-position: 0% 50%; opacity: 0;}
  5%   {background-position: 20% 50%; opacity: 1;}
  25%  { background-position: 100% 50%; }
  50%  { background-position: 200% 50%; }
  75%  { background-position: 300% 50%; }
  95%  { background-position: 400% 50%; opacity: 1;}
  100% { background-position: 400% 50%; opacity: 0;}
}

/* Overlay gradient animation (position shift) */
@keyframes overlayAnimation {
  0%   { background-position: 0% 50%; opacity: 0;}
  5%   {background-position: 20% 50%; opacity: 1;}
  25%  { background-position: 100% 50%; }
  50%  { background-position: 200% 50%; }
  75%  { background-position: 300% 50%; }
  95%  { background-position: 400% 50%; opacity: 1;}
  100% { background-position: 400% 50%; opacity: 0;}
}

@keyframes staticBgAnimation {
  0%   { background: linear-gradient(90deg,#1C3465, #1D366B); }
  95%  { background: linear-gradient(90deg,#1C3465, #1D366B);}
  100% { background: transparent; }
}
