/* Pantalla de carga de Jaime.Lab: filas de «JAIME.LAB» en contorno que cruzan muy rápido sobre el azul marino,
   como la intro del portafolio pero sin el nombre al final: es una transición entre páginas. Va en el HTML desde el primer cuadro, así nunca se ve
   el crema vacío mientras carga la página. Solo transform y opacidad. */

.jl-carga { position: fixed; inset: 0; z-index: 99999; background: #000050; overflow: hidden; cursor: progress; opacity: 1; transition: opacity .3s cubic-bezier(.16, 1, .3, 1); user-select: none; }
.jl-carga.sale { opacity: 0; pointer-events: none; }
.jl-carga .jl-fila { position: absolute; left: 0; width: max-content; display: flex; white-space: nowrap; font-family: Inter, system-ui, sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.86; opacity: 0; animation: jl-entra .35s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: var(--ent, 0s); }
.jl-carga .jl-pista { display: flex; animation: jl-deriva var(--vel, 34s) linear infinite; animation-delay: var(--desfase, 0s); will-change: transform; }
.jl-carga .jl-fila.inversa .jl-pista { animation-direction: reverse; }
.jl-carga .jl-pal { padding-right: .3em; color: transparent; -webkit-text-stroke: 1.5px rgba(250, 250, 240, .5); }
.jl-carga .jl-fila { --op: .6; }
@keyframes jl-entra { from { opacity: 0; transform: translateY(26px); } to { opacity: var(--op, 1); transform: none; } }
@keyframes jl-deriva { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .jl-carga .jl-fila { animation: jl-aparece .3s linear forwards; }
  .jl-carga .jl-pista { animation: none; }
  @keyframes jl-aparece { to { opacity: var(--op, 1); } }
}