.rainbow-separator {
  position: relative;
  width: 100%;
  height: clamp(14px, 2.2vw, 24px);
  overflow: hidden;
  isolation: isolate;
}

.rainbow-separator::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #ff2d55 0%,
    #ff5b5b 10%,
    #ff8a00 20%,
    #ffc247 30%,
    #ffe600 40%,
    #a8ff3a 50%,
    #42ffbc 60%,
    #00e5ff 70%,
    #3a97ff 80%,
    #6d63ff 90%,
    #b54dff 100%
  );
  background-size: 260% 100%;
  animation: rainbow-slide 6.5s linear infinite;
  -webkit-mask: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 38%,
    rgb(0 0 0 / 95%) 47%,
    rgb(0 0 0 / 95%) 53%,
    transparent 62%,
    transparent 100%
  );
  mask: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 38%,
    rgb(0 0 0 / 95%) 47%,
    rgb(0 0 0 / 95%) 53%,
    transparent 62%,
    transparent 100%
  );
}

.rainbow-separator::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #ffc247 30%,
    #ffe600 40%,
    #00e5ff 70%,
    #3a97ff 80%,
    #6d63ff 90%,
    #b54dff 100%
  );
  background-size: 260% 100%;
  opacity: 0.95;
  filter: blur(14px) saturate(120%);
  transform: scaleY(1.8);
  animation: rainbow-slide 6.5s linear infinite reverse;
  -webkit-mask: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 28%,
    rgb(0 0 0 / 80%) 45%,
    rgb(0 0 0 / 80%) 55%,
    transparent 72%,
    transparent 100%
  );
  mask: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 28%,
    rgb(0 0 0 / 80%) 45%,
    rgb(0 0 0 / 80%) 55%,
    transparent 72%,
    transparent 100%
  );
}

@keyframes rainbow-slide {
  from { background-position: 0% 50%; }
  to { background-position: 260% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .rainbow-separator::before,
  .rainbow-separator::after {
    animation: none;
  }
}