/* ===========================================================
   Abertura — o X da marca se desenha, segura um instante e vira
   uma janela: a página aparece por dentro dele enquanto ele cresce
   até passar da tela.

   Tudo em pseudo-elementos do <html>, sem marcação nas páginas.
   A classe .intro é ligada por um script de uma linha no <head>
   (só na primeira página da sessão) e desligada pelo js/app.js
   quando a animação termina.

     ::before  cortina preta com um furo em forma de X (o furo só
               existe a partir da saída; antes, a cortina é inteira)
     ::after   o X verde por cima, alinhado com o furo
   =========================================================== */
html.intro {
  overflow: hidden;
  --x-w: clamp(72px, 9vw, 112px);
  --x-h: calc(var(--x-w) * 66 / 72);
  --x-in: 250ms;   /* respiro preto antes do X */
  --x-out: 1350ms; /* começo da saída */
}

html.intro::before,
html.intro::after {
  content: "";
  position: fixed;
  z-index: 10000;
  pointer-events: none;
}

/* Cortina. O segundo layer da máscara (o degradê) é a tela inteira; o
   primeiro é o X, que o `exclude` subtrai dela — vira o furo. Com
   mask-size 0 o X não existe e a cortina fica inteira. Sem suporte a
   mask-composite o furo não abre, e ela só esmaece no fim. */
html.intro::before {
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #0c1300 0, #000 55%);
  -webkit-mask: url(../img/sobre/x-mask.svg) center / 0 0 no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: url(../img/sobre/x-mask.svg) center / 0 0 no-repeat,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation:
    rx-furo 1ms var(--x-out) both,
    rx-zoom 850ms cubic-bezier(0.76, 0, 0.24, 1) var(--x-out) both;
}

/* O X verde. Entra com uma varredura diagonal (a máscara em degradê
   desliza), na mesma ordem em que se escreve um X: braço de cima,
   cruzamento, perninha de baixo.
   A caixa sobra 48px em volta do X: a máscara corta tudo na borda da
   caixa, inclusive o brilho, que sem essa folga virava um quadrado. */
html.intro::after {
  left: calc(50% - (var(--x-w) + 96px) / 2);
  top: calc(50% - (var(--x-h) + 96px) / 2);
  width: calc(var(--x-w) + 96px);
  height: calc(var(--x-h) + 96px);
  /* 2º layer: o contorno da saída, com tamanho 0 — só pra ele já estar
     baixado quando a saída começar, senão o X some por um instante */
  background:
    url(../img/sobre/x-mask.svg) center / var(--x-w) var(--x-h) no-repeat,
    url(../img/x-borda.svg?v=2) center / 0 0 no-repeat;
  -webkit-mask: linear-gradient(120deg, #000 42%, transparent 58%) 100% 100% / 300% 300% no-repeat;
  mask: linear-gradient(120deg, #000 42%, transparent 58%) 100% 100% / 300% 300% no-repeat;
  animation:
    rx-desenha 750ms cubic-bezier(0.65, 0, 0.35, 1) var(--x-in) both,
    rx-chega 750ms cubic-bezier(0.22, 1, 0.36, 1) var(--x-in) both,
    rx-brilho 1400ms ease-in-out var(--x-in) infinite alternate,
    rx-borda 850ms cubic-bezier(0.76, 0, 0.24, 1) var(--x-out) forwards;
}

@keyframes rx-desenha {
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

@keyframes rx-chega {
  from { transform: scale(0.88); }
  to   { transform: scale(1); }
}

@keyframes rx-brilho {
  from { filter: drop-shadow(0 0 0 rgba(147, 215, 0, 0)); }
  to   { filter: drop-shadow(0 0 22px rgba(147, 215, 0, 0.55)); }
}

/* Na saída o X cheio vira só o contorno, em cima da borda do furo, e cresce
   junto com ele (mesma curva, mesma escala de rx-zoom).
   Cresce pelo tamanho da caixa e do fundo, não por transform: o traço do
   x-borda.svg é non-scaling-stroke, então fica fino do começo ao fim — com
   scale() ele engrossaria 30x junto. O viewBox dele tem 2 de folga em volta
   pro traço não ser cortado, daí o 76/72 e o 70/66. */
@keyframes rx-borda {
  0%, 65% {
    background-image: none, url(../img/x-borda.svg?v=2);
    opacity: 1;
  }
  0% {
    background-size: 0 0, calc(var(--x-w) * 76 / 72) calc(var(--x-h) * 70 / 66);
    filter: drop-shadow(0 0 4px rgba(147, 215, 0, 0.5));
  }
  100% {
    background-image: none, url(../img/x-borda.svg?v=2);
    background-size: 0 0, calc(var(--x-w) * 30 * 76 / 72) calc(var(--x-h) * 30 * 70 / 66);
    width: calc(var(--x-w) * 32);
    height: calc(var(--x-h) * 32);
    left: calc(50% - var(--x-w) * 32 / 2);
    top: calc(50% - var(--x-h) * 32 / 2);
    filter: drop-shadow(0 0 4px rgba(147, 215, 0, 0.5));
    opacity: 0;
  }
}

@keyframes rx-furo {
  to {
    -webkit-mask-size: var(--x-w) var(--x-h), auto;
    mask-size: var(--x-w) var(--x-h), auto;
  }
}

/* O furo cresce a partir do centro do X (que cai no meio do traço longo,
   então é sempre "dentro"). Escala 30 já deixa a página quase inteira à
   mostra; o esmaecimento no fim cobre as pontas que sobram. */
@keyframes rx-zoom {
  0%   { transform: scale(1); opacity: 1; }
  65%  { opacity: 1; }
  100% { transform: scale(30); opacity: 0; }
}