.warehouse-loading-overlay {
  position: fixed;
  inset: var(--ds-space-0);
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: var(--ds-space-4);
  background: var(--ds-loading-overlay);
}

.warehouse-loading-overlay.hidden {
  display: none;
}

.warehouse-loading-panel {
  display: grid;
  grid-template-columns: var(--ds-loading-visual-size) minmax(0, 1fr);
  align-items: center;
  width: min(100%, var(--ds-loading-panel-width));
  gap: var(--ds-gap-block);
  padding: var(--ds-space-5);
  border: var(--ds-border-default);
  border-radius: var(--ds-radius-surface);
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: var(--ds-loading-panel-shadow);
  font-family: var(--ds-font-family-body);
}

.warehouse-loading-copy {
  display: grid;
  gap: var(--ds-gap-caption);
}

.warehouse-loading-copy strong {
  color: var(--ds-text);
  font-size: var(--ds-font-size-heading-block);
  font-weight: var(--ds-font-weight-bold);
  line-height: var(--ds-line-height-compact);
}

.warehouse-loading-copy span {
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-body);
  line-height: var(--ds-line-height-body);
}

.warehouse-loading-visual {
  display: grid;
  place-items: center;
  min-width: var(--ds-loading-visual-size);
  min-height: var(--ds-loading-scene-height);
  overflow: hidden;
  border: var(--ds-border-default);
  border-radius: var(--ds-radius-control);
  background: var(--ds-surface-subtle);
}

.warehouse-loading-scene {
  display: none;
  width: calc(var(--ds-space-6) * 4);
  min-height: var(--ds-loading-scene-height);
}

[data-loading-variant="shelves"] .warehouse-loading-shelves,
[data-loading-variant="document"] .warehouse-loading-document,
[data-loading-variant="worker"] .warehouse-loading-worker {
  display: grid;
}

.warehouse-loading-shelves {
  align-content: center;
  justify-items: center;
}

.warehouse-loading-rack-illustration,
.warehouse-loading-worker-illustration {
  display: block;
  width: 100%;
  height: calc(var(--ds-loading-scene-height) - var(--ds-space-4));
  overflow: visible;
}

