/* Transparent local intelligence scene. Motion is controlled by the section. */
.ci-visual {
  width: 100%;
  position: relative;
  isolation: isolate;
  pointer-events: none;
}

.ci-v-drawing {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ci-v-ambient {
  transform-origin: 325px 236px;
  animation: ci-v-breathe 8s ease-in-out infinite;
}

.ci-v-assembly {
  animation: ci-v-levitate 7s ease-in-out infinite;
}

.ci-v-layer-accent {
  opacity: .12;
  transition: opacity .7s ease;
}

.ci-v-context-mesh {
  opacity: .2;
  transition: opacity .7s ease;
}

.ci-v-core-trace {
  opacity: .35;
  animation: ci-v-trace 6s linear infinite;
  transition: opacity .7s ease;
}

.ci-v-orbit-trace {
  animation: ci-v-orbit 28s linear infinite;
}

.ci-v-signal {
  opacity: .65;
  animation: ci-v-transmit 3.7s cubic-bezier(.25, .1, .4, 1) infinite;
  filter: drop-shadow(0 0 3px rgb(191 213 158 / 30%));
}

.ci-v-endpoint-active {
  opacity: .15;
  transition: opacity .7s ease;
}

.ci-v-endpoint-label {
  fill: #a6b59a;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-anchor: middle;
  letter-spacing: .15em;
}

.ci-v-node-label {
  fill: #a6b59a;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .22em;
}

.ci-v-beacon {
  animation: ci-v-beacon 3s ease-in-out infinite;
}

.ci-v-insight {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}

.ci-visual[data-step="0"] .ci-v-endpoint-active,
.ci-visual[data-step="0"] .ci-v-base-layer .ci-v-layer-accent,
.ci-visual[data-step="1"] .ci-v-model-layer .ci-v-layer-accent,
.ci-visual[data-step="1"] .ci-v-context-mesh,
.ci-visual[data-step="2"] .ci-v-core-layer .ci-v-layer-accent,
.ci-visual[data-step="2"] .ci-v-core-trace,
.ci-visual[data-step="3"] .ci-v-core-layer .ci-v-layer-accent {
  opacity: 1;
}

.ci-visual[data-step="3"] .ci-v-insight {
  opacity: 1;
  transform: translateY(0);
}

.ci-visual[data-step="2"] .ci-v-core-trace {
  animation-duration: 3s;
}

.ci-visual[data-enabled="false"] *,
.ci-visual[data-enabled="false"] *::before,
.ci-visual[data-enabled="false"] *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

@keyframes ci-v-levitate {
  0%, 100% { transform: translateY(3px); }
  50% { transform: translateY(-5px); }
}

@keyframes ci-v-breathe {
  0%, 100% { opacity: .65; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes ci-v-transmit {
  0% { stroke-dashoffset: 1; opacity: 0; }
  15% { opacity: .85; }
  75% { opacity: .85; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes ci-v-trace {
  to { stroke-dashoffset: -1; }
}

@keyframes ci-v-orbit {
  to { stroke-dashoffset: -1183; }
}

@keyframes ci-v-beacon {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

@media (max-width: 639px) {
  .ci-v-endpoint-label { font-size: 14px; }
  .ci-v-node-label { font-size: 11px; letter-spacing: .16em; }
}