/* ══════════════════════════════════════════════════════════════
 * DF Pós — camada cinematográfica da tela de entrada
 * ──────────────────────────────────────────────────────────────
 * Tudo aqui é SOBREPOSIÇÃO. Nada muda o layout, os textos, as
 * cores ou a posição de um único elemento da interface.
 *
 * A REGRA QUE GOVERNA O ARQUIVO
 *   Se a animação for percebida na primeira olhada, está forte
 *   demais. O trabalho é fazer a tela parecer viva, não fazer
 *   ela parecer animada.
 *
 * O QUE NÃO DÁ PARA FAZER, E POR QUÊ
 *   O capelo, os livros e os anéis estão DENTRO de um JPEG. Não
 *   são objetos separados: são pixels de uma fotografia. Não há
 *   como fazer o capelo flutuar sem uma versão da arte com ele
 *   recortado em PNG transparente.
 *
 *   O que dá para fazer — e é o que está aqui — é animar a LUZ
 *   em volta dele: o halo embaixo respira, os anéis ganham
 *   segmentos que percorrem, e um feixe atravessa a cena
 *   acendendo os fios dourados que já existem no desenho.
 *
 *   O resultado lê como levitação sem mover um pixel da arte.
 * ══════════════════════════════════════════════════════════════ */

/* ─── Onde os elementos da arte estão ───
 * Medido na imagem de 1628 × 966, em porcentagem, para as
 * sobreposições acompanharem qualquer tamanho de tela.
 *
 * Não são chutes: recortei a região central e localizei o
 * centro dos anéis e o raio das elipses.
 */
:root{
  --cena-x: 49.4%;      /* centro dos anéis, horizontal */
  --cena-y: 56.9%;      /* centro dos anéis, vertical   */
  --cena-rx: 12.9%;     /* raio horizontal do anel externo */
  --cena-ry: 6.4%;      /* raio vertical (a cena é isométrica) */
}

/* ══════════ 1. Partículas ══════════
   Desenhadas em canvas, não em DOM. Duzentos elementos com
   animação CSS obrigariam o navegador a recalcular estilo de
   duzentas caixas a cada quadro; num canvas é um desenho só. */
.mo-particulas{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:0; transition:opacity 1.6s ease .5s;
}
.mo-pronto .mo-particulas{ opacity:1; }

/* ══════════ 2. Feixe sobre os fios dourados ══════════
 *
 * A técnica: uma CÓPIA do fundo, clareada e em mistura `screen`,
 * revelada por uma faixa diagonal que atravessa a tela devagar.
 *
 * Como o `screen` só clareia o que já é claro, o feixe acende os
 * fios dourados e as partículas do desenho — e não faz nada no
 * navy escuro. É energia circulando DENTRO das linhas que já
 * existem, sem redesenhar nenhuma.
 *
 * Foi por isso que descartei desenhar curvas novas por cima:
 * elas nunca cairiam exatamente sobre as do JPEG, e duas curvas
 * quase alinhadas é pior que nenhuma.
 */
.mo-feixe{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  /* a imagem vem do JS, que a copia do ::before do body */
  filter:brightness(2.1) saturate(1.15);
  mix-blend-mode:screen;
  opacity:.55;
  -webkit-mask-image:linear-gradient(115deg,
      transparent 0%, transparent 38%,
      rgba(0,0,0,.35) 46%, #000 50%, rgba(0,0,0,.35) 54%,
      transparent 62%, transparent 100%);
          mask-image:linear-gradient(115deg,
      transparent 0%, transparent 38%,
      rgba(0,0,0,.35) 46%, #000 50%, rgba(0,0,0,.35) 54%,
      transparent 62%, transparent 100%);
  -webkit-mask-size:280% 280%; mask-size:280% 280%;
  animation:moFeixe 19s linear infinite;
}
@keyframes moFeixe{
  from{ -webkit-mask-position:120% 120%; mask-position:120% 120%; }
  to  { -webkit-mask-position:-40% -40%; mask-position:-40% -40%; }
}

/* ══════════ 3. Halo, anéis e cintilações — REMOVIDOS ══════════
 *
 * Os três eram sobreposições posicionadas sobre elementos da
 * arte anterior: o halo sob o capelo, os anéis sobre os círculos
 * concêntricos, as cintilações sobre os quatro ícones.
 *
 * A arte nova não tem nenhum deles. Sobreposição sem nada
 * embaixo não vira efeito — vira defeito.
 *
 * O que sobrou é o que a arte nova sustenta: as partículas
 * subindo até a marca e o feixe que percorre os fios dourados
 * que já existem no desenho.
 */

