@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Egyptian+Hieroglyphs&display=swap");

.bloch-sphere-hero {
  position: relative;
  z-index: 1;
  width: min(680px, 88%);
  margin: -18px auto 64px;
  color: var(--ink);
  pointer-events: none;
  user-select: none;
}

.bloch-sphere {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: inherit;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.bloch-sphere__orbit {
  transform-origin: 250px 250px;
  animation: bloch-quiet-drift 9s ease-in-out infinite alternate;
}

.bloch-sphere__state-arrow {
  transform-origin: 250px 250px;
  animation: bloch-arrow-precession 7s ease-in-out infinite alternate;
}

@keyframes bloch-quiet-drift {
  from { transform: rotate(-6deg); }
  to { transform: rotate(6deg); }
}

@keyframes bloch-arrow-precession {
  from { transform: rotate(-10deg); }
  to { transform: rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bloch-sphere__orbit,
  .bloch-sphere__state-arrow {
    animation: none;
  }
}

@media print {
  .bloch-sphere__orbit,
  .bloch-sphere__state-arrow {
    animation: none;
  }
}