/* =============================================================================
   ENTRAR EN EL UNIVERSO (01-10-2026) — el velo de la portada. Lo mueve
   assets/js/universo.js. Va en el <head>: tiene que estar desde el primer
   cuadro, o se vería la portada a medio montar, que es lo que se quería tapar.

   Dos capas: el FONDO (negro y polvo dorado), que se abre en un círculo desde
   el centro, y la FIRMA, que se dibuja encima y, al abrirse, viaja a su sitio
   en la portada. Van separadas para que el círculo no recorte la firma.
   ========================================================================== */
@property --hueco { syntax: '<length>'; inherits: false; initial-value: 0px; }

.universo { position: fixed; inset: 0; z-index: 1000; pointer-events: auto; }
.universo__fondo {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, #17120d 0%, #0d0b09 60%, #070605 100%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--hueco), #000 calc(var(--hueco) + 1px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--hueco), #000 calc(var(--hueco) + 1px));
}
.universo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* La firma, en el centro, del tamaño de la de la portada por dos. */
.universo__firma { position: absolute; left: 50%; top: 50%; width: min(36rem, 78vw); transform: translate(-50%, -54%); }
.universo__firma .firma { display: block; width: 100%; height: auto; transform-origin: 50% 50%; will-change: transform; }
.universo__firma .firma path {
  fill: none; stroke: #fff; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round;
  animation-name: universo-escribir; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes universo-escribir { to { stroke-dashoffset: 0; } }

/* Abrir: el fondo se abre en un círculo; la firma viaja (universo.js) y, al
   final, cede el sitio a la de la portada, que estaba escondida debajo. */
.universo--abriendo { pointer-events: none; }
.universo--abriendo .universo__fondo { animation: universo-hueco 1.3s cubic-bezier(0.65, 0, 0.25, 1) 0.1s both; }
@keyframes universo-hueco { from { --hueco: 0px; } to { --hueco: 120vmax; } }
.universo-viajando .portal__firma { opacity: 0; }

/* Y la portada, ya entera, se acerca a su sitio mientras se abre el hueco. */
.universo-abriendo main#contenido, .universo-abriendo .cabecera {
  animation: universo-acercarse 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes universo-acercarse { from { transform: scale(1.12); opacity: 0.25; } }

/* Mientras dura, la página no se mueve debajo. */
.universo-entrando body { overflow: hidden; }

/* Con «reducir movimiento»: sin polvo ni firma, solo el círculo, en medio segundo. */
.universo--corto canvas, .universo--corto .universo__firma { display: none; }
.universo--corto.universo--abriendo .universo__fondo { animation-duration: 0.55s; animation-delay: 0s; }
.universo-abriendo:has(.universo--corto) main#contenido,
.universo-abriendo:has(.universo--corto) .cabecera { animation-duration: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .universo--abriendo { animation: universo-fundido 0.5s ease both; }
  .universo--abriendo .universo__fondo { animation: none; }
  .universo-abriendo main#contenido, .universo-abriendo .cabecera { animation: none; }
  @keyframes universo-fundido { to { opacity: 0; } }
}