/* A quiet, abstract view of Passages finding connections. */
.cer-constellation {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 130px;
  margin: 0 auto;
  color: var(--violet, #7000ef);
}
.cer-constellation-drawing { display: block; width: 100%; height: 130px; overflow: visible; }
.cer-constellation-scene { animation: cer-constellation-scene 12s ease-in-out infinite; }
.cer-constellation-link {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .64;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.cer-constellation-phase-0 { animation-name: cer-constellation-link-0; }
.cer-constellation-phase-1 { animation-name: cer-constellation-link-1; }
.cer-constellation-phase-2 { animation-name: cer-constellation-link-2; }
.cer-constellation-phase-3 { animation-name: cer-constellation-link-3; }
.cer-constellation-phase-4 { animation-name: cer-constellation-link-4; }
.cer-constellation-phase-5 { animation-name: cer-constellation-link-5; }
.cer-constellation-node { fill: currentColor; opacity: .82; }
.cer-constellation-halo { fill: none; stroke: currentColor; stroke-width: .6; opacity: .45; }
.cer-constellation-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cer-constellation-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  min-width: 66px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted, #39313f);
  padding: 8px 10px;
  font: 11px Helvetica, Arial, sans-serif;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
}
.cer-constellation-toggle:hover { color: var(--accent, #420078); text-decoration: underline; text-underline-offset: 3px; }
.cer-constellation-toggle:focus-visible { outline: 2px solid var(--accent, #420078); outline-offset: 1px; }
.cer-constellation-toggle[hidden] { display: none; }
.cer-constellation-paused .cer-constellation-scene,
.cer-constellation-paused .cer-constellation-link { animation-play-state: paused; }

@keyframes cer-constellation-scene { 0%, 2% { opacity: 0; } 11%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cer-constellation-link-0 { 0%, 4% { stroke-dashoffset: 1; } 16%, 100% { stroke-dashoffset: 0; } }
@keyframes cer-constellation-link-1 { 0%, 15% { stroke-dashoffset: 1; } 28%, 100% { stroke-dashoffset: 0; } }
@keyframes cer-constellation-link-2 { 0%, 27% { stroke-dashoffset: 1; } 40%, 100% { stroke-dashoffset: 0; } }
@keyframes cer-constellation-link-3 { 0%, 39% { stroke-dashoffset: 1; } 52%, 100% { stroke-dashoffset: 0; } }
@keyframes cer-constellation-link-4 { 0%, 51% { stroke-dashoffset: 1; } 64%, 100% { stroke-dashoffset: 0; } }
@keyframes cer-constellation-link-5 { 0%, 63% { stroke-dashoffset: 1; } 76%, 100% { stroke-dashoffset: 0; } }

.cer-constellation-reduced .cer-constellation-scene,
.cer-constellation-reduced .cer-constellation-link { animation: none; }
.cer-constellation-reduced .cer-constellation-scene { opacity: 1; }
.cer-constellation-reduced .cer-constellation-link { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .cer-constellation-scene, .cer-constellation-link { animation: none; }
  .cer-constellation-scene { opacity: 1; }
  .cer-constellation-link { stroke-dashoffset: 0; }
  .cer-constellation-toggle { display: none; }
}