.warehouse-loading-illustration-line {
  fill: none;
  stroke: var(--ds-text);
  stroke-width: var(--ds-loading-line-size);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.warehouse-loading-rack-box {
  fill: var(--ds-warning-bg);
  stroke: var(--ds-border);
  stroke-width: var(--ds-loading-line-size);
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}

.warehouse-loading-rack-box-accent,
.warehouse-loading-worker-body {
  fill: var(--ds-primary-bg);
}

.warehouse-loading-rack-box-tilted {
  transform: rotate(9deg);
}

.warehouse-loading-rack-animated {
  --warehouse-rack-drop-start: calc(-1 * (var(--ds-space-6) + var(--ds-space-6) + var(--ds-space-6)));
}

.warehouse-loading-rack-animated .warehouse-loading-rack-box {
  animation-duration: calc(var(--ds-loading-motion-cycle) * 4);
  animation-timing-function: cubic-bezier(.42, 0, .2, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.warehouse-loading-rack-animated .warehouse-loading-rack-box-1 {
  animation-name: warehouse-rack-box-1-story;
}

.warehouse-loading-rack-animated .warehouse-loading-rack-box-2 {
  animation-name: warehouse-rack-box-2-story;
}

.warehouse-loading-rack-animated .warehouse-loading-rack-box-3 {
  animation-name: warehouse-rack-box-3-story;
}

.warehouse-loading-rack-animated .warehouse-loading-rack-box-4 {
  animation-name: warehouse-rack-box-4-story;
}

.warehouse-loading-rack-animated .warehouse-loading-rack-box-5 {
  animation-name: warehouse-rack-box-5-story;
}

.warehouse-loading-rack-animated .warehouse-loading-rack-box-6 {
  animation-name: warehouse-rack-box-6-story;
}

.warehouse-loading-rack-box-action {
  fill: var(--ds-primary-bg);
}

.warehouse-loading-document {
  align-content: center;
  justify-items: center;
  gap: var(--ds-space-1);
}

.warehouse-loading-paper {
  width: calc(var(--ds-space-6) * 2);
  height: calc(var(--ds-space-6) * 2 + var(--ds-space-2));
  border: var(--ds-border-default);
  border-radius: var(--ds-radius-compact);
  background: var(--ds-surface);
  animation: warehouse-document-feed var(--ds-loading-motion-document) ease-in-out infinite;
}

.warehouse-loading-scanner {
  width: calc(var(--ds-space-6) * 3);
  height: var(--ds-space-3);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-primary-bg);
}

.warehouse-loading-document span,
.warehouse-loading-worker span {
  color: var(--ds-accent-text);
  font-size: var(--ds-font-size-meta);
  font-weight: var(--ds-font-weight-strong);
  letter-spacing: var(--ds-letter-spacing-eyebrow);
}

.warehouse-loading-worker {
  align-content: center;
  justify-items: center;
  gap: var(--ds-space-1);
}

.warehouse-loading-worker-head {
  transform-box: view-box;
  transform-origin: 129px 29px;
  animation: warehouse-worker-look calc(var(--ds-loading-motion-worker) * 4) ease-in-out infinite;
}

.warehouse-loading-worker-face {
  fill: var(--ds-surface);
  stroke: var(--ds-text);
  stroke-width: var(--ds-loading-line-size);
  vector-effect: non-scaling-stroke;
}

.warehouse-loading-worker-eye {
  fill: none;
  stroke: var(--ds-text);
  stroke-width: calc(var(--ds-loading-line-size) * 1.25);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.warehouse-loading-worker-body {
  stroke: var(--ds-primary-bg);
  stroke-linejoin: round;
}

.warehouse-loading-worker-hand {
  fill: var(--ds-surface);
  stroke: var(--ds-text);
  stroke-width: var(--ds-loading-line-size);
  vector-effect: non-scaling-stroke;
}

.warehouse-loading-worker-arm {
  transform-box: view-box;
  animation-duration: calc(var(--ds-loading-motion-worker) * 4);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.warehouse-loading-worker-arm-left {
  transform-origin: 120px 49px;
  animation-name: warehouse-worker-left-hand-to-head;
}

.warehouse-loading-worker-arm-right {
  transform-origin: 138px 49px;
  animation-name: warehouse-worker-right-hand-to-head;
}

.warehouse-loading-worker-surprise {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: warehouse-worker-surprise calc(var(--ds-loading-motion-worker) * 4) ease-out infinite;
}

.warehouse-loading-preview {
  display: grid;
}

.warehouse-loading-preview .warehouse-loading-panel {
  width: 100%;
  box-shadow: var(--ds-shadow-none);
}

.loading-gallery-page {
  min-height: 100vh;
  margin: var(--ds-space-0);
  background: var(--ds-surface-subtle);
  color: var(--ds-text);
  font-family: var(--ds-font-family-body);
}

.loading-gallery-shell {
  display: grid;
  width: min(calc(100% - var(--ds-space-6) * 2), var(--ds-content-width));
  margin: var(--ds-space-6) auto;
  gap: var(--ds-gap-section);
}

.loading-gallery-header,
.loading-gallery-card {
  display: grid;
  gap: var(--ds-gap-block);
  padding: var(--ds-space-5);
  border: var(--ds-border-default);
  border-radius: var(--ds-radius-surface);
  background: var(--ds-surface);
}

.loading-gallery-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  height: auto;
  min-height: var(--ds-space-0);
  color: var(--ds-text);
}

.loading-gallery-header > div {
  display: grid;
  align-items: start;
  gap: var(--ds-gap-caption);
}

.loading-gallery-header h1,
.loading-gallery-card h2,
.loading-gallery-header p,
.loading-gallery-card p {
  margin: var(--ds-space-0);
}

.loading-gallery-header h1 {
  color: var(--ds-text);
  font-size: var(--ds-font-size-heading-page);
}

.loading-gallery-card h2 {
  font-size: var(--ds-font-size-heading-section);
}

.loading-gallery-header p,
.loading-gallery-card p {
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-body);
  line-height: var(--ds-line-height-body);
}

.loading-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-gap-block);
}

