/* Faixa rolante da home — "Queda".
   Continua o breu do hero sem emenda, tipografia na serifa da marca com
   itálico alternado, e a troca de categoria acontece como uma queda.
   Só carrega na home. */

.hmq{
  background:var(--dark);
  padding:18px 0 22px;
  overflow:hidden;
  /* colada no hero: nada de respiro entre as duas */
  margin-top:0;
}

/* ---------- cabeçalho: pills com anel de tempo ---------- */
.hmq-head{
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 clamp(18px,4vw,44px) 14px;
}
.hmq-rule{flex:1;height:1px;background:rgba(227,169,192,.2)}

.hmq-tabs{display:inline-flex;flex:0 0 auto;gap:4px}
.hmq-tab{
  display:inline-flex;
  align-items:center;
  border:0;
  background:none;
  cursor:pointer;
  padding:8px 13px 8px 10px;
  border-radius:999px;
  font-family:var(--sans);
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,246,242,.5);
  transition:color .3s;
}
.hmq-tab.is-on{color:#fff6f2}
.hmq-tab:focus-visible{outline:2px solid var(--rust-light);outline-offset:3px}
.hmq-tab-short{display:none}

.hmq-ring{width:14px;height:14px;margin-right:8px;flex:0 0 14px}
.hmq-ring circle{fill:none;stroke-width:2}
.hmq-ring-bg{stroke:rgba(255,246,242,.18)}
.hmq-ring-fg{
  stroke:var(--rust-light);
  stroke-linecap:round;
  stroke-dasharray:38;
  stroke-dashoffset:38;
  transform:rotate(-90deg);
  transform-origin:50% 50%;
}
/* o anel só corre no pill ativo — e é ele que dispara a próxima troca */
.hmq-tab.is-on .hmq-ring-fg{
  animation:hmq-drain var(--hmq-dwell,24s) linear forwards;
}
@keyframes hmq-drain{from{stroke-dashoffset:38}to{stroke-dashoffset:0}}

/* ---------- trilho ---------- */
.hmq-rail{
  position:relative;
  display:grid;
  /* folga suficiente para descendentes (p, g, ç, ã) nunca encostarem no corte */
  min-height:clamp(46px,9vw,78px);
  overflow:hidden;
}
.hmq-rail::before,
.hmq-rail::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  z-index:3;
  width:clamp(40px,8vw,110px);
  pointer-events:none;
}
.hmq-rail::before{left:0;background:linear-gradient(90deg,var(--dark),transparent)}
.hmq-rail::after{right:0;background:linear-gradient(270deg,var(--dark),transparent)}

.hmq-list{grid-area:1/1;display:flex;align-items:center}

.hmq-flow{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:hmq-scroll var(--hmq-duration,40s) linear infinite;
}
.hmq-set{display:flex;flex:0 0 auto;align-items:center}
@keyframes hmq-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--hmq-shift,-50%),0,0)}
}

/* pausa tudo junto: rolagem e o anel que conta o tempo */
.hmq:hover .hmq-flow,
.hmq:focus-within .hmq-flow,
.hmq:hover .hmq-ring-fg,
.hmq:focus-within .hmq-ring-fg{animation-play-state:paused}

.hmq-item,
.hmq-sep{
  white-space:nowrap;
  text-decoration:none;
  font-family:var(--serif);
  line-height:1.3;
  /* a queda vale para a palavra E para o separador — nunca só para um */
  transition:transform .55s cubic-bezier(.5,0,.75,0),opacity .35s ease;
}
.hmq-item{
  font-size:clamp(26px,4.6vw,46px);
  font-weight:200;
  color:#fff6f2;
}
.hmq-item.is-italic{font-style:italic}
a.hmq-item:hover,
a.hmq-item:focus-visible{color:var(--rust-light)}
a.hmq-item:focus-visible{outline:2px solid var(--rust-light);outline-offset:4px;border-radius:4px}
.hmq-sep{
  flex:0 0 auto;
  font-size:clamp(11px,1.3vw,15px);
  color:var(--rust);
  padding:0 clamp(16px,2.4vw,30px);
}

/* escalonamento em pares: cada palavra cai colada ao ✦ que vem depois dela */
.hmq-set>:nth-child(4n+1),
.hmq-set>:nth-child(4n+2){transition-delay:0s}
.hmq-set>:nth-child(4n+3),
.hmq-set>:nth-child(4n+4){transition-delay:.06s}

/* saindo: cai pelo chão. esperando: parada acima do teto. */
.hmq-list.is-out .hmq-item,
.hmq-list.is-out .hmq-sep{transform:translateY(150%) rotate(2.5deg);opacity:0}
.hmq-list.is-below .hmq-item,
.hmq-list.is-below .hmq-sep{transform:translateY(-150%);opacity:0;transition:none}

/* ---------- mobile ---------- */
@media(max-width:700px){
  .hmq{padding:14px 0 16px}
  .hmq-head{padding:0 18px 10px}
  .hmq-rule{display:none}
  .hmq-tab{font-size:8px;padding:7px 10px 7px 8px;letter-spacing:.12em}
  .hmq-tab-long{display:none}
  .hmq-tab-short{display:inline}
  .hmq-ring{width:12px;height:12px;flex:0 0 12px;margin-right:6px}
}

/* ---------- movimento reduzido ---------- */
/* Sem rolagem, sem queda e sem troca automática: a faixa vira uma lista que a
   pessoa arrasta. O JavaScript também desliga o autoplay nesse caso. */
@media(prefers-reduced-motion:reduce){
  .hmq-flow{animation:none!important;transform:none!important}
  .hmq-rail{overflow-x:auto;scrollbar-width:thin}
  .hmq-item,.hmq-sep{transition:none!important;transform:none!important;opacity:1!important}
  /* só a aba escolhida ocupa o trilho: sem a queda, as duas se empilhariam */
  .hmq-list:not(.is-on){display:none}
  .hmq-ring{display:none}
}