/* brand-intro — estilos da abertura de marca.
   Ajuste a aparência pelas variáveis em :root; o resto é mecânica. */

:root{
  --bi-bg:#060607;              /* cor da cortina — fundo preto Heimdall */
  --bi-glow-a:rgba(201,162,75,.30);  /* dourado Heimdall */
  --bi-glow-b:rgba(232,195,116,.18); /* dourado claro Heimdall */
  --bi-ease:cubic-bezier(.22,1,.36,1);
}

html.bi-lock,html.bi-lock body{overflow:hidden}

/* ---- cortina de arranque ----
   A cortina de verdade (.bi) nasce de JavaScript, e o módulo é um pedido de
   rede à parte que só executa depois do documento inteiro lido. O navegador
   não espera por isso: ele libera a primeira pintura assim que o CSS termina.
   Nessa janela a página aparecia normal — hero e tudo — e só então a cortina
   caía por cima. Era a piscada, grande na primeira visita (módulo pela rede) e
   quase nula no refresh (módulo em cache).

   Esta regra resolve pela ordem certa: ela mora num CSS bloqueante de
   renderização, então já está valendo no primeiro pixel que a página pinta —
   não há instante em que o conteúdo possa vazar. O JS não precisa mais ganhar
   corrida nenhuma; ele só tira a classe quando a cortina real já está montada.

   `bi-booted` é posto pelo brand-intro.js. A animação com atraso é a trava de
   segurança: se o módulo falhar ou não existir, a cortina sai sozinha em vez
   de deixar o site preto para sempre. */
html:not(.bi-booted)::before{
  content:'';position:fixed;inset:0;background:var(--bi-bg);
  z-index:2147483000;pointer-events:none;
  animation:bi-boot-out 0s linear 4s forwards}
@keyframes bi-boot-out{to{opacity:0;visibility:hidden}}
/* quem pediu menos movimento não vê abertura nenhuma (o JS também desiste) */
@media (prefers-reduced-motion:reduce){html:not(.bi-booted)::before{display:none}}

.bi{position:fixed;inset:0;z-index:2147483000;pointer-events:none}
.bi-bg{position:absolute;inset:0;background:var(--bi-bg);
  transition:opacity .75s var(--bi-ease)}
.bi-glow{position:absolute;left:50%;top:50%;width:min(1100px,120vw);height:min(700px,80vh);
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;filter:blur(30px);
  background:
    radial-gradient(40% 46% at 42% 50%,var(--bi-glow-a),transparent 70%),
    radial-gradient(34% 40% at 62% 46%,var(--bi-glow-b),transparent 70%);
  animation:bi-glow 1.5s var(--bi-ease) .1s both;
  transition:opacity .6s var(--bi-ease),transform .9s var(--bi-ease)}
@keyframes bi-glow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  45%{opacity:1}
  100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}}

/* o clone do logo. transform-origin:0 0 + translate/scale faz o pouso cair
   exatamente no rect do logo do header quando --bi-s chega a 1 */
.bi-lockup{position:fixed;left:0;top:0;transform-origin:0 0;
  transform:translate(var(--bi-x,0px),var(--bi-y,0px)) scale(var(--bi-s,4));
  transition:transform .9s cubic-bezier(.62,.02,.2,1)}
.bi-art{display:flex}

/* ---- formação: logo inteiro (padrão) ----
   abre a partir de uma fresta horizontal, saindo de fora de foco */
.bi-single .bi-art{animation:bi-form .6s cubic-bezier(.2,.8,.3,1) .14s both}
@keyframes bi-form{
  0%{clip-path:inset(49% 0 49% 0);opacity:0;transform:scale(.86);filter:blur(7px)}
  30%{opacity:1}
  100%{clip-path:inset(0 0 0 0);opacity:1;transform:scale(1);filter:blur(0)}}

