/* =========================================================================
   A Toca — a caixa de diálogo (o pergaminho)
   O papel, o texto escrito letra por letra e o "..." de espera.
   Depende das cores do base.css. Hoje só a porta usa; a partir da Toca
   Simples, qualquer página em que o personagem fale.
   ========================================================================= */

:root {
  /* Tempo da animação de fade-in da mensagem */
  --fade-duration: 1.2s;
}

/* -------------------------------------------------------------------------
   1. A MENSAGEM NO PERGAMINHO

   São duas coisas no mesmo elemento:
     .message          → o texto e a posição na tela
     .message::before  → o papel desenhado atrás do texto

   ::before é um "pseudo-elemento": um elemento invisível no HTML que o CSS
   cria só para decorar. Como ele é filho do parágrafo, ele acompanha o
   tamanho do parágrafo automaticamente — é isso que faz o papel se adaptar
   ao texto sem nenhuma linha de JavaScript. Texto maior, papel maior.
   ------------------------------------------------------------------------- */
.message {
  position: absolute;
  z-index: 3;

  /* POSIÇÃO: centralizado na horizontal, lá embaixo na vertical.
     left: 50% leva a borda esquerda ao meio; o translateX(-50%) puxa de volta
     metade da própria largura — é assim que se centraliza de verdade.
     bottom: 8vh = 8% da altura da tela de distância do rodapé. */
  left: 50%;
  bottom: 8vh;

  width: min(34rem, 84vw);   /* min() = o que for menor: o texto ou a tela */
  margin: 0;
  /* O padding é a "margem do papel": espaço entre o texto e a beirada. */
  padding: 2.1rem 2.4rem 2.3rem;

  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(1rem, 1.9vw, 1.35rem); /* cresce com a tela, com limites */
  line-height: 1.65;
  color: var(--ink);
  text-wrap: balance;        /* distribui as linhas de forma mais bonita */
  /* Um brilho claro atrás das letras, como tinta absorvida pelo papel. */
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.5);

  /* Estado inicial: invisível e 20px mais abaixo... */
  opacity: 0;
  transform: translate(-50%, 20px);
  /* ...e sem receber cliques, para não bloquear a porta enquanto está escondida. */
  pointer-events: none;
  transition: opacity var(--fade-duration) ease,
              transform var(--fade-duration) ease;
}

/* Estado final: visível e na posição de repouso. */
.message.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/*
  AS LETRAS.
  O JavaScript quebra a frase em um <span class="letter"> por caractere, todos
  começando escondidos. Escrever "letra por letra" é só ir adicionando a classe
  .is-typed em cada um, na ordem.

  visibility: hidden (e não display: none) é essencial aqui: o elemento fica
  invisível MAS continua ocupando o lugar dele. É por isso que o pergaminho já
  nasce do tamanho final, em vez de ir crescendo e pulando na tela conforme o
  texto é escrito.
*/
.letter {
  visibility: hidden;
}

.letter.is-typed {
  visibility: visible;
}

/*
  Cada palavra é um span com white-space: nowrap. Sem isso, como cada letra é um
  elemento separado, o navegador entenderia que pode quebrar a linha entre duas
  letras quaisquer, e "ninguém" viraria "ningu-" numa linha e "ém" na outra.
  As quebras só podem acontecer nos espaços entre as palavras.
*/
.word {
  white-space: nowrap;
}

