/* ════════════════════════════════════════════════════════════
   INTRO LOGOTIPO — piezas REALES del aguila.svg vuelan desde
   fuera de pantalla, convergen formando el logo, explotan en un
   destello, y se revela el aguila.svg real, nítido y completo.
   Capa 100% aislada, prefijo mj- en todo.
   ════════════════════════════════════════════════════════════ */

#mj-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: radial-gradient(circle at 50% 55%, #0a1e35 0%, #071525 55%, #040d18 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  opacity: 1;
  transition: opacity .8s ease;
}
#mj-intro.mj-hide { opacity: 0; pointer-events: none; }
#mj-intro * { box-sizing: border-box; margin: 0; padding: 0; }

#mj-intro .mj-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,229,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0;
  animation: mjGridIn 1.5s ease forwards .1s;
}
@keyframes mjGridIn { to { opacity: 1; } }

#mj-intro .mj-glow-orb {
  position: absolute;
  width: 760px; height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.12) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.6);
  opacity: 0;
  animation: mjOrbPulse 4.5s ease-in-out forwards .2s;
}
@keyframes mjOrbPulse {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
  30%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: .7; transform: translate(-50%,-50%) scale(1.12); }
}

/* ── ESCENARIO ── */
#mj-intro .mj-logo-wrap {
  position: relative;
  width: min(420px, 78vw);
  height: min(444px, 82vw);
  z-index: 2;
}

#mj-intro svg#mj-tri-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* piezas reales del logo, vuelan desde fuera y convergen a su posición real */
#mj-intro .mj-piece {
  fill: #22d8c2;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(34,216,194,0.85)) drop-shadow(0 0 14px rgba(0,229,255,0.5));
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.3);
  transform-box: fill-box;
  transform-origin: center;
  animation: mjPieceFly var(--dur, .9s) cubic-bezier(.16,.8,.3,1) forwards var(--delay, 0s);
}
@keyframes mjPieceFly {
  0%   { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.3); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
}

/* al revelar, las piezas armadas se disuelven con la explosión */
#mj-intro.mj-reveal .mj-piece {
  animation: mjPieceExplode .5s ease forwards;
}
@keyframes mjPieceExplode {
  to { opacity: 0; transform: scale(1.6); }
}

/* ── SVG REAL DEL LOGO (revelación final, nítida) ── */
#mj-intro .mj-logo-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 0 26px rgba(34,216,194,0.55));
  transform: scale(.92);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.6,.3,1);
}
#mj-intro.mj-reveal .mj-logo-real {
  opacity: 1;
  transform: scale(1);
}

/* flotación sutil tras revelar */
#mj-intro.mj-reveal .mj-logo-wrap {
  animation: mjFloat 3.4s ease-in-out infinite .2s;
}
@keyframes mjFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

#mj-intro.mj-launch .mj-logo-wrap {
  animation: mjFloat 3.4s ease-in-out infinite, mjLaunch 1s cubic-bezier(.3,0,.2,1) forwards;
}
@keyframes mjLaunch {
  to { transform: translateY(-160px) scale(1.18); opacity: 0; }
}

/* ── DESTELLO DE EXPLOSIÓN (blanco -> cyan -> transparente, igual al usado en versiones previas) ── */
#mj-intro .mj-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9), rgba(0,229,255,0.25) 35%, transparent 65%);
  opacity: 0;
  pointer-events: none;
}
#mj-intro.mj-launch .mj-flash { animation: mjFlash .6s ease forwards; }
#mj-intro.mj-reveal .mj-flash { animation: mjFlashReveal .45s ease forwards; }
@keyframes mjFlash {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes mjFlashReveal {
  0%   { opacity: 0; }
  40%  { opacity: .8; }
  100% { opacity: 0; }
}

#mj-intro .mj-title-wrap {
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  width: 90%;
}
#mj-intro.mj-reveal .mj-title-wrap {
  animation: mjTitleIn .7s ease forwards .3s;
}
@keyframes mjTitleIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#mj-intro .mj-title-wrap h2 {
  font-size: clamp(15px, 3vw, 22px);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 20px rgba(0,229,255,0.5);
}
#mj-intro .mj-title-wrap h2 span { color: #22d8c2; }
#mj-intro .mj-title-wrap p {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 2px;
  color: #5a8fa8;
  text-transform: uppercase;
}

#mj-intro .mj-skip {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5a8fa8;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 100px;
  padding: 9px 18px;
  cursor: pointer;
  opacity: 0;
  animation: mjSkipIn .5s ease forwards .6s;
  transition: border-color .2s, color .2s, background .2s;
}
#mj-intro .mj-skip:hover { border-color: #00e5ff; color: #00e5ff; background: rgba(0,229,255,0.08); }
@keyframes mjSkipIn { to { opacity: 1; } }
#mj-intro .mj-skip svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

#mj-intro .mj-progress-wrap {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  opacity: 0;
  animation: mjSkipIn .5s ease forwards .4s;
}
#mj-intro .mj-progress-bar {
  width: 100%;
  height: 2px;
  background: rgba(0,229,255,0.12);
  border-radius: 100px;
  overflow: hidden;
}
#mj-intro .mj-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00b8cc, #00e5ff);
  border-radius: 100px;
  transition: width .3s linear;
}
#mj-intro .mj-progress-label {
  text-align: center;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #5a8fa8;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  #mj-intro .mj-piece,
  #mj-intro .mj-logo-real,
  #mj-intro .mj-logo-wrap,
  #mj-intro .mj-title-wrap,
  #mj-intro .mj-skip,
  #mj-intro .mj-progress-wrap,
  #mj-intro .mj-grid-bg,
  #mj-intro .mj-glow-orb {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  #mj-intro .mj-skip { bottom: 18px; right: 16px; padding: 8px 14px; font-size: 10px; }
  #mj-intro .mj-progress-wrap { bottom: 70px; width: 160px; }
  #mj-intro .mj-title-wrap { bottom: 14%; }
}