/* Queue processing viz. A job queue card on the right of the hero
   where each row cycles queued → processing → done on a CSS-only
   staggered loop. Colors resolve from --brand-teal / --brand-blue. */

.queue-viz {
  --q-teal: var(--brand-teal);
  --q-blue: var(--brand-blue);
  --q-cycle: 6s;
  --q-row-h: 2.5rem;

  position: relative;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}

.queue-viz__card {
  position: relative;
  padding: 0.875rem 1rem 1rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Subtle gradient frame glow at the edge */
.queue-viz__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--q-teal) 40%, transparent) 0%,
    transparent 30%,
    transparent 70%,
    color-mix(in oklch, var(--q-blue) 40%, transparent) 100%
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}

/* --- Header -------------------------------------------------------- */

.queue-viz__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.queue-viz__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-foreground);
}

.queue-viz__meta {
  color: var(--color-muted-foreground);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

/* --- Job list ----------------------------------------------------- */

.queue-viz__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.queue-viz__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.625rem;
  height: var(--q-row-h);
  padding-inline: 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-foreground);

  /* Each row's background fades through the queued → processing → done
     cycle on a --q-offset-delayed loop. */
  animation: q-row-bg var(--q-cycle) linear infinite;
  animation-delay: calc(var(--q-offset, 0) * var(--q-cycle) * -1);
}

@keyframes q-row-bg {
  0%              { background: transparent; }
  33%, 66%        { background: color-mix(in oklch, var(--q-teal) 6%, transparent); }
  67%, 100%       { background: transparent; }
}

/* --- Status dot --------------------------------------------------- */

.queue-viz__status {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: color-mix(in oklch, var(--color-foreground) 20%, transparent);
  animation: q-row-status var(--q-cycle) linear infinite;
  animation-delay: calc(var(--q-offset, 0) * var(--q-cycle) * -1);
}

@keyframes q-row-status {
  0%, 32%   { background: color-mix(in oklch, var(--color-foreground) 18%, transparent); box-shadow: none; }
  34%       { background: var(--q-teal); box-shadow: 0 0 0 0 color-mix(in oklch, var(--q-teal) 50%, transparent); }
  50%       { background: var(--q-teal); box-shadow: 0 0 0 4px color-mix(in oklch, var(--q-teal) 0%, transparent); }
  66%       { background: var(--q-teal); box-shadow: 0 0 0 0 color-mix(in oklch, var(--q-teal) 0%, transparent); }
  67%, 100% { background: var(--color-success); box-shadow: none; }
}

/* --- Name --------------------------------------------------------- */

.queue-viz__name {
  color: var(--color-foreground);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: q-row-name var(--q-cycle) linear infinite;
  animation-delay: calc(var(--q-offset, 0) * var(--q-cycle) * -1);
}

@keyframes q-row-name {
  0%, 32%    { color: var(--color-muted-foreground); }
  34%, 66%   { color: var(--color-foreground); }
  67%, 100%  { color: var(--color-muted-foreground); }
}

/* --- Progress bar (visible during processing window) ------------- */

.queue-viz__bar {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 3px;
  background: color-mix(in oklch, var(--color-foreground) 8%, transparent);
  border-radius: 9999px;
  overflow: hidden;
  opacity: 0;
  animation: q-row-bar-visible var(--q-cycle) linear infinite;
  animation-delay: calc(var(--q-offset, 0) * var(--q-cycle) * -1);
}

.queue-viz__bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--q-teal), var(--q-blue));
  animation: q-row-bar-fill var(--q-cycle) linear infinite;
  animation-delay: calc(var(--q-offset, 0) * var(--q-cycle) * -1);
}

@keyframes q-row-bar-visible {
  0%, 32%    { opacity: 0; }
  34%, 66%   { opacity: 1; }
  67%, 100%  { opacity: 0; }
}

@keyframes q-row-bar-fill {
  0%, 33%   { width: 0%; }
  66%       { width: 100%; }
  67%, 100% { width: 100%; }
}

/* --- Check icon (done state) ------------------------------------- */

.queue-viz__check {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  color: var(--color-success);
  opacity: 0;
  animation: q-row-check var(--q-cycle) linear infinite;
  animation-delay: calc(var(--q-offset, 0) * var(--q-cycle) * -1);
}

@keyframes q-row-check {
  0%, 66%    { opacity: 0; transform: scale(0.6); }
  70%        { opacity: 1; transform: scale(1); }
  95%        { opacity: 1; transform: scale(1); }
  100%       { opacity: 0; transform: scale(0.6); }
}

/* --- Footer stats ------------------------------------------------ */

.queue-viz__foot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.queue-viz__stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-family: var(--font-mono);
}

.queue-viz__stat-label {
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.queue-viz__stat-value {
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-display);
  color: var(--color-foreground);
  letter-spacing: -0.01em;
}

/* --- Reduced motion respect -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .queue-viz__row,
  .queue-viz__status,
  .queue-viz__name,
  .queue-viz__bar,
  .queue-viz__bar-fill,
  .queue-viz__check { animation: none; }
  .queue-viz__status { background: var(--q-teal); }
  .queue-viz__bar { opacity: 1; }
  .queue-viz__bar-fill { width: 55%; }
}