/* ============================================================
   MADE'S COMPONENTES — Intro / Splash Screen
   Animação de entrada premium · Junho 2026
   Pure CSS — sem dependências externas
   ============================================================ */

/* Segurança: se JS não rodar, o overlay se esconde */
#intro-overlay[hidden] {
  display: none !important;
}

/* ─── Overlay base ──────────────────────────────────────────── */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Azul principal da marca */
  background: #0F395B;

  /* Padrão diagonal sutil — mesmo motivo do design system */
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.025) 0 1px,
    transparent 1px 26px
  );

  /* Sem interação durante a animação */
  pointer-events: none;
  user-select: none;
}

/* ─── Saída: fade + sobe levemente ──────────────────────────── */
#intro-overlay.intro--exit {
  animation: intro-overlay-exit 0.55s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes intro-overlay-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ─── Wrapper do símbolo ─────────────────────────────────────── */
.intro-mark {
  position: relative;
  width: 72px;
  height: 72px;
  display: block;
}

.intro-svg-mark {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* ─── G1: Frame técnico e diagonal — stroke que se desenha ──── */
/*    Aparece primeiro, como linhas de engenharia/construção     */

.intro-g1 rect {
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  animation: intro-stroke 0.70s cubic-bezier(.22,.61,.36,1) forwards 0s;
}

.intro-g1 line {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: intro-stroke 0.60s cubic-bezier(.22,.61,.36,1) forwards 0.12s;
}

/* ─── G2: Forma geométrica principal — encaixa com scale ─────── */
/*    A diagonal principal com reveal suave                       */

.intro-g2 {
  opacity: 0;
  transform: scale(.88);
  transform-box: fill-box;
  transform-origin: center;
  animation: intro-pop 0.50s cubic-bezier(.22,.61,.36,1) forwards 0.58s;
}

/* ─── G3: Triângulo cinza — aparece por último ───────────────── */

.intro-g3 {
  opacity: 0;
  transform: translate(4px, 4px);
  transform-box: fill-box;
  animation: intro-tri 0.40s cubic-bezier(.22,.61,.36,1) forwards 0.95s;
}

/* ─── Linha separadora ───────────────────────────────────────── */

.intro-sep {
  display: block;
  width: 0;
  height: 1px;
  background: rgba(255,255,255,.18);
  margin-top: 28px;
  animation: intro-sep-grow 0.50s ease forwards 1.00s;
}

/* ─── Logotipo ───────────────────────────────────────────────── */

.intro-logotype {
  opacity: 0;
  transform: translateY(10px);
  margin-top: 22px;
  animation: intro-logo 0.50s cubic-bezier(.22,.61,.36,1) forwards 1.15s;
}

.intro-logotype img {
  height: 24px;
  width: auto;
  display: block;
}

/* ─── Eyebrow / tagline mono ─────────────────────────────────── */

.intro-eyebrow {
  opacity: 0;
  margin-top: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  animation: intro-logo 0.45s ease forwards 1.38s;
}

/* ─── Corner geometric deco ──────────────────────────────────── */

.intro-corner {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 40px 40px;
  border-color: transparent transparent rgba(166,165,166,.16) transparent;
  opacity: 0;
  animation: intro-logo 0.35s ease forwards 0.98s;
}

/* ─── Keyframes ──────────────────────────────────────────────── */

@keyframes intro-stroke {
  to { stroke-dashoffset: 0; }
}

@keyframes intro-pop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes intro-tri {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes intro-sep-grow {
  to { width: 52px; }
}

@keyframes intro-logo {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Prefers-reduced-motion ─────────────────────────────────── */
/*    Se o usuário preferir sem animações, não exibimos nada      */

@media (prefers-reduced-motion: reduce) {
  #intro-overlay {
    display: none !important;
  }
}