/* ==========================================================================
   BLOCO: Letreiro — faixa escura elevada animada
   HTML: <div class="marquee" data-marquee>  ·  JS: js/sections/letreiro.js
   Figma 844:2280 (95px de altura) e 844:2258 (estrutura: texto · "///" ·
   texto, com a marca dos divisores entre as frases).
   Rolagem infinita sempre ativa (decisão: inclusive com "reduzir movimento").
   No hover o letreiro desacelera suavemente (letreiro.js); sem JS, pausa.
   ========================================================================== */

.marquee {
  --marquee-duration: 48s;
  display: flex;
  align-items: center;
  height: 96px;
  overflow: hidden;
  background: var(--c-surface-raised);
  border-block: var(--stroke) solid var(--c-border-soft);
  color: var(--c-text-strong);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: bd-marquee var(--marquee-duration) linear infinite;
}
html:not(.js) .marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

/* Estilo h3 do Figma (Ovo) */
.marquee__item {
  padding-inline: 37px;
  font-family: var(--f-display);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  white-space: nowrap;
}

/* Marca "///" entre os textos: mesmo desenho dos divisores, na cor do texto
   (Figma 844:2258) */
.marquee__mark {
  flex: none;
  width: 44px;
  height: 20px;
}

@keyframes bd-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Com "reduzir movimento": a faixa continua rolando (sobrepõe a regra global
   de base.css, que zera as animações). */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation-duration: var(--marquee-duration) !important;
    animation-iteration-count: infinite !important;
  }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 768px) {
  .marquee {
    height: 72px;
  }
  .marquee__item {
    padding-inline: var(--s-24);
  }
  .marquee__mark {
    width: 33px;
    height: 15px;
  }
}