/* The loading screen (kit/carga.js). Linked from the page's head so it is
   painted with the page's first frame, before any script has run: black, the
   time gate's swirl, where you are going, the bar, what is loading. */
.carga { position: fixed; inset: 0; z-index: 50; background: #000; display: grid; place-content: center; justify-items: center; gap: 14px; color: #e9e3d6; font: 600 15px 'Pixelify Sans', 'Courier New', monospace; transition: opacity .35s; touch-action: none; user-select: none; -webkit-user-select: none; }
.carga[hidden] { display: none; }
.carga.out { opacity: 0; pointer-events: none; }
.carga .gate { position: relative; width: min(46vmin, 256px); height: min(46vmin, 256px); transform: scaleY(0.72); }
.carga .gate canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; will-change: transform; opacity: 0; transition: opacity .3s; }
.carga .gate.on canvas.swirl { opacity: 1; }
.carga .gate canvas.swirl + canvas.swirl { inset: 9%; width: 82%; height: 82%; mix-blend-mode: screen; }
.carga .gate.on canvas.swirl + canvas.swirl { opacity: .55; }
.carga .gate canvas.boom { inset: -60%; width: 220%; height: 220%; opacity: 1; transform: scaleY(1.39); }
.carga .glow { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(190,230,255,.75), rgba(90,150,255,.35) 45%, rgba(40,60,255,0)); animation: carga-latido 1.6s ease-in-out infinite alternate; will-change: opacity, transform; }
@keyframes carga-latido { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
.carga .gate.burst canvas.swirl { transition: opacity .25s, transform .25s; opacity: 0 !important; }
.carga .gate.burst .glow { transition: opacity .3s; opacity: 0; animation: none; }
.carga .dest { margin: 0; font-size: 20px; color: #ffe9a8; letter-spacing: .06em; text-align: center; padding: 0 16px; }
.carga .dest:empty { display: none; }
.carga .bar { width: min(64vw, 280px); height: 8px; border: 2px solid #8fa0c8; border-radius: 4px; overflow: hidden; background: #10131c; }
.carga .bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #4a78d8, #9fd0ff); transition: transform .25s; }
.carga .hint { margin: 0; min-height: 2.6em; max-width: min(86vw, 360px); font-size: 13px; line-height: 1.3; color: #c9d4ee; text-align: center; padding: 0 16px; }
.carga .stat { margin: -8px 0 0; font: 500 11px 'IBM Plex Mono', ui-monospace, monospace; color: #6f7c9c; font-variant-numeric: tabular-nums; }
.carga .flash { position: fixed; inset: 0; background: radial-gradient(circle, #fff 0, #dff1ff 40%, #9fd0ff 100%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .carga .glow { animation: none; } }