/* ==============================
   HERO — estilos completos
   ============================== */

/* Contenedor principal del HERO */
#hero {
  position: relative;
  overflow: hidden;
  background: #05080d;
}

/* Fondo del agujero negro */
.hero-bg-blackhole {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
}

/* IMAGEN DEL BLACKHOLE (ACÁ CAMBIÁ EL NOMBRE EXACTO DEL ARCHIVO) */
.blackhole-scale-layer {
  width: max(150vmin, 130vw);
  height: max(150vmin, 130vw);
  background-image: url("../imagenes/blackhole.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  animation: bhPulse 6s infinite ease-in-out alternate;
}

/* Lente — halo alineado al borde del agujero negro */
.blackhole-lens {
  position: absolute;
  width: 80vmin;   /* tamaño base del círculo del halo */
  height: 80vmin;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 50%,                 /* dónde empieza el halo (borde interior) */
    rgba(0, 255, 255, 0.70) 50%,     /* zona de máximo brillo del aro */
    rgba(0, 255, 255, 0.25) 50%,     /* desvanecimiento hacia afuera */
    transparent 84%                  /* fin del aro */
  );
  mix-blend-mode: screen;
  filter: blur(18px);
  opacity: 0.8;
  pointer-events: none;
}

/* Logo */
.hero-logo-overlay {
  z-index: 3;
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  transform: translateY(-20px); /* valor a gusto (+ baja, - sube) */
}

.hero-logo-center {
  width: clamp(220px, 30vw, 240px);
  height: auto;
  filter: drop-shadow(0 0 30px rgba(0,191,255,0.4));
  transform-origin: center center;
}

/* Animación de pulso SIN usar transform */
@keyframes bhPulse {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.05); }
}

/* Starfield encima */
#hero-starfield {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ==============================
   BLACKHOLE CORE MASK (negro absoluto)
   - Por encima del starfield (z=2 y DOM después)
   - Sigue el zoom/rotación del blackhole vía JS
   ============================== */
/* Oscurecimiento progresivo del fondo (viñeta ligada al agujero negro) */
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* por debajo de nave/logo, por encima del fondo y estrellas */
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.0) 40%,
    rgba(4, 60, 80, 0.7) 70%,   /* Azul Petróleo #043C50 */
    rgba(10, 15, 20, 0.97) 100% /* Off-Black Cósmico #0A0F14 */
  );
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

/* Aberración cromática del logo (usa variables desde JS) */
.hero-logo-center {
  position: relative;
  transform-origin: center center;
  --logo-chroma-offset: 0px;  /* cuánto se separan los bordes */
  --logo-chroma-alpha: 0;     /* intensidad del color (0–1) */
  filter:
    drop-shadow(var(--logo-chroma-offset) 0 0 rgba(0,191,255,var(--logo-chroma-alpha)))   /* Cian Eléctrico #00BFFF */
    drop-shadow(calc(-1 * var(--logo-chroma-offset)) 0 0 rgba(163,228,248,var(--logo-chroma-alpha))); /* Celeste Nebuloso #A3E4F8 */
}

.hero-logo-echo {
  position: absolute;
  width: clamp(180px, 20vw, 340px);
  height: auto;
  transform-origin: center center;
  opacity: 0;
  filter: blur(10px) brightness(1.1) saturate(1.1);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ==========================================================
   SHIP — Blackhole Exposure (shadow + desaturation)
   Pegar al FINAL de tu CSS de nave (ship.css o equivalente)
   ========================================================== */

#ship-wrapper .ship-inner{
  /* 0..1 (lo setea JS) */
  --ship-bh: 0;

  /* lo setea JS con url(...) del PNG, para clipear el overlay */
  --ship-mask: none;
}

/* 1) Perder color / oscurecer cuando se acerca al agujero negro */
#ship-wrapper .hero-ship{
  /* Base: ya la bajo un toque para que no “salte” contra el fondo */
  filter:
    saturate(calc(0.92 - (var(--ship-bh) * 0.55)))
    brightness(calc(0.98 - (var(--ship-bh) * 0.22)))
    contrast(calc(1.04 + (var(--ship-bh) * 0.10)));
  transition: filter 80ms linear;
  will-change: filter;
}

/* 2) “Sombra interna” (vignette/occlusion) clipeada por alpha del PNG */
#ship-wrapper .hero-ship-visual{
  position: relative;
  display: inline-block;
  line-height: 0; /* evita gaps raros */
}

#ship-wrapper .hero-ship-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Intensidad ligada a cercanía BH */
  opacity: calc(var(--ship-bh) * 0.85);

  /* Sombra/occlusión cinematográfica (no tapa todo, cae en bordes y “panza”) */
  background:
    radial-gradient(120% 90% at 50% 15%,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.18) 45%,
      rgba(0,0,0,0.55) 100%),
    radial-gradient(90% 140% at 50% 95%,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.22) 60%,
      rgba(0,0,0,0.70) 100%);

  /* Para que “ensucie” como sombra real, sin colorear */
  mix-blend-mode: multiply;
  filter: blur(0.35px);
  will-change: opacity;

  /* CLAVE: clipear por el alpha del PNG de la nave */
  -webkit-mask-image: var(--ship-mask);
  mask-image: var(--ship-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}


