@keyframes circle-morph {
  0% {
    opacity: 1;
    background: var(--circle-color, #d3d3d3);
    border-style: solid;
  }
  25% {
    opacity: 1;
    background: transparent;
    border-style: dashed;
  }
  43.75% {
    opacity: 1;
    background: transparent;
    border-style: dashed;
  }
  68.75% {
    opacity: 0;
    background: transparent;
    border-style: dashed;
  }
  81.25% {
    opacity: 0;
    background: var(--circle-color, #d3d3d3);
    border-style: solid;
  }
  100% {
    opacity: 1;
    background: var(--circle-color, #d3d3d3);
    border-style: solid;
  }
}

.circle-anim-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    white,
    color-mix(in oklab, white, #dfe7fb 8%)
  );
  box-shadow: 0 10px 40px rgba(10, 20, 40, 0.08) inset,
    0 8px 24px rgba(10, 20, 40, 0.06);
  overflow: hidden;
  isolation: isolate;
}

.circle-anim {
  pointer-events: none;
}