/* ============================================================
   EL TELÓN · el cambio de una pantalla a la siguiente

   Aqui no hay color de marca escrito a mano salvo el violeta y el verde
   de Arkaia, que son los dos unicos que significan algo: el resto sale
   de las variables de la paleta que tenga puesta la pagina.

   El telon puede vivir a pantalla completa -el uso de verdad- o dentro
   de un escenario -el banco de pruebas de /transiciones-. Lo unico que
   cambia entre los dos casos es el anclaje.
   ============================================================ */

.paso{
  position:fixed; inset:0; z-index:95;
  /* Ojo: el telon NO lleva fondo propio. Lo que tapa son los tramos, y
     tienen que poder entrar sobre la pantalla anterior todavia visible.
     Si el contenedor pintara de negro no se veria ningun efecto.

     Si que se come los clics: mientras esta puesto, lo de debajo ya no
     es asunto de nadie. */
}
.paso--dentro{ position:absolute }

/* --- Los tramos ------------------------------------------------------
   Columnas, franjas o celdas, segun el efecto. Los genera paso.js y los
   coloca en absoluto: la rejilla la calcula el, que es quien sabe
   cuantos hay.
   --------------------------------------------------------------------- */
.paso-tramos{ position:absolute; inset:0; overflow:hidden }

