/* 滚动组件外层容器 - 与全站蓝色主题统一 */
.dynamic-scroll-notice {
    width: 100%;
    height: 42px;
    line-height: 42px;
    /* 改用主色蓝渐变，与页面整体协调 */
    background: linear-gradient(90deg, #1962ff 0%, #428aff 100%);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    margin: 6px 0 4px;
}

/* 滚动动画容器 - 承载所有滚动文字 */
.scroll-animate-wrap {
    position: absolute;
    width: 100%;
    /* 开启硬件加速，动画更流畅 */
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation: scroll-auto-move 20s linear infinite;
    animation: scroll-auto-move 20s linear infinite;
}

/* 单条滚动文字样式 */
.scroll-text-item {
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}

/* 移动端适配 - 缩小字体适配小屏 */
@media screen and (max-width: 768px) {
    .scroll-text-item {
        font-size: 13px;
    }
}

/* 核心滚动动画 - 匀速无缝滚动 */
@-webkit-keyframes scroll-auto-move {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

@keyframes scroll-auto-move {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

/* 鼠标悬浮暂停滚动（增强交互体验） */
.dynamic-scroll-notice:hover .scroll-animate-wrap {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}