/* Sequence animation used to explain lease fencing. */

.sequence {
  margin: 2rem 0;
  overflow-x: auto;
}

.sequence svg {
  display: block;
  min-width: 34rem;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.sequence figcaption {
  margin-top: 0.75rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
  text-align: center;
}

.sequence .lane {
  fill: var(--md-default-fg-color--light);
  font-size: 13px;
  font-weight: 600;
}

.sequence .note {
  fill: var(--md-default-fg-color--light);
  font-size: 11px;
}

.sequence .rule {
  stroke: var(--md-default-fg-color--lightest);
  stroke-width: 1;
}

.sequence .work {
  fill: var(--md-primary-fg-color);
  opacity: 0.85;
}

.sequence .work-stalled {
  fill: var(--md-default-fg-color--lightest);
}

.sequence .token {
  fill: var(--md-default-bg-color);
  stroke: var(--md-primary-fg-color);
  stroke-width: 1.5;
}

.sequence .token-text {
  fill: var(--md-default-fg-color);
  font-size: 11px;
  font-family: var(--md-code-font-family, monospace);
}

.sequence .reject {
  fill: none;
  stroke: #d3455b;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.sequence .reject-text {
  fill: #d3455b;
  font-size: 11px;
  font-weight: 600;
}

.sequence .playhead {
  stroke: var(--md-primary-fg-color);
  stroke-width: 1.5;
  opacity: 0.5;
}

/* One 14s cycle. Each step reveals itself in its own slice of the cycle. */
@keyframes sequence-playhead {
  from { transform: translateX(0); }
  to { transform: translateX(600px); }
}

@keyframes sequence-step-1 { 0%, 4% { opacity: 0; } 8%, 100% { opacity: 1; } }
@keyframes sequence-step-2 { 0%, 24% { opacity: 0; } 28%, 100% { opacity: 1; } }
@keyframes sequence-step-3 { 0%, 44% { opacity: 0; } 48%, 100% { opacity: 1; } }
@keyframes sequence-step-4 { 0%, 62% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes sequence-step-5 { 0%, 80% { opacity: 0; } 84%, 100% { opacity: 1; } }

@keyframes sequence-grow { 0%, 4% { transform: scaleX(0); } 20%, 100% { transform: scaleX(1); } }
@keyframes sequence-grow-late { 0%, 62% { transform: scaleX(0); } 78%, 100% { transform: scaleX(1); } }

.sequence .playhead { animation: sequence-playhead 14s linear infinite; }
.sequence .step-1 { animation: sequence-step-1 14s linear infinite; }
.sequence .step-2 { animation: sequence-step-2 14s linear infinite; }
.sequence .step-3 { animation: sequence-step-3 14s linear infinite; }
.sequence .step-4 { animation: sequence-step-4 14s linear infinite; }
.sequence .step-5 { animation: sequence-step-5 14s linear infinite; }
.sequence .grow { transform-origin: left center; animation: sequence-grow 14s linear infinite; }
.sequence .grow-late { transform-origin: left center; animation: sequence-grow-late 14s linear infinite; }

/* Motion is an explanation, never a requirement. Show the finished state instead. */
@media (prefers-reduced-motion: reduce) {
  .sequence .playhead {
    display: none;
  }

  .sequence .step-1,
  .sequence .step-2,
  .sequence .step-3,
  .sequence .step-4,
  .sequence .step-5,
  .sequence .grow,
  .sequence .grow-late {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Rolling upgrade animation. One 20s cycle: migrate, then replace workers one at a time. */

.deployment {
  margin: 2rem 0;
  overflow-x: auto;
}

.deployment svg {
  display: block;
  min-width: 36rem;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.deployment figcaption {
  margin-top: 0.75rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
  text-align: center;
}

.deployment .pod-old {
  fill: var(--md-default-fg-color--lightest);
  stroke: var(--md-default-fg-color--light);
  stroke-width: 1.5;
}

.deployment .pod-drain {
  fill: none;
  stroke: var(--md-default-fg-color--light);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.deployment .pod-new {
  fill: var(--md-primary-fg-color);
  fill-opacity: 0.18;
  stroke: var(--md-primary-fg-color);
  stroke-width: 1.5;
}

.deployment .job {
  fill: var(--md-accent-fg-color);
  fill-opacity: 0.18;
  stroke: var(--md-accent-fg-color);
  stroke-width: 1.5;
}

.deployment .database {
  fill: var(--md-default-fg-color--lightest);
  stroke: var(--md-default-fg-color--light);
  stroke-width: 1.5;
}

.deployment .pod-label {
  fill: var(--md-default-fg-color);
  font-size: 12px;
  font-weight: 600;
}

.deployment .caption {
  fill: var(--md-default-fg-color--light);
  font-size: 11px;
}

.deployment .playhead {
  stroke: var(--md-primary-fg-color);
  stroke-width: 1.5;
  opacity: 0.45;
}

/* Marks a fixed point on the timeline. Styled like the playhead but never moves. */
.deployment .marker {
  stroke: var(--md-primary-fg-color);
  stroke-width: 1.5;
  opacity: 0.45;
}

@keyframes deployment-playhead {
  from { transform: translateX(0); }
  to { transform: translateX(506px); }
}

/* Visible for a window of the cycle, then gone. */
@keyframes deployment-until-32 { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes deployment-until-46 { 0%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes deployment-until-60 { 0%, 58% { opacity: 1; } 62%, 100% { opacity: 0; } }

@keyframes deployment-window-32-40 { 0%, 30% { opacity: 0; } 34%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes deployment-window-46-54 { 0%, 44% { opacity: 0; } 48%, 52% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes deployment-window-60-68 { 0%, 58% { opacity: 0; } 62%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes deployment-window-15-30 { 0%, 13% { opacity: 0; } 17%, 28% { opacity: 1; } 32%, 100% { opacity: 0; } }

@keyframes deployment-window-32-68 { 0%, 30% { opacity: 0; } 34%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }

@keyframes deployment-from-12 { 0%, 10% { opacity: 0; } 14%, 100% { opacity: 1; } }
@keyframes deployment-from-30 { 0%, 28% { opacity: 0; } 32%, 100% { opacity: 1; } }
@keyframes deployment-from-40 { 0%, 38% { opacity: 0; } 42%, 100% { opacity: 1; } }
@keyframes deployment-from-54 { 0%, 52% { opacity: 0; } 56%, 100% { opacity: 1; } }
@keyframes deployment-from-68 { 0%, 66% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes deployment-from-74 { 0%, 72% { opacity: 0; } 76%, 100% { opacity: 1; } }

.deployment .playhead { animation: deployment-playhead 20s linear infinite; }
.deployment .until-32 { animation: deployment-until-32 20s linear infinite; }
.deployment .until-46 { animation: deployment-until-46 20s linear infinite; }
.deployment .until-60 { animation: deployment-until-60 20s linear infinite; }
.deployment .drain-a { animation: deployment-window-32-40 20s linear infinite; }
.deployment .drain-b { animation: deployment-window-46-54 20s linear infinite; }
.deployment .drain-c { animation: deployment-window-60-68 20s linear infinite; }
.deployment .job-running { animation: deployment-window-15-30 20s linear infinite; }
.deployment .overlap { animation: deployment-window-32-68 20s linear infinite; }
.deployment .from-12 { animation: deployment-from-12 20s linear infinite; }
.deployment .from-30 { animation: deployment-from-30 20s linear infinite; }
.deployment .from-40 { animation: deployment-from-40 20s linear infinite; }
.deployment .from-54 { animation: deployment-from-54 20s linear infinite; }
.deployment .from-68 { animation: deployment-from-68 20s linear infinite; }
.deployment .from-74 { animation: deployment-from-74 20s linear infinite; }

/* Motion explains the order; it is never required to read the diagram. */
@media (prefers-reduced-motion: reduce) {
  .deployment .playhead,
  .deployment .until-32,
  .deployment .until-46,
  .deployment .until-60,
  .deployment .drain-a,
  .deployment .drain-b,
  .deployment .drain-c,
  .deployment .job-running,
  .deployment .overlap {
    display: none;
  }

  .deployment .from-12,
  .deployment .from-30,
  .deployment .from-40,
  .deployment .from-54,
  .deployment .from-68,
  .deployment .from-74 {
    animation: none;
    opacity: 1;
  }
}