/* MENTORMATCH — SINAL DE ENTREGA DA OBRA (`mm-bx`)
   ------------------------------------------------------------------------
   O componente que acompanha o download de um exemplar, do "preparando" ao
   arquivo salvo no aparelho. Antes disto a folha "Levar esta obra" dizia a
   espera inteira numa linha de texto solta — e uma linha de texto não informa
   progresso, só que alguma coisa não acabou.

   Vocabulário visual DELIBERADAMENTE igual ao do sinal universal
   (`.mm-load-fio`, BaseV2.astro): fio de 2px, varredura na mesma curva e no
   mesmo tempo. É a mesma ideia — "estamos trabalhando" — só que ancorada onde
   a pessoa está olhando, em vez de no topo da janela.

   Duas superfícies, uma folha de estilo: a vitrine é escura (`--v2-*`) e o
   leitor é papel claro (`--v2-reader-*`). Toda cor entra por custom property
   (`--mm-bx-cor`, `--mm-bx-trilho`, `--mm-bx-texto`, `--mm-bx-alerta`), então
   cada tela tematiza em quatro linhas e o componente não sabe de nada. */

.mm-bx {
  --mm-bx-cor:    var(--v2-gold);
  --mm-bx-trilho: var(--v2-hair-14);
  --mm-bx-texto:  var(--v2-ink-50);
  --mm-bx-alerta: var(--v2-ink-70);
  --mm-bx-pct: 0%;

  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  margin: 0;
}

/* O trilho existe em TODO estado, inclusive em repouso (só transparente): a
   altura da folha não pode mudar no clique. Sem isto o bottom sheet cresce
   12px no instante em que a pessoa escolhe o formato — um pulo de layout no
   único momento em que ela está esperando alguma coisa acontecer. */
.mm-bx-trilho {
  position: relative;
  height: 2px;
  border-radius: 999px;
  background: var(--mm-bx-trilho);
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s var(--v2-silk);
}
.mm-bx[data-estado="preparando"] .mm-bx-trilho,
.mm-bx[data-estado="baixando"]   .mm-bx-trilho,
.mm-bx[data-estado="pronto"]     .mm-bx-trilho { opacity: 1; }

.mm-bx-fio { position: absolute; top: 0; bottom: 0; left: 0; display: block; width: 0; }

/* PREPARANDO — indeterminado. O servidor está carimbando o PDF ou montando o
   EPUB e não há percentual honesto para mostrar; varredura é a única forma de
   dizer "vivo" sem inventar um número. */
.mm-bx[data-estado="preparando"] .mm-bx-fio {
  width: 34%;
  background: linear-gradient(90deg,
    transparent 0%, var(--mm-bx-cor) 50%, transparent 100%);
  animation: mmBxVarre 1.4s var(--v2-silk) infinite;
}

/* BAIXANDO / PRONTO — determinado: bytes recebidos sobre bytes totais. */
.mm-bx[data-estado="baixando"] .mm-bx-fio,
.mm-bx[data-estado="pronto"]   .mm-bx-fio {
  width: var(--mm-bx-pct);
  background: var(--mm-bx-cor);
  transition: width .25s var(--v2-silk);
}

@keyframes mmBxVarre {
  from { transform: translateX(-110%); }
  to   { transform: translateX(400%); }
}

.mm-bx-linha {
  margin: 0;
  min-height: 1.4em;
  text-align: center;
  font-family: var(--v2-f-sans);
  font-size: 13.5px;
  font-weight: 300;
  color: var(--mm-bx-texto);
}
.mm-bx[data-estado="pronto"] .mm-bx-linha { color: var(--mm-bx-cor); }
.mm-bx[data-estado="erro"]   .mm-bx-linha { color: var(--mm-bx-alerta); }

@media (prefers-reduced-motion: reduce) {
  .mm-bx[data-estado="preparando"] .mm-bx-fio {
    animation: none;
    width: 100%;
    opacity: .45;
  }
  .mm-bx-fio { transition: none; }
}