.ship-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;

  /* ✅ Anti-spoiler: NO visible por defecto */
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ✅ Solo mostramos la nave cuando el usuario “revela” el HERO (expulsando el CORE)
   y efectivamente estamos parados en #hero */
body.hero-revealed[data-current-section="hero"]:not(.header-mode) .ship-wrapper{
  opacity: 1;
}

.ship-inner {
  position: relative;
  transform-origin: top center;
  transition: transform 0.6s ease;
  pointer-events: none;
  --thruster-power: 0; /* 0 = mínimo, 1 = máximo (se setea desde JS) */
}

.hero-ship {
  position: relative;
  z-index: 2; /* por delante de los propulsores */
  width: min(900px, 92vw);
  height: auto;
}

/* ==========================================
   PROPULSORES NAVE — AJUSTABLES
   ========================================== */

.ship-thrusters {
  position: absolute;
  bottom: 230px;           /* AJUSTABLE: anclaje vertical a la nave */
  left: 50%;
  transform: translateX(-50%);
  width: 260px;            /* AJUSTABLE: ancho total que cubre ambos propulsores */
  height: 160px;           /* AJUSTABLE: largo máximo de la llama */
  pointer-events: none;
  z-index: 1;              /* detrás de la nave */
}

.ship-thrusters .thruster {
  position: absolute;
  bottom: 0;
  width: 12px;             /* AJUSTABLE: ancho de cada propulsor */
  height: 90px;            /* AJUSTABLE: largo base de la llama */
  transform-origin: bottom center;
  overflow: visible;
}

/* Offset horizontal de cada propulsor (podés afinar estos %) */
.ship-thrusters .thruster-left {
  left: 32%;
}

.ship-thrusters .thruster-right {
  right: 32%;
}

/* Llama principal (usa --thruster-power de 0 a 1) */
.ship-thrusters .thruster::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform:
    translateX(-50%)
    scaleY(calc(0.3 + 0.7 * var(--thruster-power, 0)));
  width: 140%;
  height: 100%;
  background: radial-gradient(circle at 50% 100%,
              rgba(255,255,255,0.95) 0%,
              rgba(0,255,255,0.90) 20%,
              rgba(0,180,255,0.45) 45%,
              rgba(0,140,200,0.0) 100%);
  filter: blur(4px);
  opacity: calc(0.25 + 0.75 * var(--thruster-power, 0));
}

/* Halo suave hacia arriba */
.ship-thrusters .thruster::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform:
    translateX(-50%)
    scaleY(calc(0.4 + 0.6 * var(--thruster-power, 0)));
  width: 60%;
  height: 120%;
  background: linear-gradient(to top,
              rgba(0,255,255,0.9),
              rgba(0,255,255,0.0));
  filter: blur(8px);
  opacity: calc(0.15 + 0.85 * var(--thruster-power, 0));
}

.ship-wrapper--hero .ship-links { opacity: 0; pointer-events: none; }

/* HEADER MODE */
/* A partir de la 2ª sección, la nave deja de verse (toma control el HUD) */
body.header-mode .ship-wrapper {
  opacity: 0;
  pointer-events: none;
}

body.header-mode .ship-wrapper .ship-inner {
  transform: translateY(0) scale(0.75); /* mantenemos por compatibilidad */
  animation: none;
}

/* Menú entre las alas desactivado por completo */
body.header-mode .ship-links {
  opacity: 0;
  pointer-events: none;
}

/* Menú entre las alas */
.ship-links {
  position: absolute;
  left: 50%;
  bottom: 45%;              /* AJUSTABLE: altura del menú sobre la nave */
  transform: translateX(-50%);
  width: 80%;               /* AJUSTABLE: ancho total que ocupa el menú */
  display: flex;
  justify-content: space-between;
  gap: 60px;                /* AJUSTABLE: separación entre opciones del menú */
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 3;               /* por delante de la nave (hero-ship tiene z-index: 2) */
}

.ship-links a {
  color: var(--off-white);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

.lang-btn {
  background: transparent;
  color: var(--cian-electrico);
  border: none;
  font-size: 0.9rem;
}

/* Idle de la nave */
@keyframes shipIdle {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}