/* zaxfun — la bitácora: los «créditos» que corren al lado de la web.
 *
 * Son datos que se calculan en vivo (cuánto lleva la Voyager fuera de casa,
 * cuánto ha viajado la Tierra desde que abriste esta pestaña…) y suben despacio
 * como los créditos de una película. Es decorado, no información: por eso va
 * `aria-hidden` y por eso a partir de cierto ancho se va al margen y deja de
 * competir con las tarjetas.
 *
 * El contenido central mide 980 px, así que hasta 1500 px de ventana no sobra
 * margen para una columna de 215 px sin pisar las tarjetas: por debajo de ahí
 * la bitácora baja al flujo normal, justo encima del pie. */

.bitacora {
  --alto: 190px;

  max-width: 460px;
  margin: clamp(3rem, 8vw, 4rem) auto 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--panel-borde);
}

.bitacora-titulo {
  margin: 0 0 .7rem;
  color: rgba(111, 211, 255, .5);
  font: 500 .62rem/1 var(--tipo-texto);
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* La ventana por la que se ven los créditos. El degradado de máscara los
   desvanece arriba y abajo en vez de cortarlos en seco. */
.bitacora-ventana {
  height: var(--alto);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 72%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 72%, transparent);
}

.bitacora-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.bitacora-lista li {
  padding: .3rem 0 .55rem;
  animation: aparecer .8s ease-out both;
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.bitacora-etiqueta {
  display: block;
  color: var(--texto-tenue);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
}

.bitacora-valor {
  display: block;
  margin-top: .1rem;
  color: rgba(191, 232, 255, .92);
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

/* El guion de la izquierda: el detalle que lo hace parecer un log de nave. */
.bitacora-lista li::before {
  content: '▸';
  float: left;
  margin-right: .45rem;
  color: rgba(185, 140, 255, .6);
  font-size: .7rem;
  line-height: 1.7;
}

/* ---------- A partir de aquí sí cabe en el margen ---------- */

@media (min-width: 1500px) {
  .bitacora {
    --alto: 300px;

    position: fixed;
    top: 50%;
    /* Pegada al margen derecho, pero nunca encima del contenido: se reserva el
       ancho de la columna (215) más un respiro (24) dentro del margen libre. */
    right: clamp(1rem, calc((100vw - 980px) / 2 - 239px), 6rem);
    transform: translateY(-50%);
    z-index: 2;
    width: 215px;
    max-width: none;
    margin: 0;
    padding-top: 0;
    border-top: 0;
    pointer-events: none;
  }
  .bitacora-titulo { opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .bitacora-lista { transition: none !important; }
  .bitacora-lista li { animation: none; }
}