/**
 * Letreiro digital - barra superior (após a logo)
 * Presets de estilo e efeitos in/out
 */

/* Wrap: altura fixa e conteúdo centralizado no eixo Y */
.letreiro-digital-wrap {
    height: 69px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.letreiro-digital-wrap > .letreiro-digital {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Régua numerada (data-letreiro-ruler="true") – referência da área visível em % */
.letreiro-wrap-com-ruler {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 69px;
    overflow: visible;
}
.letreiro-wrap-com-ruler .letreiro-digital {
    flex-shrink: 0;
}
.letreiro-ruler {
    flex-shrink: 0;
    margin-top: 4px;
    padding: 4px 0 6px;
    border-top: 1px dashed oklch(var(--bc) / 0.3);
    font-size: 10px;
    color: oklch(var(--bc) / 0.7);
    line-height: 1.2;
}
.letreiro-ruler-label {
    margin-bottom: 2px;
}
.letreiro-ruler-track-ref {
    margin-top: 2px;
    font-style: italic;
}
.letreiro-ruler-bar {
    position: relative;
    width: 100%;
    height: 14px;
    background: oklch(var(--b) / 0.15);
    border-radius: 2px;
}
.letreiro-ruler-tick {
    position: absolute;
    top: 0;
    height: 100%;
    text-align: center;
}
.letreiro-ruler-tick i {
    position: absolute;
    top: 0;
    width: 1px;
    height: 8px;
    background: oklch(var(--bc) / 0.5);
}
.letreiro-ruler-tick em {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    font-style: normal;
    font-size: 9px;
}

.letreiro-digital {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.letreiro-rtl-js {
    min-height: 69px;
}

.letreiro-track {
    display: flex;
    align-items: center;
    gap: var(--letreiro-spacing, 60px);
    white-space: nowrap;
    will-change: transform;
}

.letreiro-item {
    flex-shrink: 0;
    padding: 0.25rem 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/** Palavras entre * no texto usam a cor secundária */
.letreiro-item-secundaria {
    color: var(--letreiro-item-secundaria, oklch(var(--bc) / 0.65));
}

/* Preset 1: Clássico - fonte média, normal */
.letreiro-preset-estilo1 .letreiro-item {
    font-size: 1rem;
    font-weight: 400;
    font-family: inherit;
    color: oklch(var(--bc) / 0.9);
}

/* Preset 2: Destaque - maior, negrito */
.letreiro-preset-estilo2 .letreiro-item {
    font-size: 1.125rem;
    font-weight: 700;
    font-family: inherit;
    color: oklch(var(--p) / 1);
}

/* Preset 3: Compacto - menor, leve */
.letreiro-preset-estilo3 .letreiro-item {
    font-size: 0.875rem;
    font-weight: 300;
    font-family: inherit;
    color: oklch(var(--bc) / 0.75);
    letter-spacing: 0.02em;
}

/* Preset 4: Impacto - grande, negrito, uppercase */
.letreiro-preset-estilo4 .letreiro-item {
    font-size: 1.25rem;
    font-weight: 800;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: oklch(var(--bc) / 1);
}

/* Preset 5: Elegante - serif, itálico, tamanho médio */
.letreiro-preset-estilo5 .letreiro-item {
    font-size: 1rem;
    font-weight: 500;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    color: oklch(var(--bc) / 0.85);
}

/* Preset Personalizado - variáveis definidas via inline style no header */
.letreiro-preset-personalizado .letreiro-item {
    font-size: var(--letreiro-custom-size, 16px);
    font-weight: var(--letreiro-custom-weight, 400);
    color: var(--letreiro-custom-color, #1f2937);
    font-family: var(--letreiro-custom-font, inherit);
    text-transform: var(--letreiro-custom-transform, none);
}
.letreiro-preset-personalizado .letreiro-item-secundaria {
    color: var(--letreiro-custom-color-secundaria, #6b7280);
}

/* Duração e direção definidas via JS (variáveis CSS) */
.letreiro-digital .letreiro-track {
    animation-duration: var(--letreiro-duration, 30s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.letreiro-dir-rtl .letreiro-track {
    animation-name: letreiro-rtl;
}

/* Bordas de depuração (azul/vermelho) só quando Depuração ativo (wrap com régua) */
.letreiro-wrap-com-ruler .letreiro-dir-rtl .letreiro-track {
    border-left: 3px solid #2563eb;
    border-right: 3px solid #dc2626;
}

/* RTL com múltiplas instâncias: tracks empilhadas; centralizadas no eixo Y */
.letreiro-rtl-js .letreiro-track {
    animation: none;
    position: absolute;
    left: 0;
    top: 50%;
}

.letreiro-dir-ltr .letreiro-track {
    animation-name: letreiro-ltr;
}

/* LTR com múltiplas instâncias (JS): mesma lógica que RTL, gap fixo */
.letreiro-ltr-js .letreiro-track {
    animation: none;
    position: absolute;
    left: 0;
    top: 50%;
}

/* RTL (direita para esquerda): primeira instância sai de 101% para entrar pela direita; loop em -50% */
@keyframes letreiro-rtl {
    from { transform: translateX(101%); }
    to { transform: translateX(-50%); }
}

@keyframes letreiro-ltr {
    from { transform: translateX(-100%); }
    to { transform: translateX(-50%); }
}