.gradient-border-animated {
  position: relative;
  padding: 3px;
  border-radius: 32px;
  background: linear-gradient(90deg, #081a40, #4b2aad, #ec2b7b, #081a40);
  background-size: 300% 300%;
  animation: gradient-border 6s ease infinite;
}
@keyframes gradient-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ===== GENERIC REVEAL SYSTEM ===== */
.reveal {
  opacity: 0;
  transition:
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s ease;
  will-change: transform, opacity;
}

.reveal--up {
  transform: translateY(40px);
}

.reveal--left {
  transform: translateX(-60px);
}

.reveal--right {
  transform: translateX(60px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.reveal-delay-100 {
  transition-delay: 100ms;
}
.reveal-delay-200 {
  transition-delay: 200ms;
}
.reveal-delay-300 {
  transition-delay: 300ms;
}

.blue-band {
  opacity: 0;
  transition:
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s ease;
  will-change: transform, opacity;
}
.blue-band--right {
  transform: translateX(60px);
}
.blue-band--left {
  transform: translateX(-60px);
}