/* Pull from the surrounding space, settle at the approved positions, then keep the original levitation. */
.puzzle-arrival{width:clamp(170px,13vw,230px);aspect-ratio:260/266;max-width:100%}
.puzzle-arrival>.puzzle-float{width:100%;height:100%}
.cosmic-motion .puzzle-arrival{opacity:0;transform:translate3d(var(--space-x),var(--space-y),0) rotate(var(--space-turn)) scale(.84);transform-origin:50% 50%}
.puzzle-step-1{--space-x:-380px;--space-y:-165px;--stretch-x:-420px;--stretch-y:-180px;--space-turn:-23deg;--settle-x:9px;--settle-y:4px;--arrival-delay:0ms}
.puzzle-step-2{--space-x:290px;--space-y:-260px;--stretch-x:320px;--stretch-y:-285px;--space-turn:20deg;--settle-x:-7px;--settle-y:7px;--arrival-delay:65ms}
.puzzle-step-3{--space-x:-440px;--space-y:230px;--stretch-x:-480px;--stretch-y:250px;--space-turn:24deg;--settle-x:10px;--settle-y:-6px;--arrival-delay:130ms}
.puzzle-step-4{--space-x:-70px;--space-y:390px;--stretch-x:-78px;--stretch-y:425px;--space-turn:-18deg;--settle-x:2px;--settle-y:-10px;--arrival-delay:195ms}
.puzzle-step-5{--space-x:440px;--space-y:250px;--stretch-x:480px;--stretch-y:274px;--space-turn:-24deg;--settle-x:-10px;--settle-y:-6px;--arrival-delay:260ms}
.cosmic-motion .puzzle-description{opacity:0;transform:translateY(12px)}
.cosmic-motion .puzzle-branches path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.cosmic-motion .puzzle-branches path:nth-of-type(1){--arrival-delay:0ms}.cosmic-motion .puzzle-branches path:nth-of-type(2){--arrival-delay:65ms}.cosmic-motion .puzzle-branches path:nth-of-type(3){--arrival-delay:130ms}.cosmic-motion .puzzle-branches path:nth-of-type(4){--arrival-delay:195ms}.cosmic-motion .puzzle-branches path:nth-of-type(5){--arrival-delay:260ms}
.cosmic-motion .puzzles-attracting .puzzle-arrival{animation:cosmic-pull 2200ms both;animation-delay:var(--arrival-delay)}
.cosmic-motion .puzzles-attracting .puzzle-description{animation:cosmic-caption 900ms cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--arrival-delay) + 1050ms)}
.cosmic-motion .puzzles-attracting .puzzle-branches path{animation:cosmic-tether 1600ms ease-out both;animation-delay:calc(var(--arrival-delay) + 500ms)}
@keyframes cosmic-pull{
 0%{opacity:0;transform:translate3d(var(--space-x),var(--space-y),0) rotate(var(--space-turn)) scale(.84);animation-timing-function:cubic-bezier(.42,0,.7,1)}
 18%{opacity:.75;transform:translate3d(var(--stretch-x),var(--stretch-y),0) rotate(var(--space-turn)) scale(.9);animation-timing-function:cubic-bezier(.16,.8,.18,1)}
 78%{opacity:1;transform:translate3d(var(--settle-x),var(--settle-y),0) rotate(-.6deg) scale(1.015);animation-timing-function:ease-in-out}
 91%{opacity:1;transform:translate3d(-2px,1px,0) rotate(.2deg) scale(.999);animation-timing-function:ease-out}
 100%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}
}
@keyframes cosmic-caption{to{opacity:1;transform:translateY(0)}}
@keyframes cosmic-tether{0%{opacity:0;stroke-dashoffset:1}30%{opacity:.7}100%{opacity:1;stroke-dashoffset:0}}
@media(min-width:601px) and (max-width:1000px){.puzzle-arrival{width:165px}}
@media(max-width:600px){.puzzle-arrival{width:min(100%,175px)}.puzzle-step-1{--space-x:-160px;--space-y:-90px;--stretch-x:-180px;--stretch-y:-100px}.puzzle-step-2{--space-x:160px;--space-y:-90px;--stretch-x:180px;--stretch-y:-100px}.puzzle-step-3{--space-x:-160px;--space-y:80px;--stretch-x:-180px;--stretch-y:90px}.puzzle-step-4{--space-x:160px;--space-y:100px;--stretch-x:180px;--stretch-y:110px}.puzzle-step-5{--space-x:60px;--space-y:170px;--stretch-x:70px;--stretch-y:190px}}
@media(prefers-reduced-motion:reduce){.cosmic-motion .puzzle-arrival,.cosmic-motion .puzzle-description{opacity:1;transform:none;animation:none!important}.cosmic-motion .puzzle-branches path{opacity:1;stroke-dasharray:none;stroke-dashoffset:0;animation:none!important}}