/* =========================================================================
   MathMaker — Mural público de assinaturas
   Só desta página (/mural). Depende de tokens.css, base.css, components.css
   e site.css, carregados antes.
   ========================================================================= */

/* ── Hero + contador ──────────────────────────────────────────────────── */
.mural-hero {
  padding-block: var(--esp-7) var(--esp-5);
}

.mural-contador {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  margin-top: var(--esp-5);
}

.mural-contador__numero {
  font-family: var(--fonte-display);
  font-size: var(--fs-36);
  font-weight: var(--peso-semibold);
  line-height: 1;
  color: var(--cor-primaria);
}

.mural-contador__rotulo {
  font-family: var(--fonte-mono);
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}

.mural-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4);
  margin-top: var(--esp-5);
}

.mural-aviso {
  font-size: var(--fs-14);
  color: var(--cor-texto-fraco);
}

/* ── O painel contínuo (pergaminho kraft) ─────────────────────────────── */
/* Diferente do livro de dentro do app (que é uma grade de cartões com nome),
   aqui é UM painel só: as assinaturas entram na espiral conforme chegam e o
   conjunto encolhe para caber — nunca rola. Ver js/mural.js. */
.mural-secao {
  padding-block: var(--esp-6) var(--esp-8);
}

.mural-palco {
  position: relative;
  overflow: hidden;
  /* O teto de 42rem (672 px a 96 dpi) é menor que a altura do palco na impressão
     (180 mm ≈ 680 px), de propósito: a `--escala` é calculada com a caixa da tela
     (o `beforeprint` reencaixa, mas o layout de impressão ainda não vale nesse
     instante) e precisa continuar servindo na folha. Ver `@media print`. */
  height: clamp(22rem, 64vh, 42rem);
  border-radius: var(--raio-lg);
  /* Papel kraft: cor de base + fibra cruzada + grão + vinheta de envelhecido. */
  background-color: #e3d3b4;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.18'/%3E%3C/svg%3E"),
    repeating-linear-gradient(93deg, rgba(120, 92, 48, 0.05) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(3deg, rgba(120, 92, 48, 0.045) 0 2px, transparent 2px 7px),
    radial-gradient(62% 54% at 16% 10%, rgba(255, 255, 255, 0.5), transparent 62%),
    radial-gradient(48% 42% at 88% 80%, rgba(154, 91, 19, 0.12), transparent 66%),
    radial-gradient(96% 96% at 50% 50%, rgba(255, 255, 255, 0.1), rgba(120, 92, 48, 0.2));
  box-shadow:
    inset 0 0 3.5rem rgba(120, 92, 48, 0.24),
    inset 0 0 0 1px rgba(120, 92, 48, 0.16),
    var(--sombra-lg);
}

/* O painel em si. O JS dá o tamanho (em unidades do painel) e a `--escala`;
   as assinaturas ficam ancoradas no CENTRO (left/top 50%), então crescer o
   painel não move nenhuma delas. */
.mural {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) scale(var(--escala, 1));
  transform-origin: 50% 50%;
  /* Cada assinatura nova afasta um pouco a "câmera": o recuo tem de ser lento o
     bastante para ser lido como o mural crescendo, não como um solavanco. */
  transition: transform 700ms cubic-bezier(0.2, 0, 0, 1);
}

.mural__assinatura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--slot-w, 380px);
  height: var(--slot-h, 176px);
  object-fit: contain;
  /* A ordem importa: a caixa é centrada no ponto e SÓ DEPOIS deslocada para a
     casa da espiral (`--x`/`--y`) — [x,y] são o offset a partir do centro. */
  transform:
    translate(-50%, -50%)
    translate(var(--x, 0px), var(--y, 0px))
    rotate(var(--giro, 0deg));
  /* O giro vem do id (ver js/mural.js): o traço parece assinado à mão, e a
     mesma assinatura cai sempre no mesmo ângulo. */
  animation: mural-entra 520ms cubic-bezier(0.2, 0, 0, 1) both;
}

