/* =====================================================================
   MAGIC THE MINAS — folha 1.7
   =====================================================================

   ARQUIVO NOVO DE PROPÓSITO — o mesmo motivo da 1.6
   -------------------------------------------------
   O aparelho do mago guarda CSS por NOME, e o .htaccess manda guardar
   por sete dias. Enquanto esse prazo não vence, acrescentar regras no
   mtm-1.6.css não adianta: o `?v=` sozinho já provou não bastar (foi o
   que quebrou a tela do mercador na 1.6). Um nome que nunca existiu não
   está no cache de ninguém — então as regras daqui chegam já na
   primeira visita, em todo aparelho, sem exceção.

   Regra da casa, então: CSS novo entra em arquivo novo. Nunca no antigo.

   O QUE TEM AQUI
   --------------
   1. O botão QUEM SOMOS nos dois rodapés.
   2. Um retoque no tutorial que não dá para injetar pelo JS.
   ===================================================================== */


/* =====================================================================
   1. O BOTÃO "QUEM SOMOS?"
   =====================================================================
   Ele aparece nos DOIS rodapés — o da porta de entrada e o de dentro do
   site — e o pedido foi "sutil mas visível". As duas coisas ao mesmo
   tempo se resolvem assim:

     · SUTIL: sem preenchimento, sem cor cheia. É um contorno fino, na
       mesma família de tamanho do resto do rodapé. Não compete com o
       ENTRAR nem com o MANUAL, que são as ações do dia a dia.

     · VISÍVEL: o contorno é DOURADO — a única cor de destaque do site —
       e a caixa alta com espaçamento de letra o separa do texto corrido
       ao redor. Num rodapé todo em cinza fraco, um retângulo dourado
       não passa despercebido, mesmo pequeno.

   No hover ele se preenche de dourado: aí fica claro que é botão, e não
   um selo decorativo.
   ===================================================================== */
.botao-quem-somos {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .95rem;
  border: 1px solid var(--ouro);
  border-radius: 999px;
  background: transparent;
  color: var(--ouro);
  font-family: var(--cond);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.botao-quem-somos:hover,
.botao-quem-somos:focus-visible {
  background: var(--ouro);
  border-color: var(--ouro);
  color: #14201E;
  text-decoration: none;
}
.botao-quem-somos:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }

/* a bolinha de mana antes do texto: o mesmo vocabulário visual do site */
.botao-quem-somos::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  opacity: .85;
}

/* ---- onde ele fica no rodapé de DENTRO (quem está logado) ----
   Na coluna da direita, embaixo dos avisos legais e separado deles por
   uma linha: ele não é aviso, é caminho. */
.rodape-estudio {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--borda);
}
.rodape-dentro .rodape-estudio { text-align: right; }
.rodape-estudio .rodape-estudio-dica {
  display: block;
  margin-top: .5rem;
  font-size: .74rem;
  color: var(--texto-fraco);
}

/* ---- e no rodapé da PORTA DE ENTRADA ---- */
.rodape-fora .rodape-estudio {
  border-top: 0;
  margin-top: .9rem;
  padding-top: 0;
  text-align: center;
}

@media (max-width: 720px) {
  .rodape-dentro .rodape-estudio { text-align: left; }
}


/* =====================================================================
   2. O TUTORIAL — o que não dá para injetar pelo JS
   =====================================================================
   Quase todo o estilo do tutorial nasce dentro do próprio tutorial.js,
   de propósito: assim ele funciona mesmo que a folha esteja velha no
   cache do aparelho. Sobram duas coisas que precisam morar aqui.
   ===================================================================== */

/* (a) A classe .tut-alvo-aceso, da 1.5, tentava pôr o elemento apontado
   em z-index 95 para ele subir acima do véu. Nunca funcionou nos
   elementos do cabeçalho: o `.topo` é `position:sticky; z-index:50`, e
   isso cria um contexto de empilhamento — um filho dele não consegue
   passar de 50 por mais alto que seja o número escrito nele. A regra
   era, na prática, letra morta.

   O tutorial 1.6.2 não usa mais essa classe. Quem ilumina o alvo é o
   buraco do holofote, que é um FURO na sombra: por definição não tem
   como escurecer o que está dentro dele. Anulamos a regra antiga para
   que, se ela ficar no cache de alguém, não empurre nenhum elemento
   para uma camada estranha. */
.tut-alvo-aceso { z-index: auto !important; }

/* (b) Enquanto o tutorial roda, a página de trás não rola sozinha —
   senão o holofote persegue um alvo que está fugindo. O JS põe a classe
   no <body>; a regra precisa existir também aqui para o caso de o
   <style> injetado ainda não ter sido aplicado no primeiro quadro. */
body.tut-rodando { overflow: hidden; }


