/* ══════════════════════════════════════
   INTRO OVERLAY
   Sequência: águia entra no centro →
   águia puxa esquerda + texto vem da direita →
   saída dramática revela o login
══════════════════════════════════════ */

/* ── Overlay base: gradiente, nunca cor sólida ── */
.intro-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(ellipse at 50% 48%,
    rgba(9,16,3,1) 0%,
    rgba(7,7,7,1)  60%,
    #070707        100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ── Águia desfocada de fundo (atmosfera) ── */
.intro-bg-eagle {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; z-index: 0;
}
.intro-bg-eagle svg {
  width: 80vw; max-width: 900px; height: auto;
  opacity: 0.07;
  filter: blur(90px);
}

/* ── Scanlines de terminal ── */
.intro-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent          0px, transparent          3px,
    rgba(0,0,0,0.045)    3px, rgba(0,0,0,0.045)    4px
  );
  pointer-events: none; z-index: 1; opacity: 0.55;
}

/* ── Container interno — altura explícita para o text-wrap absoluto ── */
.intro-inner {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

/* ──────────────────────────────────────
   FASE 1 — Ícone entra centralizado
   SOLUÇÃO: dois divs separados para não conflitar animation vs transition
     .intro-eagle-mover → só transition (translateX)  — nenhuma animation
     .intro-eagle-wrap  → só animation (scale + glow) — nenhuma transition
────────────────────────────────────── */

/* Camada de MOVIMENTO — responde ao show-text via transition */
.intro-eagle-mover {
  flex-shrink: 0;
  transition: transform .65s cubic-bezier(.22,1,.36,1);
}

/* Camada de APARÊNCIA — escala de entrada + pulse, sem transition de transform */
.intro-eagle-wrap {
  width: 200px;
  height: 200px;
  animation:
    ilEagleIn    .85s cubic-bezier(.22,1,.36,1) .15s both,
    ilEaglePulse .50s ease-out                  1.0s both;
}
.intro-eagle-wrap svg { width: 100%; height: 100%; }

@keyframes ilEagleIn {
  from { opacity: 0; transform: scale(0.35); filter: blur(14px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0px);  }
}
@keyframes ilEaglePulse {
  0%   { filter: drop-shadow(0 0  0px rgba(174,234,0,0));   }
  50%  { filter: drop-shadow(0 0 44px rgba(174,234,0,.9));  }
  100% { filter: drop-shadow(0 0 10px rgba(174,234,0,.2));  }
}

/* ──────────────────────────────────────
   FASE 2 — Ícone puxa esquerda + texto vem da direita
   Cálculo de centralização do conjunto (200 + 20gap + 270 = 490px):
     mover translateX: -(490/2) + (200/2) = -145px
     texto left:50%  + translateX: -(490/2) + 200 + 20 = -25px
────────────────────────────────────── */
#intro.show-text .intro-eagle-mover {
  transform: translateX(-145px);
}

/* Texto: posição absoluta para não afetar o layout do flex-inner */
.intro-text-wrap {
  position: absolute;
  left: 50%;   /* viewport center (intro-inner é 200px centralizado) */
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  width: 270px;
  /* Começa fora da tela à direita */
  transform: translateX(500px);
  opacity: 0;
  filter: blur(8px);
  transition:
    transform .65s cubic-bezier(.22,1,.36,1),
    opacity   .60s cubic-bezier(.22,1,.36,1),
    filter    .60s cubic-bezier(.22,1,.36,1);
}
.intro-text-wrap svg { width: 100%; height: auto; overflow: visible; }

#intro.show-text .intro-text-wrap {
  transform: translateX(-25px); /* posição final centralizada no conjunto */
  opacity: 1;
  filter: blur(0px);
}

/* ──────────────────────────────────────
   FASE 3 — Saída dramática
────────────────────────────────────── */
#intro.outro {
  animation: introExit .7s cubic-bezier(.4,0,1,1) both;
}
@keyframes introExit {
  0%   { opacity: 1; transform: scale(1)     translateY(0);     filter: blur(0px);  }
  20%  { opacity: 1; transform: scale(1.03)  translateY(-6px);  filter: blur(0px);  }
  100% { opacity: 0; transform: scale(1.12)  translateY(-55px); filter: blur(20px); }
}