@keyframes warehouse-rack-box-1-story {
  0%, 4% { opacity: 0; transform: translateY(var(--warehouse-rack-drop-start)) rotate(0); }
  11% { opacity: 1; transform: translateY(var(--ds-space-1)) scaleY(.9) rotate(0); }
  14%, 82% { opacity: 1; transform: translateY(var(--ds-space-0)) scaleY(1) rotate(0); }
  85% { opacity: 1; transform: translate(calc(-1 * var(--ds-space-1)), var(--ds-space-2)) rotate(-10deg); }
  91% { opacity: 0; transform: translate(calc(-1 * var(--ds-space-3)), calc(var(--ds-space-6) + var(--ds-space-6))) rotate(-38deg); }
  92%, 100% { opacity: 0; transform: translate(calc(-1 * var(--ds-space-3)), calc(var(--ds-space-6) + var(--ds-space-6))) rotate(-38deg); }
}

@keyframes warehouse-rack-box-2-story {
  0%, 7% { opacity: 0; transform: translateY(var(--warehouse-rack-drop-start)) rotate(0); }
  14% { opacity: 1; transform: translateY(var(--ds-space-1)) scaleY(.9) rotate(0); }
  17%, 78% { opacity: 1; transform: translateY(var(--ds-space-0)) scaleY(1) rotate(0); }
  81% { opacity: 1; transform: translate(var(--ds-space-1), var(--ds-space-2)) rotate(10deg); }
  87% { opacity: 0; transform: translate(var(--ds-space-3), calc(var(--ds-space-6) + var(--ds-space-6))) rotate(38deg); }
  88%, 100% { opacity: 0; transform: translate(var(--ds-space-3), calc(var(--ds-space-6) + var(--ds-space-6))) rotate(38deg); }
}

@keyframes warehouse-rack-box-3-story {
  0%, 10% { opacity: 0; transform: translateY(var(--warehouse-rack-drop-start)) rotate(0); }
  17% { opacity: 1; transform: translateY(var(--ds-space-1)) scaleY(.9) rotate(0); }
  20%, 74% { opacity: 1; transform: translateY(var(--ds-space-0)) scaleY(1) rotate(0); }
  77% { opacity: 1; transform: translate(calc(-1 * var(--ds-space-1)), var(--ds-space-2)) rotate(-10deg); }
  83% { opacity: 0; transform: translate(calc(-1 * var(--ds-space-3)), calc(var(--ds-space-6) + var(--ds-space-5))) rotate(-34deg); }
  84%, 100% { opacity: 0; transform: translate(calc(-1 * var(--ds-space-3)), calc(var(--ds-space-6) + var(--ds-space-5))) rotate(-34deg); }
}

@keyframes warehouse-rack-box-4-story {
  0%, 13% { opacity: 0; transform: translateY(var(--warehouse-rack-drop-start)) rotate(0); }
  20% { opacity: 1; transform: translateY(var(--ds-space-1)) scaleY(.9) rotate(0); }
  23%, 70% { opacity: 1; transform: translateY(var(--ds-space-0)) scaleY(1) rotate(0); }
  73% { opacity: 1; transform: translate(var(--ds-space-1), var(--ds-space-2)) rotate(10deg); }
  79% { opacity: 0; transform: translate(var(--ds-space-3), calc(var(--ds-space-6) + var(--ds-space-4))) rotate(32deg); }
  80%, 100% { opacity: 0; transform: translate(var(--ds-space-3), calc(var(--ds-space-6) + var(--ds-space-4))) rotate(32deg); }
}

