/**
 * Announcement Marquee Styles
 * Efeito marquee CSS puro, sem dependências
 */

announcement-marquee {
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: var(--announcement-bg, #000);
    color: var(--announcement-color, #fff);
}

.marquee-content {
    display: inline-flex;
    white-space: nowrap;
    animation: marquee-scroll 15s linear infinite;
    will-change: transform;
}

/* Animação de scroll */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.333%); /* Move 1/3 já que duplicamos 3x */
    }
}

/* Items dentro do marquee */
.marquee-item {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.marquee-item:not(:last-child)::after {
    content: '•';
    margin-left: 2rem;
    opacity: 0.5;
}

/* Links no marquee */
.marquee-item a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}

.marquee-item a:hover {
    opacity: 0.8;
}

/* Ícones (opcional) */
.marquee-item svg,
.marquee-item i {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
}

/* Pause no hover (já aplicado via JS, mas aqui como fallback) */
announcement-marquee:hover .marquee-content {
    animation-play-state: paused;
}

/* Responsive */
@media (max-width: 768px) {
    .marquee-item {
        font-size: 0.8125rem;
        padding: 0.625rem 1.5rem;
    }

    .marquee-item:not(:last-child)::after {
        margin-left: 1.5rem;
    }
}

/* Tema claro (opcional) */
announcement-marquee[data-theme="light"] {
    --announcement-bg: #f5f5f5;
    --announcement-color: #333;
}

/* Performance: GPU acceleration */
.marquee-content {
    backface-visibility: hidden;
    perspective: 1000px;
    transform: translateZ(0);
}