.moon-codepen-ref{display:inline-block;perspective:1000px}.moon-codepen-ref .moon{width:100px;height:100px;border:2px solid #ffffff;border-radius:50%;overflow:hidden;position:relative;background-color:#fff;transform:translateZ(0);transform-style:preserve-3d}.moon-codepen-ref .moon:before{content:" ";display:block;position:absolute;top:0;left:0;background-color:#222;width:50%;height:100%;animation:moon-codepen-flip 2s 1s steps(2) infinite alternate}.moon-codepen-ref .disc{transform-style:preserve-3d;width:100%;height:100%;animation:moon-codepen-rotate 4s linear infinite}.moon-codepen-ref .disc:before,.moon-codepen-ref .disc:after{content:" ";display:block;transform-style:preserve-3d;width:100%;height:100%;border-radius:50%;transition:transform 4s;position:absolute;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.moon-codepen-ref .disc:before{background-color:#222}.moon-codepen-ref .disc:after{background-color:#fff;transform:rotateY(180deg)}@keyframes moon-codepen-rotate{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}@keyframes moon-codepen-flip{0%{left:0}to{left:100%}}.moon-codepen-ref .moon.freeze .disc,.moon-codepen-ref .moon.freeze:before{animation-play-state:paused;animation-fill-mode:both}.moon-codepen-ref .moon.freeze .disc{animation-delay:var(--freeze-disc-delay, 0s)}.moon-codepen-ref .moon.freeze:before{animation-delay:var(--freeze-before-delay, 1s)}.moon-codepen-ref .moon.freeze .disc:before,.moon-codepen-ref .moon.freeze .disc:after{transition:none}