:root {
    --blend-color: #303030; /* Color to blend with */
    --blend-amount: 0.5; /* Amount to blend (0 to 1) */
}

@keyframes shifter-move-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.scrolled-to {
    position: relative;
    background-clip: padding-box;
    z-index: 1; /* Ensure the element content stays above the pseudo-element */
}
  
.scrolled-to::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 1.2px; /* Adjust as needed to match the border width */
    background: linear-gradient(
        90deg, 
        rgba(255, 0, 0, calc(1 - var(--blend-amount))), 
        rgba(255, 165, 0, calc(1 - var(--blend-amount))), 
        rgba(255, 255, 0, calc(1 - var(--blend-amount))), 
        rgba(0, 128, 0, calc(1 - var(--blend-amount))), 
        rgba(0, 0, 255, calc(1 - var(--blend-amount))), 
        rgba(75, 0, 130, calc(1 - var(--blend-amount))), 
        rgba(238, 130, 238, calc(1 - var(--blend-amount))), 
        rgba(255, 0, 0, calc(1 - var(--blend-amount))), 
        rgba(255, 165, 0, calc(1 - var(--blend-amount))), 
        rgba(255, 255, 0, calc(1 - var(--blend-amount))), 
        rgba(0, 128, 0, calc(1 - var(--blend-amount))), 
        rgba(0, 0, 255, calc(1 - var(--blend-amount))), 
        rgba(75, 0, 130, calc(1 - var(--blend-amount))), 
        rgba(238, 130, 238, calc(1 - var(--blend-amount)))
    ),
    linear-gradient(
        90deg,
        var(--blend-color),
        var(--blend-color)
    );
    background-size: 200% 200%, 100% 100%;
    background-blend-mode: screen;
    animation: shifter-move-animation 10s linear infinite; /* Slowed down animation for smoother transition */
    -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1; /* Ensure the border stays behind the element content */
}