/*
 * Warp loader — overlay a pantalla completa con fondo transparente,
 * nave delta animada, anillos orbitales y estela de exhaust.
 * Usa las variables de marca de landing.css (--mi-*); este bloque
 * las redeclara con los mismos valores como respaldo por si loader.css
 * se usa en una página que no cargue landing.css.
 */
:root {
  --mi-navy: #0b1020;
  --mi-blue: #0062ff;
  --mi-cyan: #00d4ff;
  --mi-muted: #64748b;
}

.mi-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: opacity 0.45s ease;
}
.mi-loader[data-state="leaving"] { opacity: 0; pointer-events: none; }

.mi-loader canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mi-loader__haze {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 98, 255, 0.16), rgba(0, 212, 255, 0.06) 55%, transparent 72%);
  filter: blur(2px);
  animation: mi-pulse 3s ease-in-out infinite;
}

.mi-loader__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}

.mi-loader__orbit { position: relative; width: 176px; height: 176px; display: flex; align-items: center; justify-content: center; }

.mi-loader__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(0, 212, 255, 0.14); }
.mi-loader__ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(from 0deg, transparent 0%, var(--mi-cyan) 6%, transparent 16%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: mi-spin 3.4s linear infinite;
  filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.7));
}
.mi-loader__ring--outer { inset: -34px; border-color: transparent; }
.mi-loader__ring--outer::before {
  background: conic-gradient(from 210deg, transparent 0%, var(--mi-blue) 5%, transparent 13%);
  animation: mi-spin 5.6s linear infinite reverse;
  filter: drop-shadow(0 0 3px rgba(0, 98, 255, 0.55));
}
.mi-loader__ring--outer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(0, 98, 255, 0.32) 0deg 0.6deg, transparent 0.6deg 7.5deg);
  -webkit-mask: radial-gradient(circle, transparent 96%, #000 97%, #000 99%, transparent 100%);
          mask: radial-gradient(circle, transparent 96%, #000 97%, #000 99%, transparent 100%);
  animation: mi-spin 90s linear infinite;
}

.mi-loader__ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, 0.6);
  opacity: 0;
}
.mi-loader__ping.is-active { animation: mi-ping 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes mi-ping {
  0% { transform: scale(0.55); opacity: 0.9; border-width: 1.5px; }
  100% { transform: scale(1.9); opacity: 0; border-width: 0.5px; }
}

@keyframes mi-spin { to { transform: rotate(360deg); } }
@keyframes mi-pulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.08); opacity: 1; } }

.mi-loader__ship {
  position: absolute;
  width: 58px;
  height: 58px;
  offset-path: path("M -36 170 C -26 90, -12 -10, -2 -100 C 4 -150, 14 -180, 24 -220");
  offset-distance: 0%;
  offset-rotate: auto 90deg;
  animation: mi-fly 1.9s cubic-bezier(0.2, 0.65, 0.3, 1) forwards;
}
.mi-loader[data-arrived="true"] .mi-loader__ship {
  animation: mi-fly 1.9s cubic-bezier(0.2, 0.65, 0.3, 1) forwards, mi-hover 1.9s ease-in-out 1.9s infinite;
}

@keyframes mi-fly {
  from { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  to { offset-distance: 100%; opacity: 1; }
}
@keyframes mi-hover {
  0%, 100% { transform: translateY(-4px) rotate(0deg) scale(1); }
  50% { transform: translateY(-14px) rotate(6deg) scale(1.03); }
}

.mi-loader[data-state="leaving"] .mi-loader__ship {
  animation: mi-warp-exit 0.62s cubic-bezier(0.5, 0, 0.85, 0.35) forwards !important;
}
@keyframes mi-warp-exit {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  35% { transform: translate(40px, -60px) rotate(-18deg) scale(1.1, 0.9); opacity: 1; }
  100% { transform: translate(340px, -420px) rotate(-30deg) scaleX(2.6) scaleY(0.4); opacity: 0; }
}

.mi-loader__ship svg { width: 100%; height: 100%; filter: drop-shadow(0 0 9px rgba(0, 212, 255, 0.55)); }
.mi-loader__thrust { transform-origin: 50% 0%; animation: mi-thrust-pulse 0.9s ease-in-out infinite; }
@keyframes mi-thrust-pulse { 0%, 100% { transform: scaleY(1); opacity: 0.55; } 50% { transform: scaleY(1.22); opacity: 0.9; } }
.mi-loader__beacon { animation: mi-beacon 2.2s ease-in-out infinite; }
@keyframes mi-beacon { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.mi-loader__word {
  font-family: Orbitron, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--mi-navy);
  text-align: center;
  opacity: 0;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.85);
  animation: mi-word-in 0.6s ease-out 0.6s forwards;
}
.mi-loader__status {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; color: var(--mi-muted);
  opacity: 0;
  animation: mi-word-in 0.4s ease-out 0.95s forwards;
}
.mi-loader__status::before, .mi-loader__status::after { content: ""; width: 12px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); opacity: 0.5; }
.mi-loader__status::after { transform: scaleX(-1); }
@keyframes mi-word-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.mi-loader__type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 1px solid currentColor;
  animation: mi-type 0.9s steps(20, end) 1.05s forwards, mi-caret 0.8s step-end 1.05s infinite;
}
@keyframes mi-type { to { width: 20ch; } }
@keyframes mi-caret { 50% { border-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .mi-loader__ship, .mi-loader[data-arrived="true"] .mi-loader__ship, .mi-loader[data-state="leaving"] .mi-loader__ship {
    offset-path: none; position: static; margin: 0 auto; animation: mi-word-in 0.4s ease-out forwards !important;
  }
  .mi-loader__ring::before, .mi-loader__ring--outer::before, .mi-loader__ring--outer::after,
  .mi-loader__haze, .mi-loader__thrust, .mi-loader__beacon, .mi-loader__ping { animation: none; }
  .mi-loader__word, .mi-loader__status { animation: mi-word-in 0.4s ease-out forwards; }
  .mi-loader__type { width: 20ch; border-right-color: transparent; animation: none; }
}