body {
    color-scheme: light dark;
    background: light-dark(#f0f8ff, #000);
    color: light-dark(#000, #f0f8ff);
}
.stage {
    display: flex;   
    justify-content: center;   
    align-items: center;   
    height: 100vh; 
}
@keyframes escape {
    0% {
        transform: translateX(-100vw);
    }
    100% {
        transform: translateX(100vw);
    }
}

.circle {    
  width: 100px;   
  height: 100px;   
  background-color: blue;   
  border-radius: 50%;
  transform: translateX(-100vw);
  
}

.stage.is-active .circle {
    animation: escape 0.6s 1 ease-in-out; 
}

.stage.is-trapped .circle {
    animation-play-state: paused;
}