/* ══════════ 6. Painel de login ══════════
   Um reflexo lento atravessa o cartão a cada 14 segundos, e o
   fio da borda ganha um brilho que respira. O cartão em si não
   se move sozinho — só responde ao cursor, no JS. */
.cartao{ position:relative; }
.cartao::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:2;
  background:linear-gradient(112deg,
      transparent 42%, rgba(255,255,255,.055) 50%, transparent 58%);
  background-size:260% 260%;
  animation:moReflexo 14s ease-in-out infinite;
}
@keyframes moReflexo{
  0%,72%{ background-position:130% 130%; }
  100%  { background-position:-30% -30%; }
}

/* ══════════ 7. Logo ══════════
 *
 * NADA. A marca não recebe halo, brilho, reflexo nem sombra.
 *
 * Eu já tinha errado nisto uma vez: um drop-shadow dourado de
 * 18px sobre uma arte com antialias espalhado virou uma nuvem
 * que preencheu a caixa inteira e leu como retângulo atrás da
 * logo. O Adrian apontou, eu tirei, escrevi "marca não se
 * decora" no comentário — e na versão seguinte pus um halo
 * dourado atrás dela de novo.
 *
 * A regra, agora escrita onde ela é aplicada: a logo entra como
 * o arquivo é. Se alguma animação futura precisar de luz por
 * perto, que seja em outro elemento, nunca sobre a marca.
 */

/* ══════════ 8. Entrada ══════════
   A sequência inteira cabe em 1,5s. A referência pede que o
   usuário sinta a interface "acordar" — acordar é rápido. */
.mo-cena{ opacity:0; animation:moEntra 1.1s ease .1s forwards; }
@keyframes moEntra{ to{ opacity:1; } }

/* "transforma." entra depois de "Excelência que", com um sopro
   de desfoque que se resolve. É o único lugar da tela com
   blur animado: em mais de um, o custo aparece. */
.marca-corpo h1 .linha:nth-child(2) > span{
  display:inline-block;
  animation:moPalavra .9s cubic-bezier(.19,1,.28,1) .5s both;
}
@keyframes moPalavra{
  from{ opacity:0; transform:translateY(8px); filter:blur(6px); }
  to  { opacity:1; transform:none;            filter:blur(0); }
}

/* ══════════ 9. Diferenciais ══════════ */
.ben{ transition:transform .4s var(--curva); }
.ben:hover{ transform:translateY(-3px); }
.ben-ic{ position:relative; overflow:hidden; }
/* Fio de luz percorrendo o contorno do ícone no hover. */
.ben-ic::after{
  content:''; position:absolute; inset:-1px; border-radius:50%;
  background:conic-gradient(from 0turn, transparent 0 78%,
             rgba(244,196,94,.75) 88%, transparent 96%);
  opacity:0; transition:opacity .4s;
  animation:moGira 3.4s linear infinite; }
.ben:hover .ben-ic::after{ opacity:1; }
@keyframes moGira{ to{ transform:rotate(1turn); } }

/* ══════════ 10. Botão ══════════
   O reflexo já existe na regra do botão dourado. Aqui entra só
   a compressão no clique — o retorno físico que faz o botão
   responder ao dedo, e não só ao olho. */
.btn-ouro-cheio:active{ transform:translateY(0) scale(.985); }

/* ══════════ Movimento reduzido ══════════
   Quem pediu ao sistema para reduzir animação recebe a tela
   parada. Tudo o que está aqui é enfeite; nada some de
   funcional. */
@media (prefers-reduced-motion:reduce){
  .mo-feixe, .cartao::after{ animation:none; }
  .mo-particulas{ display:none; }
  .marca-corpo h1 .linha:nth-child(2) > span{ animation:none; opacity:1; }
  .mo-cena{ animation:none; opacity:1; }
}

/* ══════════ Telas menores ══════════
   No celular a camada some quase inteira. Não é só desempenho:
   a arte fica atrás do formulário empilhado, e movimento atrás
   de campo de senha atrapalha quem digita. */
@media (max-width:1080px){
  .mo-feixe{ opacity:.32; }
}
@media (max-width:640px){
  .mo-particulas, .mo-feixe{ display:none; }
}