/* La entrada: el logo se arma sobre grafito y se posa en la cabecera
   (portada/entrada.js). Colores de la marca (manual, p. 05). */
#entrada{position:fixed;inset:0;z-index:100;overflow:hidden;cursor:pointer;transition:opacity .3s}
/* El fondo va en capas propias para poder fundirlo desde el reloj de la
   entrada (--fondo): un degradado no se anima. */
#entrada::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120vmax 90vmax at 50% 46%,#2f3842 0%,#283038 35%,#161b20 100%);
  opacity:var(--fondo,1)}
#entrada::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60vmax 40vmax at 50% 46%,rgba(176,212,140,.10),transparent 70%);
  opacity:calc(var(--fondo,1) * .5)}
#entrada.fin{opacity:0}
#entrada .en-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
#entrada .en-palabra{position:absolute;left:0;top:0;z-index:1;transform-origin:0 0;will-change:transform,width}
#entrada .en-palabra svg{display:block;width:100%;height:auto;overflow:visible}

/* La palabra se dibuja por partes desde entrada.js (mismo reloj que la
   esfera); aqui solo los origenes de cada transformacion. */
.en-palabra .cuerpo{transform-box:fill-box;transform-origin:50% 100%}
.en-palabra .tronco{transform-box:fill-box;transform-origin:50% 100%}
.en-palabra .fronda{transform-box:view-box;transform-origin:364px 56px}
.en-palabra .bajada{font:500 17px "Rajdhani","Agency FB","Oswald",sans-serif;fill:#AEB8C2;opacity:0}

#entrada .en-saltar{position:absolute;right:28px;bottom:24px;z-index:1;background:none;border:1px solid rgba(238,241,244,.25);
  color:rgba(238,241,244,.7);font:500 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 14px;border-radius:999px;cursor:pointer;opacity:0;animation:en-aparece .4s ease 1.2s forwards}
#entrada .en-saltar:hover{color:#fff;border-color:#B0D48C}
#entrada.saliendo .en-saltar{display:none}
@keyframes en-aparece{to{opacity:1}}

/* Mientras entra, la cabecera espera (el logo llega volando a ella). */
body.entrando #cabecera .marca{opacity:0}
body.entrando #cabecera > :not(.marca),body.entrando #riel,body.entrando #telemetria{opacity:0;transition:none}
#cabecera .marca,#cabecera > *,#riel,#telemetria{transition:opacity .5s ease}