.paso-tramo{
  position:absolute;
  /* Un pelin de degradado para que un tramo no sea un rectangulo plano y
     se note el volumen cuando pasa por delante del anterior. */
  background:
    linear-gradient(160deg,var(--superficie,#0D0D12),var(--fondo,#07070A) 62%);
  will-change:transform;
}

/* El filo del tramo, del lado por el que entra. Es lo que hace que se
   lea el movimiento: sin esto, tramos negros sobre negro. */
.paso-tramo::after{
  content:''; position:absolute;
  background:linear-gradient(var(--filo-giro,90deg),
    rgba(157,78,221,.85),rgba(64,208,80,.7));
  opacity:.9;
}
.paso-tramo--vertical::after{ top:0; bottom:0; width:2px }
.paso-tramo--vertical.paso-tramo--baja::after{ left:0 }
.paso-tramo--vertical.paso-tramo--sube::after{ right:0 }
.paso-tramo--horizontal::after{ left:0; right:0; height:2px; --filo-giro:90deg }
.paso-tramo--horizontal.paso-tramo--baja::after{ top:0 }
.paso-tramo--horizontal.paso-tramo--sube::after{ bottom:0 }
/* Las celdas del mosaico no tienen "lado por el que entran": crecen. */
.paso-tramo--celda::after{ inset:0; opacity:.14 }

/* El iris tampoco tiene lado: es un circulo que crece desde el centro.
   El filo no puede ir en ::after -un rectangulo dentro de un circulo no
   da un borde redondo-, asi que se hace con box-shadow sobre el propio
   tramo, que si respeta el border-radius. */
.paso-tramo--iris{
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(157,78,221,.55), 0 0 50px rgba(196,137,228,.4);
}
.paso-tramo--iris::after{ display:none }

/* ======================================================================
   EL NÚCLEO · la pantalla de "Adelante"

   Cuatro versiones muy distintas, no cuatro colores del mismo dibujo:
   cambia la composicion entera. Todas llevan el logo de Arkaia original.

     sello     centrado, el emblema manda            (sobrio)
     placa     asimetrico, abajo a la izquierda      (editorial)
     registro  con marco y parte de sistema          (tecnico)
     halo      el emblema enorme y difuminado detras (atmosferico)

   Lo comun va primero; lo propio de cada version, en su bloque.
   ====================================================================== */

.paso-nucleo{
  position:absolute; inset:0;
  display:grid; align-content:center; justify-items:center;
  padding:clamp(1.5rem,4vw,3rem);
  text-align:center;
  opacity:0;                       /* lo levanta GSAP cuando ya esta tapado */
}

.paso-sello{
  position:relative;
  width:clamp(148px,17vw,208px); aspect-ratio:1;
  display:grid; place-items:center;
}
/* El disco es el que recorta. Va aparte del .paso-sello para que el marco
   de esquinas, que es cuadrado y va por fuera, no se lleve el recorte. */
.paso-disco{
  position:absolute; inset:0;
  display:grid; place-items:center;
  border-radius:50%;
  overflow:hidden;
}
.paso-disco img{
  width:82%; height:auto;
  filter:drop-shadow(0 0 30px rgba(64,208,80,.5));
}

.paso-anillo{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
}
.paso-anillo-fondo{ stroke:rgba(255,255,255,.08); stroke-width:2 }
.paso-anillo-arco{
  stroke:url(#paso-fusion);
  stroke-width:3;
  stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(196,137,228,.6));
}

/* La linea de escaner. La recorta el disco, asi que recorre el emblema y
   no la pantalla entera. */
.paso-barrido{
  position:absolute; left:-10%; right:-10%; top:0;
  height:38%;
  background:linear-gradient(180deg,
    transparent,rgba(196,137,228,.22) 45%,rgba(64,208,80,.5) 50%,
    rgba(196,137,228,.22) 55%,transparent);
  opacity:0;
  pointer-events:none;
}

/* Las cuatro esquinas. Van por fuera del emblema, como una mira. */
.paso-marco{ position:absolute; inset:-14%; pointer-events:none }
.paso-marco i{
  position:absolute; width:20px; height:20px;
  border:1.5px solid var(--marca-verde,#40D050);
  opacity:.75;
}
.paso-marco i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0 }
.paso-marco i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0 }
.paso-marco i:nth-child(3){ bottom:0; right:0; border-left:0; border-top:0 }
.paso-marco i:nth-child(4){ bottom:0; left:0; border-right:0; border-top:0 }

.paso-titulo{
  margin-top:1.8rem;
  font-family:var(--f-marca);
  font-size:clamp(1.35rem,2.6vw,1.85rem);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 0 30px rgba(178,101,205,.35);
}
.paso-texto{
  margin-top:.6rem;
  font-family:var(--f-arisa);
  font-size:1.05rem;
  font-weight:500;
  color:var(--tinta-2,#ADA6B8);
}

/* La regla de Placa: se dibuja de izquierda a derecha. */
.paso-regla{
  width:min(420px,52vw); height:1px;
  margin:1.25rem 0 .25rem;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--violeta,#9D4EDD),var(--marca-verde,#40D050),transparent);
}

/* El parte de Registro. Monoespaciada a proposito: es lo unico de todo
   esto que quiere parecer una maquina hablando. */
.paso-parte{
  list-style:none; margin:1.35rem 0 0; padding:0;
  display:grid; gap:.3rem; justify-items:start;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--tinta-2,#ADA6B8);
}
.paso-parte li{ display:flex; align-items:center; gap:.55rem }
.paso-parte li::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--marca-verde,#40D050);
  box-shadow:0 0 8px var(--marca-verde,#40D050);
}

.paso-barra{
  width:min(240px,52%); height:2px;
  margin-top:1.6rem;
  border-radius:2px;
  background:rgba(255,255,255,.09);
  overflow:hidden;
}
.paso-barra i{
  display:block; width:100%; height:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--violeta,#9D4EDD),var(--marca-verde,#40D050));
}


/* --- Qué se enciende -------------------------------------------------
   Las piezas de los cuatro nucleos y los tres indicadores viven todas en
   el HTML; aqui se deciden cuales se ven. Es menos codigo que montarlas y
   desmontarlas, y permite cambiar de version sin recargar la pagina, que
   es lo que hace el banco de pruebas.
   --------------------------------------------------------------------- */
.paso-anillo,
.paso-barrido,
.paso-barra,
.paso-regla,
.paso-marco,
.paso-parte{ display:none }

.paso--anillo  .paso-anillo{ display:block }
.paso--barrido .paso-barrido{ display:block }
.paso--barra   .paso-barra{ display:block }


/* ======================================================================
   1 · SELLO — centrado, el emblema manda
   La version sobria: no hay mas que el logo, una palabra y una linea.
   ====================================================================== */
/* No necesita nada: es la comun de arriba tal cual. */


/* ======================================================================
   2 · PLACA — asimetrico, abajo a la izquierda
   Como un cartel: el emblema pequeno de membrete, una regla, y el rotulo
   enorme. El unico de los cuatro que no esta centrado.
   ====================================================================== */
.paso--n-placa .paso-nucleo{
  align-content:end; justify-items:start;
  text-align:left;
  padding:clamp(1.75rem,6vw,4.5rem);
}
.paso--n-placa .paso-sello{ width:clamp(64px,7vw,92px) }
.paso--n-placa .paso-regla{ display:block }
.paso--n-placa .paso-titulo{
  margin-top:.9rem;
  font-size:clamp(2.1rem,6vw,4.2rem);
  letter-spacing:.02em;
  line-height:1;
}
.paso--n-placa .paso-texto{
  margin-top:.7rem;
  font-size:clamp(1rem,1.5vw,1.25rem);
  max-width:38ch;
}
.paso--n-placa .paso-barra{ margin-top:1.5rem; width:min(320px,60vw) }


/* ======================================================================
   3 · REGISTRO — con marco y parte de sistema
   El mas tecnico: el emblema dentro de una mira y tres lineas que van
   apareciendo como un log. Ninguna nombra un servicio ni un puerto.
   ====================================================================== */
.paso--n-registro .paso-marco{ display:block }
.paso--n-registro .paso-parte{ display:grid }
.paso--n-registro .paso-nucleo{ justify-items:center }
.paso--n-registro .paso-sello{ width:clamp(124px,13vw,164px) }
.paso--n-registro .paso-titulo{
  margin-top:1.9rem;
  font-size:clamp(1.15rem,2vw,1.5rem);
  letter-spacing:.3em;
}
.paso--n-registro .paso-texto{ font-size:.98rem }
/* La parte va centrada como bloque, pero sus lineas alineadas entre si:
   una lista de sistema con los renglones descuadrados no se lee. */
.paso--n-registro .paso-parte{ justify-self:center }


/* ======================================================================
   4 · HALO — el emblema enorme y difuminado detras
   Casi no hay interfaz: el logo es el fondo y el texto flota encima.
   ====================================================================== */
/* El texto NO puede caer sobre el emblema: el logo lleva su propio
   ARKAIA CORPORATION dentro y las dos palabras se pisan hasta hacerse
   ilegibles. Asi que el emblema sube y el rotulo se va abajo, por debajo
   de su linea de texto. */
.paso--n-halo .paso-nucleo{ align-content:end; padding-bottom:clamp(2.5rem,13vh,7rem) }
.paso--n-halo .paso-sello{
  position:absolute;
  top:41%; left:50%;
  width:min(56vh,470px);
  transform:translate(-50%,-50%);
  opacity:.34;
}
.paso--n-halo .paso-disco img{ filter:blur(2.5px) drop-shadow(0 0 80px rgba(64,208,80,.5)) }
/* Con el emblema asi de grande el anillo se sale de madre: se afina. */
.paso--n-halo .paso-anillo-arco{ stroke-width:1.2 }
.paso--n-halo .paso-anillo-fondo{ stroke-width:.8 }
.paso--n-halo .paso-titulo{
  position:relative;
  margin-top:0;
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  letter-spacing:.34em;
  text-shadow:0 0 40px #000, 0 0 90px #000;
}
.paso--n-halo .paso-texto{
  position:relative;
  margin-top:.9rem;
  letter-spacing:.06em;
  text-shadow:0 0 24px #000;
}
.paso--n-halo .paso-barra{ position:relative; margin-top:2rem }


/* Dentro de un escenario todo es mas pequeno, asi que el nucleo tambien.
   Sin esto el logo del telon sale gigante al lado de la pagina en
   miniatura y la comparacion enganya. */
.paso--dentro .paso-nucleo{ padding:1.5rem }

@media (prefers-reduced-motion:reduce){
  /* Sin movimiento el telon no tiene sentido como transicion, pero si
     como aviso: se queda el nucleo sobre negro y ya. */
  .paso-tramos{ background:var(--fondo,#07070A) }
}