/* ==========================================================
   MARQUEE — Faixa animada com palavras (v1.45.0)

   2 fileiras em direções opostas. Animação 100% CSS (sem JS),
   GPU-accelerated via transform. Variantes de estilo e fundo.
   ========================================================== */

.hero-marquee{
    position: relative;
    overflow: hidden;
    padding: 18px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    --marquee-speed: 40s; /* override pelo PHP via inline style */
    /* Máscara nas bordas pra dar efeito de "infinito" (fade nas pontas) */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* ━━━━━━━━━━━━━━━━━━━━ FILEIRAS + ANIMAÇÃO ━━━━━━━━━━━━━━━━━━━━ */

.hero-marquee__row{
    overflow: hidden;
    white-space: nowrap;
    padding: 6px 0;
}

.hero-marquee__track{
    display: inline-flex;
    align-items: center;
    gap: 32px;
    padding-right: 32px; /* gap entre o fim do 1º conjunto e o início do 2º */
    will-change: transform;
    animation-duration: var(--marquee-speed);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* Linha 1 — desliza pra ESQUERDA */
.hero-marquee__row--ltr .hero-marquee__track{
    animation-name: marquee-slide-left;
}
@keyframes marquee-slide-left{
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Linha 2 — desliza pra DIREITA */
.hero-marquee__row--rtl .hero-marquee__track{
    animation-name: marquee-slide-right;
}
@keyframes marquee-slide-right{
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* Pausa ao passar o mouse (toggle) */
.hero-marquee.is-pause-hover:hover .hero-marquee__track{
    animation-play-state: paused;
}

/* ━━━━━━━━━━━━━━━━━━━━ TIPOGRAFIA ━━━━━━━━━━━━━━━━━━━━ */

.hero-marquee__word{
    font-family: var(--font-display, 'Bangers', 'Impact', sans-serif);
    font-size: clamp(34px, 5vw, 64px);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1;
    display: inline-block;
    transition: color .25s, transform .25s;
}

.hero-marquee__sep{
    font-size: clamp(28px, 4vw, 48px);
    opacity: .35;
    display: inline-block;
    line-height: 1;
    padding-top: 4px; /* alinha visualmente com baseline das palavras */
}

/* Hover na palavra (efeito interativo discreto) */
.hero-marquee__word:hover{ transform: scale(1.05); }

/* ━━━━━━━━━━━━━━━━━━━━ VARIANTES DE ESTILO ━━━━━━━━━━━━━━━━━━━━ */

/* Outline — texto vazado (estilo Vercel/Stripe) */
.hero-marquee--style-outline .hero-marquee__word{
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255,255,255,.65);
            text-stroke: 1.5px rgba(255,255,255,.65);
    transition: -webkit-text-stroke .25s, color .25s, transform .25s;
}
.hero-marquee--style-outline .hero-marquee__word:hover{
    color: var(--lime, #A3D900);
    -webkit-text-stroke: 1.5px var(--lime, #A3D900);
            text-stroke: 1.5px var(--lime, #A3D900);
}
.hero-marquee--style-outline .hero-marquee__sep{ color: rgba(255,255,255,.4); }

/* Solid — texto sólido lime */
.hero-marquee--style-solid .hero-marquee__word{
    color: var(--lime, #A3D900);
}
.hero-marquee--style-solid .hero-marquee__word:hover{
    color: #fff;
}
.hero-marquee--style-solid .hero-marquee__sep{ color: rgba(163,217,0,.5); }

/* Gradient — degradê lime → purple → magenta */
.hero-marquee--style-gradient .hero-marquee__word{
    background: linear-gradient(90deg, #A3D900 0%, #9B59FF 50%, #FF4D8D 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}
.hero-marquee--style-gradient .hero-marquee__sep{ color: rgba(155,89,255,.4); }

/* ━━━━━━━━━━━━━━━━━━━━ VARIANTES DE FUNDO ━━━━━━━━━━━━━━━━━━━━ */

.hero-marquee--bg-dark{
    background: #0A0A0A;
}
.hero-marquee--bg-lime{
    background: var(--lime, #A3D900);
}
.hero-marquee--bg-lime .hero-marquee__word{
    color: #1a1a1a !important;
    -webkit-text-stroke: 0 !important;
            text-stroke: 0 !important;
}
.hero-marquee--bg-lime .hero-marquee__sep{ color: rgba(0,0,0,.4) !important; }

.hero-marquee--bg-transparent{
    background: transparent;
}

.hero-marquee--bg-gradient{
    background: linear-gradient(90deg, #0A0A0A 0%, #1a0a2e 50%, #0A0A0A 100%);
}

/* ━━━━━━━━━━━━━━━━━━━━ RESPONSIVE ━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 720px){
    .hero-marquee{ padding: 14px 0; }
    .hero-marquee__track{ gap: 22px; padding-right: 22px; }
    .hero-marquee__word{ font-size: clamp(26px, 8vw, 42px); letter-spacing: 1.5px; }
    .hero-marquee__sep{ font-size: clamp(20px, 6vw, 32px); }
}

@media (prefers-reduced-motion: reduce){
    .hero-marquee__track{
        animation: none !important;
        /* Mostra apenas a primeira metade sem deslizar */
    }
}