/* ==========================================================================
   HOME COMPONENT: NOTICE MARQUEE TICKER
   ========================================================================== */

.notice-marquee-wrap {
    background: var(--zw-bg-surface-card);
    border: 1px solid var(--zw-border-subtle);
    border-radius: var(--zw-radius-md);
    padding: 7px 14px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.notice-badge {
    background: var(--zw-accent);
    color: #07090e;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin-right: 12px;
    transform: skew(-10deg);
}

.notice-badge span {
    transform: skew(10deg);
    display: inline-block;
}

.marquee-content {
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.82rem;
    color: var(--zw-text-secondary);
    display: flex;
}

.marquee-text-flow {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-anim 24s linear infinite;
}

@keyframes marquee-anim {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}