/* ==========================================================
   SHIP — THRUSTERS (LOW-COST BEAM) — TAPER + DEPTH
   - Base más ancha (cerca de la nave)
   - Punta más fina (profundidad)
   - Menos “altura hacia arriba” (más corto) + leve dispersión
   ========================================================== */

#ship-wrapper .ship-inner{
  --thruster-power: 0;
  --thruster-scale: 0;
  --thruster-opacity: 0;

  /* lo setea JS (0.85..1.20 aprox) */
  --thruster-fat: 1;

  /* ===== AJUSTE FINO POSICIÓN (ya lo tenías) ===== */
  --thruster-y: 18%;
  --thruster-left-x: 26%;
  --thruster-right-x: 54%;
  --thruster-offset-x: 340px;
  --thruster-offset-y: 160px;

  /* ===== AJUSTE DE “PROFUNDIDAD” (NUEVO) ===== */
  --thruster-length: 170px;  /* ↓ antes 240px (menos alto = más “hacia atrás”) */

  /* TAPER (más ancho abajo, más fino arriba) */
  --thruster-tip-inset: 44%;       /* ↑ más grande = punta más fina */
  --thruster-core-tip-inset: 47%;  /* core aún más fino */

  /* Dispersión leve (sensación de que se abre hacia el fondo) */
  --thruster-spread-deg: 4deg;
}

#ship-wrapper .ship-thrusters{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transform: translate(var(--thruster-offset-x), var(--thruster-offset-y));
}

#ship-wrapper .hero-ship{
  position: relative;
  z-index: 2;
}

body.header-mode #ship-wrapper .ship-thrusters{
  opacity: 0;
}

#ship-wrapper .thruster{
  position: absolute;
  width: 1px;
  height: 1px;
  top: var(--thruster-y);

  opacity: var(--thruster-opacity);
  transform: translate(-50%, -50%);
  transform-origin: center;

  will-change: opacity;
}

#ship-wrapper .thruster-left{
  left: var(--thruster-left-x);
  transform: translate(-50%, -50%) rotateZ(calc(-1 * var(--thruster-spread-deg)));
}

#ship-wrapper .thruster-right{
  left: var(--thruster-right-x);
  transform: translate(-50%, -50%) rotateZ(var(--thruster-spread-deg));
}

/* Outer plume (más ancha) */
#ship-wrapper .thruster::before{
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--thruster-length));

  width: clamp(32px, 5.2vw, 54px);      /* base más ancha */
  height: var(--thruster-length);

  transform:
    translateX(-50%)
    scaleY(var(--thruster-scale))
    scaleX(var(--thruster-fat));
  transform-origin: bottom;

  /* TAPER: punta fina, base ancha */
  clip-path: polygon(
    var(--thruster-tip-inset) 0%,
    calc(100% - var(--thruster-tip-inset)) 0%,
    100% 100%,
    0% 100%
  );

  border-radius: 999px;

  background:
    linear-gradient(to top,
      rgba(0,191,255,0.88) 0%,
      rgba(163,228,248,0.58) 26%,
      rgba(163,228,248,0.18) 66%,
      rgba(0,0,0,0) 100%),
    repeating-linear-gradient(to top,
      rgba(255,255,255,0.12) 0px,
      rgba(255,255,255,0.12) 6px,
      rgba(255,255,255,0.0) 14px,
      rgba(255,255,255,0.0) 24px);

  background-size: 100% 100%, 100% 240%;
  background-position: 0 0, 0 0;

  mix-blend-mode: screen;
  filter: blur(3.2px);

  will-change: transform, background-position;
  animation: aionThrusterFlow 1.05s linear infinite;
}

/* Core beam (más fino) */
#ship-wrapper .thruster::after{
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--thruster-length));

  width: clamp(12px, 2.2vw, 22px);      /* core más ancho abajo */
  height: var(--thruster-length);

  transform:
    translateX(-50%)
    scaleY(var(--thruster-scale))
    scaleX(var(--thruster-fat));
  transform-origin: bottom;

  clip-path: polygon(
    var(--thruster-core-tip-inset) 0%,
    calc(100% - var(--thruster-core-tip-inset)) 0%,
    100% 100%,
    0% 100%
  );

  border-radius: 999px;

  background: linear-gradient(to top,
    rgba(255,255,255,0.78) 0%,
    rgba(0,191,255,0.45) 38%,
    rgba(0,0,0,0) 100%);

  mix-blend-mode: screen;
  filter: blur(1.25px);

  will-change: transform, opacity;
  animation: aionThrusterFlicker 0.85s ease-in-out infinite;
}

@keyframes aionThrusterFlow{
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 0 240px; }
}

@keyframes aionThrusterFlicker{
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce){
  #ship-wrapper .thruster::before,
  #ship-wrapper .thruster::after{
    animation: none;
  }
}