/*
  O "..." que ocupa o pergaminho enquanto ninguém escreveu nada.
  inset: 0 faz ele cobrir o papel inteiro e o grid centraliza no meio dele.
  Quando a escrita começa, ele ganha .is-gone e desaparece suavemente.
*/
.message__dots {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  letter-spacing: 0.3em;
  font-size: 1.4em;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.message__dots.is-gone {
  opacity: 0;
}

/*
  O PAPEL.
  inset: 0 faz ele cobrir exatamente a área do parágrafo (texto + padding).
  z-index: -1 coloca atrás do texto, mas ainda dentro do parágrafo.
*/
.message::before {
  content: "";               /* obrigatório: sem isto o ::before não existe */
  position: absolute;
  inset: 0;
  z-index: -1;

  /* A "textura" do papel: três manchas radiais claras/escuras por cima de um
     degradê de base. É o que tira o aspecto de retângulo chapado. */
  background:
    radial-gradient(ellipse at 22% 28%, rgba(255, 249, 226, 0.75) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 72%, rgba(168, 132, 74, 0.28) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 15%, rgba(196, 164, 105, 0.30) 0%, transparent 45%),
    linear-gradient(160deg, var(--paper-light) 0%, var(--paper) 45%, var(--paper-edge) 100%);

  /* A BORDA IRREGULAR.
     clip-path recorta o elemento seguindo uma lista de pontos (x y). Como os
     valores estão em %, o recorte se estica junto com o papel — o papel pode
     crescer que a irregularidade acompanha.
     Quer a borda mais rasgada? Afaste os números de 0% e 100%. */
  clip-path: polygon(
    1% 4%,    20% 0.5%,  46% 3%,   72% 0.5%,  99% 3.5%,
    98% 27%,  100% 52%,  98.5% 77%, 99% 96.5%,
    74% 99.5%, 50% 97%,  26% 100%, 2% 96.5%,
    0.5% 74%, 2% 50%,    0% 26%
  );

  /* Um giro mínimo, como um papel colado meio torto pela mão. */
  transform: rotate(-0.7deg);

  /* drop-shadow (e não box-shadow) porque a sombra precisa seguir o recorte
     irregular do clip-path, e não um retângulo. */
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));
}

/*
  ===========================================================================
  QUANDO VOCÊ DESENHAR O SEU PERGAMINHO
  ===========================================================================
  Quando o seu papel.png estiver pronto, apague o bloco .message::before
  acima e descomente o de baixo. A técnica se chama "border-image de 9 fatias"
  (9-slice): você corta a imagem em 9 pedaços com duas linhas horizontais e
  duas verticais, como um jogo da velha.

      +----+--------+----+
      | 1  |   2    | 3  |     1,3,7,9 = os CANTOS → nunca esticam
      +----+--------+----+     2,8     = topo e base → esticam na horizontal
      | 4  |   5    | 6  |     4,6     = laterais    → esticam na vertical
      +----+--------+----+     5       = o miolo     → estica nos dois lados
      | 7  |   8    | 9  |
      +----+--------+----+

  É por isso que o papel pode crescer sem os cantos ficarem esmagados — que
  é exatamente o que aconteceria se você só esticasse a imagem inteira.

  Atenção ao caminho: o CSS mora em assets/css/, então "../img/papel.png"
  significa "suba uma pasta e entre em img". Endereços dentro do CSS são
  relativos ao ARQUIVO CSS, e não ao index.html.

  Como desenhar: faça um pergaminho de uns 300x300 px cujas BORDAS sejam
  razoavelmente uniformes (o meio pode ter o que você quiser, ele vai ser
  repetido/esticado). Depois meça quantos pixels de cada lado são "canto" —
  digamos 60 — e use esse número no border-image-slice.

  .message {
    border-style: solid;
    border-width: 60px;         // o tamanho do canto na TELA
    border-image-source: url("../img/papel.png");
    border-image-slice: 60 fill; // o tamanho do canto na IMAGEM
                                 // "fill" manda desenhar o miolo também
    border-image-repeat: round;  // "round" repete a textura sem cortar pela
                                 // metade; "stretch" estica. Teste os dois.
    padding: 1rem 1.4rem;        // o padding diminui, porque a borda já
                                 // empurra o texto para dentro
  }

  .message::before { content: none; }   // desliga o papel feito em CSS
  ===========================================================================
*/

/* -------------------------------------------------------------------------
   2. AJUSTES DE TELA
   ------------------------------------------------------------------------- */

@media (max-aspect-ratio: 1 / 1) {
  /* No celular o papel sobe um pouco, para não encostar no rodapé. */
  .message {
    bottom: 10vh;
    width: 88vw;
    padding: 1.7rem 1.6rem 1.9rem;
  }
}

/* Com animação reduzida, o papel aparece e some na hora, sem fade. */
@media (prefers-reduced-motion: reduce) {
  .message {
    transition-duration: 0.01ms;
  }
}