/* A hand-drawn planet for ballet friends, animated entirely in CSS. */
.world-stage{position:relative;width:min(100%,490px);aspect-ratio:48/43;margin-inline:auto;isolation:isolate}
.world-art{display:block;width:100%;height:100%;overflow:visible}
.world-globe-shell{transform-origin:240px 214px;animation:world-breathe 8s ease-in-out infinite alternate}
.world-shadow{transform-origin:240px 386px;animation:world-shadow-breathe 8s ease-in-out infinite alternate}
.world-meridian{transform-origin:240px 214px;animation:world-meridian-turn 18s linear infinite;opacity:.33}
.world-meridian-two{animation-delay:-6s}.world-meridian-three{animation-delay:-12s}
.world-land{animation:world-land-drift 18s ease-in-out infinite alternate}
.world-traveler{offset-path:path('M56 270C27 218 133 113 251 79C378 43 474 99 432 161C394 217 292 309 181 335C108 353 75 323 56 270Z');offset-rotate:0deg;animation:world-follow-ribbon 18s linear infinite}
.world-traveler-two{animation-delay:-9s;animation-duration:18s}
.world-traveler-three{offset-path:path('M74 158C110 95 316 104 416 202C475 260 409 310 328 312C228 323 111 264 74 205C59 181 65 168 74 158Z');animation-duration:24s;animation-delay:-6s}
.world-doodle{animation:world-doodle-drift 6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.world-doodle-two{animation-delay:-3s;animation-duration:7s}.world-doodle-three{animation-delay:-1s;animation-duration:8s}.world-music{animation-delay:-4s;animation-duration:7s}.world-shoes{animation-delay:-2s;animation-duration:9s}
@keyframes world-meridian-turn{0%{transform:scaleX(1)}25%{transform:scaleX(.1)}50%{transform:scaleX(-1)}75%{transform:scaleX(-.1)}100%{transform:scaleX(1)}}
@keyframes world-follow-ribbon{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes world-breathe{from{translate:0 0;rotate:-1deg}to{translate:0 -5px;rotate:1deg}}
@keyframes world-shadow-breathe{from{scale:1;opacity:.12}to{scale:.92;opacity:.08}}
@keyframes world-land-drift{from{translate:-3px 0}to{translate:3px 0}}
@keyframes world-doodle-drift{from{translate:0 0;rotate:-3deg}to{translate:0 -8px;rotate:5deg}}
body.motion-paused .world-stage *,body.page-asleep .world-stage *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) .world-stage *{animation-play-state:paused!important}}
@media(max-width:620px){.world-stage{width:min(100%,420px)}}