Scrolling Text Marquee Bar

<?php
if ( ! function_exists( 'scseed_marquee_shortcode' ) ) {
    function scseed_marquee_shortcode( $atts, $content = '' ) {
        $atts = shortcode_atts( array(
            'speed'  => '25',
            'bg'     => '#1d4ed8',
            'color'  => '#ffffff',
            'items'  => '',
        ), $atts, 'marquee_bar' );

        $speed = absint( $atts['speed'] );
        $bg    = sanitize_hex_color( $atts['bg'] ) ?: '#1d4ed8';
        $color = sanitize_hex_color( $atts['color'] ) ?: '#ffffff';

        if ( ! empty( $atts['items'] ) ) {
            $raw = array_map( 'trim', explode( '|', $atts['items'] ) );
        } elseif ( ! empty( $content ) ) {
            $raw = array( strip_tags( $content ) );
        } else {
            $raw = array( 'Welcome to our website!', 'Check out our latest offers.', 'Subscribe to the newsletter.' );
        }

        $items_html = '';
        foreach ( $raw as $item ) {
            $items_html .= '<span class="scseed-marquee-item">' . esc_html( $item ) . '</span>';
        }
        // Duplicate for seamless loop
        $track = $items_html . $items_html;

        ob_start();
        ?>
        <div class="scseed-marquee-bar" style="--sc-mq-bg:<?php echo esc_attr( $bg ); ?>;--sc-mq-color:<?php echo esc_attr( $color ); ?>;--sc-mq-speed:<?php echo esc_attr( $speed ); ?>s">
            <div class="scseed-marquee-track"><?php echo $track; ?></div>
        </div>
        <?php
        return ob_get_clean();
    }
    add_shortcode( 'marquee_bar', 'scseed_marquee_shortcode' );
}

@keyframes scseed-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.scseed-marquee-bar {
  background: var(--sc-mq-bg, #1d4ed8);
  color: var(--sc-mq-color, #fff);
  overflow: hidden;
  white-space: nowrap;
  padding: .55rem 0;
  font-size: .9rem;
  font-weight: 500;
}
.scseed-marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: scseed-marquee-scroll var(--sc-mq-speed, 25s) linear infinite;
}
.scseed-marquee-bar:hover .scseed-marquee-track {
  animation-play-state: paused;
}
.scseed-marquee-item {
  display: inline-block;
  padding: 0 2.5rem;
  position: relative;
}
.scseed-marquee-item::after {
  content: '\2022';
  position: absolute;
  right: -.3rem;
  opacity: .5;
}
@media (prefers-reduced-motion: reduce) {
  .scseed-marquee-track { animation: none; }
}