.mural__assinatura:hover {
  z-index: 5;
  filter: drop-shadow(0 0 0.5rem rgba(154, 91, 19, 0.55));
}

@keyframes mural-entra {
  from {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate(var(--x, 0px), var(--y, 0px))
      rotate(var(--giro, 0deg))
      scale(0.55);
  }
  to {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      translate(var(--x, 0px), var(--y, 0px))
      rotate(var(--giro, 0deg))
      scale(1);
  }
}

/* ── Tela cheia ───────────────────────────────────────────────────────── */
/* O painel vira a tela inteira — é assim que a bancada passa o dia, na TV ou no
   projetor, com as assinaturas chegando na frente do público. A classe vem do JS
   (e não de `:fullscreen`) porque a altura do palco está declarada aqui em cima:
   em tela cheia ela precisa sair de cena para o box do navegador valer. */
.mural-palco--cheia {
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* A saída mora DENTRO do painel de propósito: em tela cheia o resto da página não
   é renderizado, então o botão de fora fica inalcançável. Discreto por padrão —
   não pode competir com as assinaturas —, sólido no hover e no foco. */
.mural-sair {
  position: absolute;
  top: var(--esp-3);
  right: var(--esp-3);
  z-index: 10;
  background-color: rgba(28, 25, 23, 0.42);
  color: var(--pergaminho);
  opacity: 0.4;
  transition: opacity var(--transicao), background-color var(--transicao);
}

.mural-sair:hover,
.mural-sair:focus-visible {
  background-color: rgba(28, 25, 23, 0.78);
  color: var(--pergaminho);
  opacity: 1;
}

/* ── Estados vazios ───────────────────────────────────────────────────── */
/* Papel em branco é o estado normal de um mural recém-aberto: a folha fica e a
   frase explica. Sem caixa tracejada — a folha já é a moldura. */
.mural-vazio {
  margin-top: var(--esp-4);
  text-align: center;
  color: var(--cor-texto-fraco);
}

.mural-erro {
  margin-top: var(--esp-4);
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  text-align: center;
  color: var(--erro);
}

/* Acessibilidade: respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
  .mural {
    transition: none;
  }

  .mural__assinatura {
    animation: none;
  }

  .mural__assinatura:hover {
    filter: none;
  }
}

/* ── Impressão: é para isso que o mural existe no fim do dia ──────────── */
/* Sai a folha inteira numa página deitada: o painel já está escalado para
   caber, então a impressão é o mural como ele está na tela. */
@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  .site-nav,
  .site-footer,
  .section__eyebrow,
  .page-hero__lead,
  .mural-acoes,
  .mural-vazio,
  .mural-erro,
  /* Defensivo: o botão de sair só existe em tela cheia, e imprimir de dentro da
     tela cheia não deve deixar um controle na folha. */
  .mural-sair,
  .visually-hidden {
    display: none !important;
  }

  body.mural-pagina {
    background: #fff;
  }

  .mural-hero {
    padding: 0 0 var(--esp-4);
    background: none;
    border-bottom: none;
  }

  .page-hero__titulo {
    font-size: var(--fs-28);
  }

  .mural-contador {
    margin-top: var(--esp-2);
  }

  .mural-contador__numero {
    color: var(--cor-texto);
  }

  .mural-secao {
    padding: 0;
  }

  .mural-palco {
    /* 180 mm cabe nos 190 mm úteis da A4 deitada (297×210, margens de 10 mm) e é
       maior que o teto da tela (42rem) — então a `--escala` da tela sempre serve
       aqui, sem cortar a ponta da espiral. */
    height: 180mm;
    border-radius: 0;
    box-shadow: none;
    /* O kraft é parte do mural: sem isto o papel sai branco na impressora. */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .mural__assinatura {
    /* Uma assinatura que entrou durante a impressão não pode mudar a folha. */
    animation: none;
  }

  .mural {
    transition: none;
  }
}