@keyframes warehouse-rack-box-5-story {
  0%, 16% { opacity: 0; transform: translateY(var(--warehouse-rack-drop-start)) rotate(0); }
  23% { opacity: 1; transform: translateY(var(--ds-space-1)) scaleY(.9) rotate(0); }
  26%, 66% { opacity: 1; transform: translateY(var(--ds-space-0)) scaleY(1) rotate(0); }
  69% { opacity: 1; transform: translate(calc(-1 * var(--ds-space-1)), var(--ds-space-2)) rotate(-10deg); }
  75% { opacity: 0; transform: translate(calc(-1 * var(--ds-space-3)), calc(var(--ds-space-6) + var(--ds-space-3))) rotate(-30deg); }
  76%, 100% { opacity: 0; transform: translate(calc(-1 * var(--ds-space-3)), calc(var(--ds-space-6) + var(--ds-space-3))) rotate(-30deg); }
}

@keyframes warehouse-rack-box-6-story {
  0%, 19% { opacity: 0; transform: translateY(var(--warehouse-rack-drop-start)) rotate(0); }
  27% { opacity: 1; transform: translateY(var(--ds-space-2)) scaleY(.88) rotate(13deg); }
  31%, 50% { opacity: 1; transform: translateY(var(--ds-space-0)) scaleY(1) rotate(9deg); }
  54% { opacity: 1; transform: translateY(var(--ds-space-0)) rotate(-4deg); }
  57% { opacity: 1; transform: translate(var(--ds-space-1), var(--ds-space-2)) rotate(16deg); }
  64% { opacity: 0; transform: translate(var(--ds-space-3), calc(var(--ds-space-6) + var(--ds-space-3))) rotate(38deg); }
  65%, 100% { opacity: 0; transform: translate(var(--ds-space-3), calc(var(--ds-space-6) + var(--ds-space-3))) rotate(38deg); }
}

@keyframes warehouse-document-feed {
  0% { opacity: .35; transform: translateY(calc(-1 * var(--ds-space-4))); }
  50% { opacity: 1; transform: translateY(var(--ds-space-2)); }
  100% { opacity: .35; transform: translateY(calc(-1 * var(--ds-space-4))); }
}

@keyframes warehouse-worker-look {
  0%, 14%, 88%, 100% { transform: rotate(0); }
  24%, 42% { transform: translateX(calc(-1 * var(--ds-space-1))) rotate(-12deg); }
  54%, 78% { transform: translateY(calc(-1 * var(--ds-space-1))) rotate(0); }
}

@keyframes warehouse-worker-left-hand-to-head {
  0%, 38%, 90%, 100% { transform: rotate(0); }
  54%, 80% { transform: rotate(112deg); }
}

@keyframes warehouse-worker-right-hand-to-head {
  0%, 38%, 90%, 100% { transform: rotate(0); }
  54%, 80% { transform: rotate(-112deg); }
}

@keyframes warehouse-worker-surprise {
  0%, 16%, 48%, 100% { opacity: 0; transform: scale(.7); }
  24%, 40% { opacity: 1; transform: scale(1); }
}

@media (max-width: 980px) {
  .loading-gallery-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .warehouse-loading-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .warehouse-loading-visual {
    min-width: var(--ds-space-0);
  }

  .loading-gallery-shell {
    width: calc(100% - var(--ds-space-4) * 2);
    margin: var(--ds-space-4) auto;
  }

  .loading-gallery-header {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .warehouse-loading-rack-animated .warehouse-loading-rack-box,
  .warehouse-loading-paper,
  .warehouse-loading-worker-head,
  .warehouse-loading-worker-arm,
  .warehouse-loading-worker-surprise {
    animation: none;
  }
}