/*
 * The large looping drawings (components/Scene.tsx).
 *
 * One drawing to a text section, in the column under its heading. Each is a
 * 480 by 360 sheet. Everything that moves is a transform, an opacity or a dash
 * offset, so nothing here causes layout. A drawing runs while it is on screen
 * (data-live="1") and not at all under prefers-reduced-motion, where it holds
 * its finished state.
 *
 * --d is a part's place in its set; a set is staggered by it.
 */

.ds-scene {
  --sc-teal: var(--ds-teal, #009688);
  --sc-deep: var(--ds-teal-deep, #00695f);
  --sc-soft: #d7efeb;
  --sc-wash: #eef8f6;
  --sc-line: #b9d9d4;
  --sc-t: 7s;
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-top: 34px;
  border: 1px solid var(--hs-line, #cfdfdc);
  background-image: radial-gradient(rgba(0, 150, 136, 0.16) 1px, transparent 1px);
  background-size: 18px 18px;
  background-color: #f7fcfb;
}
.ds-section-grey .ds-scene {
  background-color: #fff;
}
.ds-scene svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.ds-scene svg * {
  transform-box: fill-box;
}
.ds-scene[data-live="0"] svg * {
  animation-play-state: paused !important;
}

/* ---- the parts every drawing is made of ---- */

.sc-sheet {
  fill: #fff;
  stroke: var(--sc-line);
  stroke-width: 1.5;
}
.sc-sheet.is-back {
  fill: var(--sc-soft);
  stroke: none;
}
.sc-rule {
  fill: none;
  stroke: var(--sc-line);
  stroke-width: 1.5;
}
.sc-rule.is-white {
  stroke: #fff;
  stroke-width: 3;
}
.sc-rule.is-thick {
  stroke: var(--sc-deep);
  stroke-width: 4;
}
.sc-rule.is-tick {
  stroke: var(--sc-teal);
  stroke-width: 2;
}
.sc-soft-line {
  fill: none;
  stroke: var(--sc-soft);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
}
.sc-mark {
  fill: var(--sc-teal);
}
.sc-mark.is-2 {
  fill: #7fd3c9;
}
.sc-mark.is-3 {
  fill: var(--sc-soft);
}
.sc-slot {
  fill: var(--sc-wash);
  stroke: var(--sc-line);
  stroke-width: 1;
}
.sc-line {
  fill: var(--sc-soft);
}
.sc-line.is-short {
  fill: #e6f4f1;
}
.sc-fill {
  fill: var(--sc-teal);
}
.sc-tile {
  fill: var(--sc-wash);
  stroke: var(--sc-line);
  stroke-width: 1.5;
}
.sc-chip {
  fill: none;
  stroke: var(--sc-line);
  stroke-width: 1.5;
}
.sc-led {
  fill: var(--sc-teal);
  animation: sc-blink 1.6s steps(1) infinite;
}
.sc-led.is-2 {
  animation-delay: 0.8s;
}
.sc-glyph {
  fill: none;
  stroke: var(--sc-deep);
  stroke-width: 2;
  stroke-linecap: square;
}
.sc-glyph.is-big {
  stroke-width: 2.5;
}
.sc-draw {
  fill: none;
  stroke: var(--sc-teal);
  stroke-width: 5;
  stroke-linecap: square;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

@keyframes sc-blink {
  0% { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}

/* ---------------- erase ---------------- */

.sc-bit {
  fill: var(--sc-teal);
  animation: sc-wipe var(--sc-t) linear infinite;
  animation-delay: calc(var(--c) * 0.3s + 0.35s);
}
.sc-sweep {
  animation: sc-sweep var(--sc-t) linear infinite;
}
.sc-sweep rect {
  fill: var(--sc-deep);
}
.sc-sweep .sc-sweep-glow {
  fill: var(--sc-teal);
  opacity: 0.14;
}
@keyframes sc-wipe {
  0% { opacity: 1; }
  3%, 52% { opacity: 0; }
  58%, 100% { opacity: 1; }
}
@keyframes sc-sweep {
  0% { transform: translateX(0); opacity: 0; }
  3% { opacity: 1; }
  40% { transform: translateX(372px); opacity: 1; }
  45%, 100% { transform: translateX(372px); opacity: 0; }
}

/* ---------------- verify ---------------- */

.sc-cell {
  fill: var(--sc-soft);
  animation: sc-pass var(--sc-t) linear infinite;
  animation-delay: calc(var(--r) * 0.5s + 0.3s);
}
.sc-scan {
  fill: var(--sc-teal);
  animation: sc-scan var(--sc-t) linear infinite;
}
.sc-scan.is-tag {
  animation: sc-scan-tag 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.sc-badge rect {
  fill: #fff;
  stroke: var(--sc-teal);
  stroke-width: 2;
}
.sc-badge .sc-draw {
  stroke-width: 7;
  animation: sc-check var(--sc-t) ease-out infinite;
}
@keyframes sc-pass {
  0% { fill: var(--sc-soft); }
  4%, 78% { fill: var(--sc-teal); }
  86%, 100% { fill: var(--sc-soft); }
}
@keyframes sc-scan {
  0% { transform: translateY(0); opacity: 0; }
  3% { opacity: 1; }
  38% { transform: translateY(226px); opacity: 1; }
  42%, 100% { transform: translateY(226px); opacity: 0; }
}
@keyframes sc-scan-tag {
  from { transform: translateY(0); }
  to { transform: translateY(100px); }
}
@keyframes sc-check {
  0%, 42% { stroke-dashoffset: 1; }
  54%, 88% { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 1; }
}

/* ---------------- certify ---------------- */

.sc-grow {
  transform-origin: left center;
  animation: sc-grow var(--sc-t) cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  animation-delay: calc(var(--d) * 0.28s);
}
.sc-code rect {
  fill: var(--sc-deep);
}
.sc-code {
  animation: sc-show var(--sc-t) linear infinite;
  animation-delay: 2.1s;
}
.sc-seal {
  transform-origin: center;
  animation: sc-stamp var(--sc-t) cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}
.sc-seal circle {
  fill: var(--sc-teal);
}
.sc-seal .sc-seal-in {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}
.sc-seal .sc-draw {
  stroke: #fff;
  stroke-width: 5;
}
@keyframes sc-grow {
  0% { transform: scaleX(0); }
  12%, 80% { transform: scaleX(1); }
  88%, 100% { transform: scaleX(0); }
}
@keyframes sc-show {
  0% { opacity: 0; }
  5%, 58% { opacity: 1; }
  64%, 100% { opacity: 0; }
}
@keyframes sc-stamp {
  0%, 38% { transform: scale(1.6); opacity: 0; }
  46%, 84% { transform: scale(1); opacity: 1; }
  92%, 100% { transform: scale(1); opacity: 0; }
}

/* ---------------- diagnose ---------------- */

.sc-trace {
  fill: none;
  stroke: var(--sc-teal);
  stroke-width: 3;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  animation: sc-trace 4.5s linear infinite;
}
.sc-gauge {
  transform-origin: left center;
  animation: sc-gauge 4.5s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  animation-delay: calc(var(--d) * 0.35s);
}
@keyframes sc-trace {
  0% { stroke-dashoffset: 1; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes sc-gauge {
  0% { transform: scaleX(0.05); }
  40%, 88% { transform: scaleX(var(--to)); }
  100% { transform: scaleX(0.05); }
}

/* ---------------- flow ---------------- */

.sc-path {
  fill: none;
  stroke: var(--sc-teal);
  stroke-width: 2;
  stroke-dasharray: 6 8;
  animation: sc-march 1.2s linear infinite;
}
.sc-path.is-join {
  stroke-dasharray: 5 5;
}
.sc-stop > rect:first-child {
  fill: #fff;
  stroke: var(--sc-line);
  stroke-width: 1.5;
  animation: sc-stop 6s linear infinite;
  animation-delay: calc(var(--d) * 1.5s);
}
.sc-packet {
  fill: var(--sc-deep);
  animation: sc-travel 6s linear infinite;
}
@keyframes sc-march {
  to { stroke-dashoffset: -14; }
}
@keyframes sc-stop {
  0% { fill: #fff; stroke: var(--sc-line); }
  3%, 22% { fill: var(--sc-soft); stroke: var(--sc-teal); }
  25%, 100% { fill: #fff; stroke: var(--sc-line); }
}
@keyframes sc-travel {
  0%, 18% { transform: translateX(0); }
  25%, 43% { transform: translateX(106px); }
  50%, 68% { transform: translateX(212px); }
  75%, 93% { transform: translateX(318px); }
  96% { transform: translateX(318px); opacity: 1; }
  98% { transform: translateX(318px); opacity: 0; }
  99% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ---------------- bulk, and every bar that fills ---------------- */

.sc-load {
  transform-origin: left center;
  animation: sc-load var(--sc-t) linear infinite;
  animation-delay: calc(var(--d) * 0.4s);
}
.sc-tick {
  stroke-width: 3;
  animation: sc-tick var(--sc-t) ease-out infinite;
  animation-delay: calc(var(--d) * 0.4s);
}
@keyframes sc-load {
  0% { transform: scaleX(0); }
  46%, 84% { transform: scaleX(1); }
  90%, 100% { transform: scaleX(0); }
}
@keyframes sc-tick {
  0%, 46% { stroke-dashoffset: 1; }
  54%, 84% { stroke-dashoffset: 0; }
  90%, 100% { stroke-dashoffset: 1; }
}

/* ---------------- offline ---------------- */

.sc-ring {
  fill: none;
  stroke: var(--sc-line);
  stroke-width: 1.5;
  stroke-dasharray: 10 10;
  animation: sc-ring 3s linear infinite;
}
.sc-ring.is-in {
  stroke: var(--sc-teal);
  stroke-dasharray: 4 8;
  animation-direction: reverse;
  animation-duration: 2.4s;
}
.sc-shield {
  fill: #fff;
  stroke: var(--sc-deep);
  stroke-width: 2.5;
  stroke-linejoin: miter;
  transform-origin: center;
  animation: sc-breathe 4s ease-in-out infinite;
}
.sc-lock {
  fill: var(--sc-teal);
}
.sc-lock-bow {
  fill: none;
  stroke: var(--sc-teal);
  stroke-width: 6;
}
.sc-link path {
  fill: none;
  stroke: var(--sc-line);
  stroke-width: 3;
}
.sc-link rect {
  fill: var(--sc-line);
}
.sc-link .sc-strike {
  stroke: #d2544a;
  stroke-width: 4;
  stroke-dasharray: 1;
  animation: sc-strike 5s ease-out infinite;
}
.sc-spark {
  fill: var(--sc-soft);
  animation: sc-blink 2.4s steps(1) infinite;
  animation-delay: calc(var(--d) * 0.6s);
}
@keyframes sc-ring {
  to { stroke-dashoffset: -40; }
}
@keyframes sc-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes sc-strike {
  0%, 12% { stroke-dashoffset: 1; }
  28%, 88% { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 1; }
}

/* ---------------- network ---------------- */

.sc-packet.is-down {
  animation: sc-send 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: calc(var(--d) * 0.35s);
}
.sc-node {
  animation: sc-node 5s linear infinite;
  animation-delay: calc(var(--d) * 0.35s);
}
.sc-tick.is-node {
  animation: sc-tick-node 5s ease-out infinite;
  animation-delay: calc(var(--d) * 0.35s);
}
@keyframes sc-send {
  0% { transform: translate(0, 0); opacity: 0; }
  4% { opacity: 1; }
  34% { transform: translate(calc(var(--dx) * 1px), 118px); opacity: 1; }
  38%, 100% { transform: translate(calc(var(--dx) * 1px), 118px); opacity: 0; }
}
@keyframes sc-node {
  0%, 34% { fill: var(--sc-wash); stroke: var(--sc-line); }
  40%, 86% { fill: #fff; stroke: var(--sc-teal); }
  94%, 100% { fill: var(--sc-wash); stroke: var(--sc-line); }
}
@keyframes sc-tick-node {
  0%, 38% { stroke-dashoffset: 1; }
  48%, 86% { stroke-dashoffset: 0; }
  94%, 100% { stroke-dashoffset: 1; }
}

/* ---------------- records ---------------- */

.sc-bars rect {
  fill: var(--sc-deep);
}
.sc-row {
  animation: sc-row var(--sc-t) cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  animation-delay: calc(var(--d) * 0.45s);
}
@keyframes sc-row {
  0% { opacity: 0; transform: translateX(-14px); }
  8%, 80% { opacity: 1; transform: translateX(0); }
  88%, 100% { opacity: 0; transform: translateX(0); }
}

/* ---------------- cycle ---------------- */

.sc-orbit {
  transform-box: view-box !important;
  transform-origin: 240px 180px;
  animation: sc-orbit 16s linear infinite;
}
.sc-arc {
  fill: none;
  stroke: var(--sc-teal);
  stroke-width: 3;
}
.sc-arc-head {
  fill: var(--sc-teal);
}
.sc-clear {
  animation: sc-clear 5s linear infinite;
}
.sc-draw.is-loop {
  stroke: var(--sc-teal);
  animation: sc-loop-check 5s ease-out infinite;
}
@keyframes sc-orbit {
  to { transform: rotate(360deg); }
}
@keyframes sc-clear {
  0%, 10% { opacity: 1; }
  34%, 86% { opacity: 0.08; }
  96%, 100% { opacity: 1; }
}
@keyframes sc-loop-check {
  0%, 34% { stroke-dashoffset: 1; }
  48%, 86% { stroke-dashoffset: 0; }
  94%, 100% { stroke-dashoffset: 1; }
}

/* ---------------- standards ---------------- */

.sc-tick.is-item {
  stroke-width: 4;
  animation: sc-item-tick var(--sc-t) ease-out infinite;
  animation-delay: calc(var(--d) * 0.7s);
}
.sc-item .sc-chip {
  animation: sc-chip var(--sc-t) linear infinite;
  animation-delay: calc(var(--d) * 0.7s);
}
@keyframes sc-item-tick {
  0%, 4% { stroke-dashoffset: 1; }
  12%, 84% { stroke-dashoffset: 0; }
  92%, 100% { stroke-dashoffset: 1; }
}
@keyframes sc-chip {
  0%, 8% { fill: transparent; stroke: var(--sc-line); }
  14%, 84% { fill: var(--sc-soft); stroke: var(--sc-teal); }
  92%, 100% { fill: transparent; stroke: var(--sc-line); }
}

/* ---------------- devices ---------------- */

.sc-dev > .sc-sheet {
  animation: sc-dev 6s linear infinite;
  animation-delay: calc(var(--d) * 1.5s);
}
.sc-dev > .sc-led {
  animation: sc-dev-led 6s linear infinite;
  animation-delay: calc(var(--d) * 1.5s);
}
@keyframes sc-dev {
  0% { fill: #fff; stroke: var(--sc-line); }
  3%, 22% { fill: var(--sc-wash); stroke: var(--sc-teal); }
  25%, 100% { fill: #fff; stroke: var(--sc-line); }
}
@keyframes sc-dev-led {
  0% { fill: var(--sc-soft); }
  3%, 22% { fill: var(--sc-teal); }
  25%, 100% { fill: var(--sc-soft); }
}

/* ---- where it stands ---- */

@media (max-width: 991px) {
  .ds-scene {
    max-width: 420px;
    margin-top: 0;
    margin-bottom: 24px;
  }
}
@media (max-width: 575px) {
  .ds-scene {
    max-width: none;
  }
}

/* Still, and finished: every part in the state the loop holds longest. */
@media (prefers-reduced-motion: reduce) {
  .ds-scene svg * {
    animation: none !important;
  }
  .sc-sweep,
  .sc-scan:not(.is-tag),
  .sc-packet {
    opacity: 0;
  }
  .sc-cell {
    fill: var(--sc-teal);
  }
}