/* The bench loader (lab/lib/intro.js): the hub pen sketch drawing itself, a label and a thin bar. */
.lab-loader {
  --lab-mono: 'JetBrains Mono', ui-monospace, monospace;
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.lab-loader-sketch {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(560px, 70vw);
  transform: translate(-50%, -50%);
  overflow: visible;
  transition: opacity 0.6s ease;
  filter: drop-shadow(0 0 10px rgba(88, 166, 255, 0.28));
}
.lab-loader-status {
  position: absolute;
  left: 50%;
  top: calc(44% + min(200px, 27vw));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font: 500 11.5px/1 var(--lab-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: opacity 0.6s, top 0.6s;
}
.lab-loader-label { color: #e6edf3; }
.lab-loader-track {
  position: relative;
  width: 160px;
  height: 2px;
  border-radius: 1px;
  overflow: hidden;
  background: rgba(201, 209, 217, 0.12);
}
.lab-loader-bar {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #58a6ff, #ffa657);
}
/* A glint that runs on the compositor: it moves even while a shader compile blocks the main thread. */
.lab-loader-track::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(240, 246, 252, 0.7), transparent);
  animation: lab-glint 1.1s linear infinite;
}
@keyframes lab-glint { from { transform: translateX(-40px); } to { transform: translateX(160px); } }

.lab-loader.handoff .lab-loader-sketch { opacity: 0; }
.lab-loader.handoff .lab-loader-status { top: calc(100% - 70px - env(safe-area-inset-bottom)); }
.lab-loader.done .lab-loader-status { opacity: 0; }
.lab-loader.done .lab-loader-track::after { animation: none; }
.lab-loader.error .lab-loader-label { color: #ff7b72; white-space: normal; text-align: center; max-width: 80vw; }
.lab-loader.error .lab-loader-track::after { animation: none; }
@media (min-width: 760px) and (min-height: 520px) {
  .lab-loader.handoff .lab-loader-status { top: calc(100% - 60px); }
}

/* Ink: the same tones as the lab hub (hub.css). JS sets opacity and dash offset per stroke. */
.lab-loader .paper { filter: url(#lab-ink); }
.lab-loader .t-ink { --c: #e6edf3; }
.lab-loader .t-faint { --c: rgba(201, 209, 217, 0.36); }
.lab-loader .t-blue { --c: #79c0ff; }
.lab-loader .t-orange { --c: #ffa657; }
.lab-loader .t-purple { --c: #d2a8ff; }
.lab-loader .t-green { --c: #56d364; }
.lab-loader .t-red { --c: #ff7b72; }
.lab-loader .s {
  fill: none;
  stroke: var(--c);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.lab-loader .s.t-faint { stroke-width: 0.85; }
.lab-loader .s.again { stroke-opacity: 0.45; }
.lab-loader .s.filled { fill-opacity: 0; }
.lab-loader .s.dash { stroke-dasharray: 5 6; stroke-dashoffset: 0; }
.lab-loader .s.dash.flow { animation: lab-flow 1.4s linear infinite; }
.lab-loader .d { fill: var(--c); opacity: 0; }
.lab-loader .lbl { fill: var(--c); opacity: 0; font: 500 11px var(--lab-mono); letter-spacing: 0.04em; }
.lab-loader .lbl.t-faint { fill: rgba(201, 209, 217, 0.62); }
.lab-loader g { transform-box: view-box; }
@keyframes lab-flow { to { stroke-dashoffset: -22; } }

@media (prefers-reduced-motion: reduce) {
  .lab-loader .s.dash.flow, .lab-loader-track::after { animation: none; }
}