/* ======================= */
/* 1. RAINBOW BUTTON - SEAMLESS, ULTRA-SLOW FLOW */
/* ======================= */
.rainbow-button {
  background: linear-gradient(90deg,
    #ff005e, #ff9900, #ffee00, #33dd00, #0099ff, #6633ff, #ff00cc, #ff005e);
  background-size: 400% 100%;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: gradientShift 80s linear infinite; /* slowed 4× */
}

.rainbow-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: -400% 50%; }
}

/* ======================= */
/* 2. RAINBOW DIVIDER - MATCHING ULTRA-SLOW FLOW */
/* ======================= */
.rainbow-divider {
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg,
    #ff005e 0%,
    #ff9900 15%,
    #ffee00 30%,
    #33dd00 50%,
    #0099ff 70%,
    #6633ff 85%,
    #ff00cc 100%,
    #ff005e 115%);
  border-radius: 1px;
  margin: 2rem 0;
  animation: flow 100s linear infinite; /* slowed 4× */
  background-size: 400% 100%;
}

@keyframes flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: -400% 50%; }
}