/* ---- formação: dois tempos (data-intro-part="mark" e "word") ----
   o símbolo se forma, depois a palavra é revelada por uma linha de luz.

   O símbolo NÃO usa clip-path: o emblema é um círculo com halo (box-shadow
   externo), e clip-path recorta pela caixa retangular — o halo sairia cortado
   em quadrado durante toda a abertura, e `both` deixaria o recorte grudado
   depois do fim. Aqui ele entra por foco (escala + desfoque), que respeita a
   forma redonda. */
.bi-staged [data-intro-part="mark"]{animation:bi-form-mark .58s cubic-bezier(.2,.8,.3,1) .14s both}
@keyframes bi-form-mark{
  0%{opacity:0;transform:scale(.86);filter:blur(7px)}
  30%{opacity:1}
  100%{opacity:1;transform:scale(1);filter:blur(0)}}
.bi-staged [data-intro-part="word"]{animation:bi-wipe .52s cubic-bezier(.4,0,.2,1) .62s both}
@keyframes bi-wipe{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}

/* a linha de luz. Anda sobre a palavra (ou sobre o logo inteiro), com a
   geometria medida em JS e entregue em --bi-scan-x / --bi-scan-w */
.bi-scan{position:absolute;top:-40%;bottom:-40%;width:.6px;opacity:0;
  left:calc(var(--bi-scan-x,0px) + var(--bi-scan-w,0px) * 0);
  background:linear-gradient(180deg,transparent,#fff 22%,#fff 78%,transparent);
  box-shadow:0 0 3px 1px rgba(255,255,255,.6),0 0 8px 3px var(--bi-glow-a)}
.bi-single .bi-scan{animation:bi-scan .6s cubic-bezier(.4,0,.2,1) .3s both}
.bi-staged .bi-scan{animation:bi-scan .52s cubic-bezier(.4,0,.2,1) .62s both}
@keyframes bi-scan{
  0%{transform:translateX(0);opacity:0}
  12%{opacity:1}
  82%{opacity:1}
  100%{transform:translateX(var(--bi-scan-w,0px));opacity:0}}

/* Nada anda antes da arte estar decodificada (ver brand-intro.js).

   Cuidado com a cascata: os atalhos `animation:` acima reiniciam o
   play-state para running, e vários deles moram em seletores de duas
   classes (`.bi-staged .bi-scan`, `.bi-single .bi-art`). Uma pausa escrita
   como `.bi-scan{...}` tem especificidade menor e PERDE — a linha de luz
   saía correndo assim que entrava no DOM, sem esperar o resto. Por isso a
   pausa vem escopada em `.bi:not(.is-ready)`, que ganha de todos eles.
   Enquanto is-ready não chega, tudo fica em 0%; quando chega, o estado
   volta a running (valor inicial) e o roteiro inteiro parte junto. */
.bi:not(.is-ready) .bi-glow,
.bi:not(.is-ready) .bi-art,
.bi:not(.is-ready) .bi-scan,
.bi:not(.is-ready) [data-intro-part]{animation-play-state:paused}

/* saída */
.bi.is-out .bi-bg{opacity:0}
.bi.is-out .bi-glow{opacity:0;transform:translate(-50%,-50%) scale(1.2)}
.bi.is-land .bi-lockup{opacity:0;transition:opacity .18s linear}

/* pular: o que ainda estiver rodando salta para o fim */
.bi.is-fast .bi-art,.bi.is-fast .bi-scan,.bi.is-fast .bi-glow,
.bi.is-fast [data-intro-part]{animation-duration:.14s;animation-delay:0s}
.bi.is-fast .bi-lockup{transition-duration:.42s}

/* Enquanto .bi-running estiver no <html>, a página espera: segura a
   animação de entrada do hero (.intro-in) e as seções reveladas por
   IntersectionObserver (.reveal.in-view) do site Heimdall. */
html.bi-running .intro-in{animation-play-state:paused}
html.bi-running .reveal.in-view{opacity:0;transform:translateY(28px);transition:none}