/* =====================================================================
   ChainLayerTwo panel — the chain-link loading screen (spec §5).
   Two interlocking chain links, drawn as SVG strokes, rotating/linking
   with a subtle glow. Shown as a centered overlay with a "linking…"
   label for a minimum of 300ms (enforced in loader.js) on: page load,
   sign-in submit, device approve, and admin actions.

   Shared by panel.html and activate.html — also reused (dimmed, motion
   stilled) as the backdrop motif behind the "you're in the queue" pending
   screen on panel.html (see .queue-card in panel.css).
   ===================================================================== */

.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(3px);
}
.loader-overlay[hidden] {
  display: none;
}

/* dimmed, non-interactive variant used as a backdrop motif (queue screen) */
.loader-overlay.is-ambient {
  position: absolute;
  background: transparent;
  backdrop-filter: none;
  opacity: 0.16;
  pointer-events: none;
}
.loader-overlay.is-ambient .loader-label {
  display: none;
}

.loader-chain {
  color: var(--accent);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent));
}
.loader-svg {
  display: block;
  width: 84px;
  height: 56px;
  overflow: visible;
}
.loader-svg .link {
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
  stroke-linecap: round;
}
.loader-svg .link-a {
  transform-origin: 44px 26px;
  animation: link-swing-a 1.4s ease-in-out infinite;
}
.loader-svg .link-b {
  transform-origin: 60px 40px;
  animation: link-swing-b 1.4s ease-in-out infinite;
}
@keyframes link-swing-a {
  0%, 100% { transform: rotate(0deg); opacity: 0.85; }
  50% { transform: rotate(-14deg); opacity: 1; }
}
@keyframes link-swing-b {
  0%, 100% { transform: rotate(0deg); opacity: 0.85; }
  50% { transform: rotate(14deg); opacity: 1; }
}
@keyframes link-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 40%, transparent)); }
  50% { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 75%, transparent)); }
}
.loader-chain {
  animation: link-glow-pulse 1.4s ease-in-out infinite;
}

.loader-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.loader-label::after {
  content: "";
  display: inline-block;
  width: 1ch;
}

@media (prefers-reduced-motion: reduce) {
  .loader-svg .link-a,
  .loader-svg .link-b,
  .loader-chain {
    animation: none;
  }
  .loader-chain {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 55%, transparent));
  }
}