/**
 * TurboJet - Estilos para Letreiro Animado
 * Shortcodes: [tj_letreiro], [tj_linha_letreiro]
 * v2.1 - Revertido para alinhamento central para funcionar com 'margin' do ícone.
 */

/* --- Contêiner Principal --- */
.tj-letreiro-container {
    display: flex;
    overflow: hidden;
    flex-direction: column; /* Sempre empilhado verticalmente */
}

/* --- Linha Individual --- */
.tj-letreiro-linha {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    flex-shrink: 0;
}

/* --- Ícone na Linha --- */
.tj-letreiro-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* vertical-align foi removido */
}
.tj-letreiro-icone svg,
.tj-letreiro-icone img {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}
.tj-letreiro-icone svg {
    fill: currentColor;
}

/* --- Wrapper e Texto da Linha --- */
.tj-letreiro-texto-wrapper {
    display: inline-flex;
    vertical-align: middle;
}

.tj-letreiro-texto, .tj-letreiro-texto-clone {
    display: inline-flex;
    align-items: center; /* ALTERAÇÃO: Revertido para 'center' */
    box-sizing: border-box; 
}


/* --- Animações de Texto --- */

/* 1. Animação de Rolagem (scroll) */
.tj-anim-texto-scroll .tj-letreiro-texto-wrapper {
    padding-left: 100%;
    animation: tj-anim-scroll-horizontal var(--tj-scroll-duracao, 25s) linear infinite var(--tj-scroll-delay, 0s);
    display: flex;
}
.tj-pausar-hover:hover .tj-letreiro-texto-wrapper {
    animation-play-state: paused;
}
.tj-scroll-direcao-direita .tj-letreiro-texto-wrapper {
    animation-direction: reverse;
}
.tj-anim-texto-scroll .tj-letreiro-texto {
    flex-shrink: 0;
}
@keyframes tj-anim-scroll-horizontal {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* 2. Animação de Fade In/Out (para textos alternados) */
.tj-anim-texto-fade-in-out .tj-letreiro-texto-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 2.5em;
}
.tj-anim-texto-fade-in-out .tj-letreiro-texto-alternado {
    position: absolute;
    opacity: 0;
    animation-name: tj-anim-fade-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
@keyframes tj-anim-fade-in-out {
    0%, 100% { opacity: 0; transform: translateY(10px); }
    10%, 90% { opacity: 1; transform: translateY(0); }
}

/* 3. Animação de Brilho Pulsante (pulse-glow) */
.tj-anim-texto-pulse-glow .tj-letreiro-texto-wrapper{
    display: flex;
    justify-content: center;
    width: 100%;
}
.tj-anim-texto-pulse-glow .tj-letreiro-texto {
    animation: tj-anim-pulse-glow 2s ease-in-out infinite;
}
@keyframes tj-anim-pulse-glow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 15px currentColor;
    }
    50% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px currentColor, 0 0 30px currentColor;
    }
}

/* --- Animação de Fundo de Gradiente --- */
.tj-fundo-gradiente-animado {
    background: linear-gradient(var(--tj-gradiente-direcao, 45deg), var(--tj-gradiente-cores));
    background-size: 400% 400%;
    animation: tj-anim-gradiente var(--tj-gradiente-velocidade, 15s) ease infinite;
}
@keyframes tj-anim-gradiente {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Fundo de Imagem --- */
.tj-fundo-imagem {
    background-size: cover;
    background-position: center center;
}

/* --- Acessibilidade --- */
@media (prefers-reduced-motion: reduce) {
    .tj-letreiro-linha, .tj-letreiro-linha * {
        animation: none !important;
        transition: none !important;
    }
}