/*
 * O mínimo da cortina de abertura, num arquivo à parte e ligado no <head>.
 *
 * A cortina é HTML estático (ver `cortinaEstatica` em scripts/svg-marca.mjs) e pinta
 * antes de qualquer script. A folha principal do site chega pelo bundle — no modo de
 * desenvolvimento, só DEPOIS do JavaScript —, e nesse intervalo o SVG da marca aparecia
 * sem estilo, ocupando a tela inteira, antes de encolher para a cortina (o "símbolo
 * gigante" no F5). Este arquivo é pequeno, bloqueia a pintura e garante que o primeiro
 * quadro já seja o certo: fundo escuro e o símbolo centrado, no tamanho final.
 *
 * Arquivo e não `<style>`: a CSP do deploy é `style-src 'self'`.
 */
html {
  background: #0b0a11;
}

.abertura {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #0b0a11;
}

.abertura-painel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.abertura-marca,
.abertura-marca > .brand-mark-svg {
  display: block;
  width: min(68vw, 400px);
  height: min(68vw, 400px);
}

/*
 * O traço se desenhando, aqui e não só na folha principal. Sem isto, no F5 o símbolo
 * pintava INTEIRO por um instante (este arquivo já tinha chegado, a folha principal
 * não), e quando a folha principal chegava a animação começava do zero: o símbolo sumia
 * e se redesenhava. Com a animação declarada desde o primeiro quadro, a folha principal
 * repete a mesma declaração — mesmo nome, mesmos tempos — e o navegador não a reinicia.
 *
 * Os valores precisam ser IGUAIS aos de `src/styles.css` (bloco da cortina);
 * `src/marca.test.ts` confere o comprimento nos dois arquivos.
 */
.abertura .bm-trace {
  animation: risca 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.1s backwards;
}

.abertura .bm-tronco { --traco: 768.57; }

.abertura .bm-ponto {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: padAssenta 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.35s both;
}

@keyframes risca {
  from { stroke-dasharray: var(--traco); stroke-dashoffset: var(--traco); }
  to   { stroke-dasharray: var(--traco); stroke-dashoffset: 0; }
}

@keyframes padAssenta {
  from { opacity: 0; transform: scale(0.2) rotate(-90deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/*
 * O REATOR. Três anéis chegam de fora (escala 1,8 → 1), em sequência, e passam a girar
 * em sentidos alternados em volta da peça enquanto ela se desenha: tracejado mint por
 * fora, as marcações violeta no meio, três arcos claros por dentro, e um núcleo de luz.
 *
 * No fim da carga, a cortina PULSA (`data-estado="pulsando"`, posto por abertura.ts): a
 * peça acende e incha um instante, os anéis se expandem e somem — e então ela esfarela.
 */
.abertura-marca {
  position: relative;
}

.abertura-reator {
  position: absolute;
  inset: -40%;
  width: auto;
  height: auto;
  /* A folha do site limita svg a 100% da largura; aqui isso encolheria os anéis. */
  max-width: none;
  overflow: visible;
  pointer-events: none;
}

.reator-anel {
  fill: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: reatorEntra 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reator-anel-1 {
  stroke: #34e5b0;
  stroke-width: 0.8;
  stroke-dasharray: 14 6;
  opacity: 0.6;
}

.reator-anel-2 {
  stroke: #9d8cff;
  stroke-width: 3.2;
  stroke-dasharray: 1.4 4.6;
  opacity: 0.75;
  animation-delay: 0.12s;
}

.reator-anel-3 {
  stroke: #c6bcff;
  stroke-width: 1.2;
  stroke-dasharray: 70 22 34 22;
  opacity: 0.55;
  animation-delay: 0.24s;
}

.reator-giro {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.reator-giro-1 { animation: reatorGira 8s linear infinite; }
.reator-giro-2 { animation: reatorGira 12s linear infinite reverse; }
.reator-giro-3 { animation: reatorGira 4.5s linear infinite; }

.reator-nucleo {
  transform-box: fill-box;
  transform-origin: center;
  animation: nucleoAcende 1.4s ease 0.3s both;
}

@keyframes reatorEntra {
  from { opacity: 0; transform: scale(1.8); }
}

@keyframes reatorGira {
  to { transform: rotate(360deg); }
}

@keyframes nucleoAcende {
  from { opacity: 0; transform: scale(0.4); }
}

/* O pulso, antes do esfarelamento. */
.abertura[data-estado="pulsando"] .abertura-marca {
  animation: marcaPulsa 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.abertura[data-estado="pulsando"] .abertura-marca > .brand-mark-svg {
  animation: marcaAcende 0.52s ease both;
}

.abertura[data-estado="pulsando"] .abertura-reator {
  animation: reatorExpande 0.52s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.abertura[data-estado="saindo"] .abertura-reator {
  visibility: hidden;
}

@keyframes marcaPulsa {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes marcaAcende {
  0%, 100% { filter: none; }
  45% { filter: drop-shadow(0 0 22px rgba(52, 229, 176, 0.85)) brightness(1.35); }
}

@keyframes reatorExpande {
  to { opacity: 0; transform: scale(1.5); }
}

/* A peça em código (src/abertura-codigo.ts): o canvas assume o lugar do vetor, no mesmo
   tamanho, e pulsa junto com ele. */
.abertura-codigo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.abertura[data-codigo] .abertura-marca > .brand-mark-svg {
  visibility: hidden;
}

.abertura[data-estado="pulsando"] .abertura-codigo {
  animation: marcaAcende 0.52s ease both;
}