/* =========================================================
   AURIFEX STUDIO :: entrada em tela cheia do Início (19/10/2026; no site desde 20/10/2026)
   O roteiro e as regras estão em js/entrada.js. Só no Início, pela chave ENTRADA_TELA_CHEIA de gerador/montar.py.
   ========================================================= */

/* a tela de entrada cobre o site desde a primeira pintura (a classe vem de entrada.js, no <head>) */
html.entrada-cheia body::before{content:"";position:fixed;inset:0;z-index:200;background:var(--fundo);pointer-events:none;transition:opacity var(--entrada-sai,.85s) cubic-bezier(.4,0,.2,1)}
html.entrada-saindo body::before{opacity:0}
/* enquanto a tela de entrada cobre tudo, o site por baixo não é pintado (o celular fica livre para a fundição);
   ele volta, ainda coberto, no instante parado entre o pouso do pixel e o voo do nome */
html.entrada-cheia:not(.entrada-pintada) body > :not(.entrada){visibility:hidden}
/* o lugar do logo no cabeçalho fica vazio até a cópia grande pousar nele */
html.entrada-cheia .topo .marca{visibility:hidden}
/* a capa espera: a cascata do título só começa quando o logo está chegando ao cabeçalho (regra 6.15);
   antes disso, o título subia por baixo do logo em voo e os dois se cruzavam */
html.entrada-cheia:not(.entrada-capa) .capa .entra,
html.entrada-cheia:not(.entrada-capa) .capa h1 .l i,
html.entrada-cheia:not(.entrada-capa) .capa-guias i{animation-play-state:paused}
/* depois da entrada, o resto da capa vem logo atrás do título, sem tela vazia esperando (regra 6.10);
   "entrada-feita" fica na página até o fim, para o atraso não mudar no meio da cascata */
html.entrada-feita .capa .entra{animation-delay:calc(.16s + var(--e,0) * .1s)}

.entrada{position:fixed;inset:0;z-index:201;cursor:pointer;-webkit-tap-highlight-color:transparent}
.entrada-marca{position:fixed;left:0;top:0;display:flex;align-items:center;white-space:nowrap;transform-origin:0 0;pointer-events:none;will-change:transform}

/* 1. fundição: a letra começa como molde vazio (contorno fino) e o ouro derretido sobe dentro dela */
.entrada-logo .le{fill-opacity:.05;stroke:var(--texto);stroke-opacity:0;stroke-width:1.15px;vector-effect:non-scaling-stroke;transition:stroke-opacity .3s ease,fill .55s ease}
.entrada-logo.molde .le{stroke-opacity:.42}
html[data-tom="claro"] .entrada-logo.molde .le{stroke-opacity:.5}
.entrada-logo .le.fundida{fill-opacity:1;stroke-opacity:0;transition:stroke-opacity .3s ease,fill .55s ease}

/* 1b. com o vídeo da fundição: ele cobre a tela; as letras desenhadas esperam e nascem douradas em cima das do
   vídeo, o vídeo some e elas esfriam até a cor do logo */
.entrada-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;background:var(--fundo);pointer-events:none;transition:opacity .45s ease}
.entrada-video.some{opacity:0}
.entrada-logo.na-espera .le{opacity:0}
.entrada-logo.quente .le{fill:var(--ouro);transition:none}
.entrada-logo .metal-corpo{fill:var(--ouro);transition:fill .45s ease}
.entrada-logo .metal-veio{fill:var(--ouro-forte)}
/* ao encher, o metal esfria e fica na cor do logo */
.entrada-logo .metal.fria .metal-corpo{fill:var(--frio,var(--texto))}

/* 3. a assinatura sobe embaixo do nome, palavra por palavra */
.entrada-frase{position:fixed;left:16px;right:16px;margin:0;text-align:center;font:500 clamp(15px,1.45vw,20px)/1.4 var(--texto-f);color:var(--texto-2);letter-spacing:.01em;pointer-events:none;text-wrap:balance;transition:opacity .25s ease}
.entrada-frase span{display:inline-block;opacity:0;transform:translateY(.55em);transition:opacity .5s ease calc(var(--i) * 50ms),transform .75s var(--curva) calc(var(--i) * 50ms)}
.entrada-frase span.ouro{color:var(--ouro)}
.entrada.com-frase .entrada-frase span{opacity:1;transform:none}

/* Pular: sempre à vista, embaixo; Esc no computador */
.entrada-pular{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:0;background:none;color:var(--texto-3);font:600 14px/1 var(--texto-f);cursor:pointer;opacity:0;animation:entrada-surge .5s ease .4s forwards;transition:color .2s}
.entrada-pular:hover{color:var(--texto)}
.entrada-tecla{font-size:11px;font-weight:600;line-height:1;padding:3px 6px;border:1px solid var(--linha-forte);border-radius:4px;color:var(--texto-3)}
html.toque .entrada-tecla{display:none}
@keyframes entrada-surge{to{opacity:1}}

/* 4. saída: a frase e o botão somem antes, o nome voa para o cabeçalho */
.entrada.saindo{cursor:default}
.entrada.saindo .entrada-frase{opacity:0}
.entrada.saindo .entrada-pular{visibility:hidden}