:root {
  --motion-fast: 160ms;
  --motion-micro: 180ms;
  --motion-header: 320ms;
  --motion-standard: 420ms;
  --motion-state: 520ms;
  --motion-slow: 900ms;
  --motion-narrative: 1600ms;
  --motion-teach: 3600ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-teach-ease: cubic-bezier(0.32, 0, 0.18, 1);
}

@keyframes haloReveal {
  from {
    opacity: 0;
    transform: translateY(0.8rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes haloLock {
  0%,
  24% {
    opacity: 0.16;
    transform: scale(0.72);
  }

  44%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes haloConnect {
  0%,
  35% {
    opacity: 0;
    transform: scaleX(0);
  }

  58%,
  100% {
    opacity: 0.42;
    transform: scaleX(1);
  }
}

@keyframes haloExpand {
  0%,
  18% {
    width: 18%;
  }

  72%,
  100% {
    width: 78%;
  }
}