/* loadingScreen.css — world boot overlay.
 * A random hexagon terrain tile rendered as a "decrypting" hacker feed:
 * scanline sweep, RGB-split glitch, pulsing wireframe + a falling-glyph
 * matrix rain, sitting above a terminal boot log. Dismissed by JS once the
 * first world snapshot lands (loadingScreen.js). Pure presentation: all
 * dismissal is event-driven, never on a fixed timer. */

#v2-loading {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 38%, rgba(0, 212, 255, 0.10), transparent 60%),
    linear-gradient(160deg, #04141d 0%, var(--bg-primary) 55%, #04141d 100%);
  transition: opacity 600ms ease;
}

/* Faint drifting cyan grid behind everything. */
#v2-loading::before {
  content: '';
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--neon-tint) 1px, transparent 1px),
    linear-gradient(90deg, var(--neon-tint) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.5;
  animation: ll-grid-drift 12s linear infinite;
}

/* CRT scanlines on top. */
#v2-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(
    to bottom,
    transparent, transparent 50%,
    rgba(0, 0, 0, 0.10) 50%, rgba(0, 0, 0, 0.10)
  );
  background-size: 100% 4px;
}

#v2-loading.ll-done {
  opacity: 0;
  pointer-events: none;
}

@keyframes ll-grid-drift {
  to { background-position: 44px 44px, 44px 44px; }
}

/* ── Matrix rain ─────────────────────────────────────────────────────────── */
.ll-rain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Fade the rain top and bottom so columns bleed in/out. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.ll-rain-col {
  position: absolute;
  top: -120%;
  white-space: pre;
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.15;
  color: var(--neon-primary);
  text-shadow: 0 0 6px rgba(0, 212, 255, 0.55);
  opacity: 0.32;
  will-change: transform;
  animation: ll-rain-fall linear infinite;
}
@keyframes ll-rain-fall {
  from { transform: translateY(0); }
  to   { transform: translateY(230vh); }
}

/* ── Center stack ────────────────────────────────────────────────────────── */
.ll-loading-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 24px;
}

/* ── v2 low-poly hexagon tile (rendered in #ll-hex-canvas) ───────────────── */
.ll-hex-stage {
  position: relative;
  width: 260px;
  height: 260px;
}

.ll-hex-tag {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon-primary);
  text-shadow: var(--text-glow-cyan);
  opacity: 0.85;
  z-index: 3;
}

/* Soft cyan footprint glow under the floating tile. */
.ll-hex-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.22), transparent 70%);
  filter: blur(8px);
  animation: ll-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes ll-glow-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* Glitch-jitter wrapper (separate element from the canvas so its transform/
   hue-shift can't collide with the canvas decode flicker). */
.ll-hex-view {
  position: absolute;
  inset: 0;
  animation: ll-hex-jitter 5s steps(1) infinite;
}
.ll-hex-canvas {
  width: 100%;
  height: 100%;
  display: block;
  animation: ll-hex-decode 1.7s ease-out both;
}
@keyframes ll-hex-decode {
  0%   { opacity: 0; filter: brightness(2.4) saturate(0) hue-rotate(40deg); }
  14%  { opacity: 1; }
  18%  { filter: brightness(0.5) saturate(0.4); }
  22%  { filter: brightness(1.8) hue-rotate(-30deg); }
  100% { opacity: 1; filter: none; }
}
@keyframes ll-hex-jitter {
  0%, 92%, 100% { transform: translate(0); filter: none; }
  93% { transform: translate(-4px, 1px); filter: hue-rotate(80deg); }
  95% { transform: translate(3px, -1px);  filter: hue-rotate(-60deg); }
  97% { transform: translate(-2px, 0);    filter: hue-rotate(30deg); }
}

/* Vertical scan-line sweeping over the tile. */
.ll-hex-scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ll-hex-scan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 34%;
  top: -34%;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(0, 212, 255, 0.5) 50%,
    transparent 60%
  );
  mix-blend-mode: screen;
  animation: ll-hex-scan 2.4s linear infinite;
}
@keyframes ll-hex-scan { to { top: 100%; } }

/* Targeting reticle corners. */
.ll-reticle {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--neon-primary);
  opacity: 0.7;
  filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.6));
  animation: ll-frame-pulse 2.2s ease-in-out infinite;
}
.ll-reticle.tl { top: -8px; left: -8px;  border-right: 0; border-bottom: 0; }
.ll-reticle.tr { top: -8px; right: -8px; border-left: 0;  border-bottom: 0; }
.ll-reticle.bl { bottom: -8px; left: -8px;  border-right: 0; border-top: 0; }
.ll-reticle.br { bottom: -8px; right: -8px; border-left: 0;  border-top: 0; }
@keyframes ll-frame-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } }

/* ── Title ───────────────────────────────────────────────────────────────── */
.ll-loading-title {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(0, 212, 255, 0.35);
}
.ll-loading-title span { color: var(--neon-primary); }

/* ── Terminal console ────────────────────────────────────────────────────── */
.ll-loading-console {
  width: min(420px, 86vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ll-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 84px;
  justify-content: flex-end;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.ll-log-line .ll-ok { color: var(--success); }

.ll-bar {
  height: 4px;
  width: 100%;
  background: rgba(0, 212, 255, 0.10);
  border: 1px solid var(--neon-muted);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}
.ll-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--neon-muted), var(--neon-primary));
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
  transition: width 400ms ease;
}

.ll-status {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--neon-primary);
  text-shadow: var(--text-glow-cyan);
}
.ll-cursor { animation: ll-blink 1s steps(1) infinite; }
@keyframes ll-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (max-width: 640px) {
  .ll-hex-stage { width: 210px; height: 210px; }
  .ll-loading-title { font-size: 28px; }
}