/* Pantalla de entrada — recorrido sobre el campo de partículas.
 *
 * El intro es una capa por encima del home, en la misma página. Todo lo de acá
 * cuelga de #intro o de .con-intro: cuando el intro termina, se saca esa clase
 * y no queda nada de este archivo afectando al home. */

/* Sin JavaScript no hay intro que mostrar, y una capa opaca a pantalla completa
   dejaría el sitio inservible. Por eso arranca oculta y la habilita la clase,
   que la pone el propio script: si no corre, nunca se muestra. */
#intro,
#saltar {
  display: none;
}

.con-intro #intro,
.con-intro #saltar {
  display: block;
}

/* Mientras corre el intro el home está debajo pero no se puede recorrer: el
   scroll se libera recién cuando la capa se va. */
.con-intro,
.con-intro body {
  overflow: hidden;
}

/* La opacidad la escribe el script cuadro a cuadro, atada a cuánto lleva
   comido el logotipo: por eso acá no hay transición. Una transición pelearía
   con esas escrituras y el fundido saldría a destiempo. */
#intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #f9faf9;
}

#escena {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Viñeta: concentra la mirada en el horizonte y disimula el borde de la malla. */
#vineta {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 62%, transparent 25%, rgba(249, 250, 249, .88) 78%, #f9faf9 100%),
    linear-gradient(180deg, #f9faf9 0%, transparent 22%);
}

/* Fundido a blanco del cruce. */
#flash {
  position: absolute;
  inset: 0;
  background: #f9faf9;
  opacity: 0;
  pointer-events: none;
}

#saltar {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 25;
  padding: .6rem 1.1rem;
  font-family: var(--tipografia);
  font-size: .82rem;
  letter-spacing: .04em;
  color: #5b6b7a;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(91, 107, 122, .28);
  border-radius: 6px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: color .15s, border-color .15s, opacity .3s;
}
#saltar:hover,
#saltar:focus-visible {
  color: #14384c;
  border-color: rgba(20, 56, 76, .55);
  outline: none;
}

/* Sin intro no hay nada que saltear. */
#saltar.se-fue {
  opacity: 0;
  pointer-events: none;
}

/* Quien pide menos movimiento no ve el intro: el home está ahí desde el
   principio y la capa nunca se muestra. */
@media (prefers-reduced-motion: reduce) {
  .con-intro #intro,
  .con-intro #saltar {
    display: none;
  }
  .con-intro,
  .con-intro body {
    overflow: visible;
  }
}