/* =====================================================================
   3. O EMBLEMA DO PRISMA — o foil
   =====================================================================
   O Prisma era o único mercador sem emblema, e não por descuido de arte:
   o app/loja.php sempre apontou para /assets/img/emblemas/emb_ve.png, e
   essa PASTA nunca existiu. Como a loja faz `is_file()` antes de
   desenhar, ela não dava erro: simplesmente não mostrava nada. Um bug
   silencioso, que é o pior tipo.

   Agora a imagem existe, e ela ganha o brilho de foil por cima.

   POR QUE O FOIL É CSS, E NÃO PARTE DA IMAGEM
   -------------------------------------------
   Porque foil não é uma cor, é um movimento. Uma carta foil de verdade
   não brilha sozinha: ela brilha quando você a inclina. Congelar esse
   brilho num .png daria um emblema com uma mancha colorida fixa e
   estranha, que não lembra foil nenhum. Em CSS a faixa atravessa o
   disco de tempos em tempos, que é como o olho reconhece a coisa.

   E, de brinde, o mesmo arquivo .png serve para qualquer variação
   futura de brilho, sem redesenhar arte.

   COMO É FEITO — duas camadas, porque foil tem duas coisas
   --------------------------------------------------------
   `::before`  a COR. Uma faixa de arco-íris em hard-light, que é o
               modo que deixa a cor saturar sem apagar o preto do
               símbolo embaixo.
   `::after`   o BRILHO. Uma faixa branca fina em screen, mais estreita
               e por cima da outra. É o reflexo especular, o "risco de
               luz" que passa antes da cor.

   As duas andam juntas, no mesmo ritmo, com um `rotate(18deg)` para a
   faixa cruzar na diagonal em vez de na vertical. Diagonal parece luz;
   vertical parece cortina.

   A ANIMAÇÃO USA `transform`, nunca `left` ou `background-position`.
   Transform não obriga o navegador a recalcular o layout a cada quadro.
   Numa animação infinita, num emblema que fica na tela o tempo todo,
   essa diferença é o celular do mago esquentando ou não.

   O RECORTE VEM DE GRAÇA: o .barraca-emblema já é
   `border-radius: 50%` com `overflow: hidden`, então a faixa nasce
   cortada no círculo sem precisar de máscara nenhuma.
   ===================================================================== */
.emblema-foil {
  position: relative;
  isolation: isolate;   /* o blend não escapa para o resto da barraca */
}
.emblema-foil img { position: relative; z-index: 0; }

.emblema-foil::before,
.emblema-foil::after {
  content: '';
  position: absolute;
  top: -60%; bottom: -60%;   /* sobra em cima e embaixo: a faixa é inclinada */
  left: 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  animation: emblema-foil 4.6s linear infinite;
}

/* a cor */
.emblema-foil::before {
  width: 58%;
  background: linear-gradient(90deg, transparent,
    rgba(255, 138, 181, .90), rgba(255, 217, 122, 1),
    rgba(142, 240, 255, 1),   rgba(165, 139, 255, .90), transparent);
  mix-blend-mode: hard-light;
  opacity: .75;
}

/* o brilho */
.emblema-foil::after {
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  mix-blend-mode: screen;
  opacity: .7;
}

@keyframes emblema-foil {
  0%   { transform: translateX(-190%) rotate(18deg); }
  100% { transform: translateX(380%)  rotate(18deg); }
}

/* Quem pediu menos movimento no aparelho não recebe faixa nenhuma. O
   emblema continua lá, colorido e legível, só não se mexe. */
@media (prefers-reduced-motion: reduce) {
  .emblema-foil::before,
  .emblema-foil::after { animation: none; opacity: .25; }
}


/* =====================================================================
   4. O INDAWORA DA PORTA DE ENTRADA
   =====================================================================
   Ele mora embaixo do "Entrar" e do "Criar meu mago", DENTRO da mesma
   coluna. Isso não é arrumação: a coluna (.entrada-porta) já é
   `position: sticky` a partir de 1000px, no mtm-1.5.css. Pondo o
   mascote lá dentro, ele desce junto com os campos e para junto com
   eles, sem precisar de `position: fixed` nem de JavaScript.

   UMA DESCOBERTA PELO CAMINHO
   ---------------------------
   A classe `.porta-mascote` JÁ EXISTIA no mtm-1.5.css, com margem,
   centralização, tamanho e até um estilo de legenda. Alguém (eu, numa
   versão anterior) escreveu o estilo de um mascote nessa coluna e o
   HTML nunca chegou a usar. Era CSS órfão: regra viva, sem elemento
   nenhum na página.

   Descobri porque o mascote sumia no celular e não havia motivo
   aparente. O motivo era esta linha, lá do mtm-1.5.css:

       @media (max-width: 999px) { .porta-mascote { display: none; } }

   Então esta seção não repete o que já existe: ela AJUSTA. O tamanho e
   o balanço são daqui; margem e centralização continuam vindo de lá.

   E POR QUE ELE VOLTA A APARECER NO CELULAR
   -----------------------------------------
   Aquele `display: none` foi escrito para uma tela que nunca existiu,
   então não é hábito que alguém dependa dele. E a própria porta de
   entrada já mostra mascote em celular: o ziguezague do meio da página
   aparece, só menor (mtm-1.5.css, .zigue-mascote). Seguir a regra da
   casa aqui é MOSTRAR, encolhido, e não esconder.

   Se você preferir sumir com ele no telefone, apague o `display: block`
   do bloco de 999px aqui embaixo. Uma linha.
   ===================================================================== */
.porta-mascote img {
  width: auto;
  height: min(230px, 26vh);
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .55));
  /* uma respiração lenta, no mesmo espírito da logo do institucional:
     dá vida sem puxar a atenção de quem veio digitar a senha */
  animation: porta-mascote-respira 4.4s ease-in-out infinite;
}
@keyframes porta-mascote-respira {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* A ALTURA É LIMITADA POR `vh`, e não só por pixel, de propósito: uma
   coluna grudada mais ALTA que a tela deixa de grudar, porque o
   navegador precisa rolar até o fim dela antes de fixar. O `min()`
   encolhe sozinho em notebook de tela curta em vez de quebrar o grude. */

@media (max-width: 999px) {
  .porta-mascote { display: block; }   /* desfaz o sumiço da 1.5 */
  .porta-mascote img { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .porta-mascote img { animation: none; }
}