html, body { margin: 0;	padding: 0;	overflow: hidden; }
label { cursor: pointer; }
input {/* display: none; */}

body { 
	width: 100vw; height: 100vh;
	background-color: rgba(225,225,225,1);
	}


/*-------------------------------  The Ball  -------------------------------*/	
.BallBox {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;	
	border-radius: 50%;
	border: 0px solid red;	
	transform: rotate(45deg);
	
	animation-name: RollingAni;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-play-state: paused;
	animation-delay: -4s;
	animation-duration: 18s;
	}	
	
.HalfCabConti {
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0%;
	left: 0%;
	overflow: hidden;
	}

.TheBall {
	position: absolute;
	width: 200%;
	padding-bottom: 200%;	
	border-radius: 50%;
	animation-name: SpinningAni;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.432, 0.018, 0.720, 0.540);
	 
	
	animation-play-state: running;	
	animation-duration: 8s;
	}
/* 
	"RIGHT" Side | flipped "LEFT", 
	2DO:   needs  2 / 2 => 4 Sqrs for  Z-AXIS  "UP" & "DOWN" !!!
*/
.HalfCabConti:nth-of-type(2) { transform: rotate(180deg); left: 50%; margin-left: -1px; animation-timing-function: cubic-bezier(0.018, 0.432, 0.540, 0.720); }	
.HalfCabConti:nth-of-type(2) > .TheBall { animation-direction: reverse;  }

.TheBall:nth-of-type(2) { background-color:   blue; }
.TheBall:nth-of-type(1) { background-color: orange; }

.HalfCabConti.Left > .TheBall:nth-of-type(2) { animation-delay:  0s; }
.HalfCabConti.Left > .TheBall:nth-of-type(1) { animation-delay:  4s; }
.HalfCabConti.Rite > .TheBall:nth-of-type(2) { animation-delay: -4s; }
.HalfCabConti.Rite > .TheBall:nth-of-type(1) { animation-delay:  0s; }

@keyframes SpinningAni {	
	  0%     { width: 200%; left:   0%; z-index:  1; }
	 50%     { width:   0%; left: 100%; z-index:  1; }
	 50.0001%  { width: 200%; left:   0%; z-index: -1; }
	100%     { width: 200%; left:   0%; z-index: -1; }
}

@keyframes RollingAni {	
	  0%     { transform: rotate(  0deg); }
	100%     { transform: rotate(360deg); }
}

#WireFrame:checked ~ .ShadowBox .HalfCabConti .TheBall { background-color: rgba(0,0,0,0) !important; }
#WireFrame:checked ~ .ShadowBox .TheBall {	top: -1px; border: 1px solid blue; }



/*-------------------------------  The Shadows | 2DO: less nesting & bottom "fixed" 2 Ball(-distance...) -------------------------------*/

.ShadowBox {
	position: absolute;
	width: 40%;
	padding-bottom: 40%;
	
	width: 500px;
	padding-bottom: 500px;
	
	
	top: 15%;
	left: 30%;	
	border-radius: 50%;
	overflow: hidden;
	transform: rotate(-40deg);
	}	
	
.ShadowBox:after {
	content: "";
	position: absolute;
	display: block;
	width: 150%;
	height: 150%;
	top: -25%;
	left: -30%;
	border-radius: 50%;
	box-shadow: inset 0px -200px 144px rgba(0,0,0,0.35);
	}
	
.ShadowBox:before {
	z-index: 99;
	content: "";
	position: absolute;
	display: block;
	width: 170%;
	height: 170%;
    top: -35%;
    left: -35%;
	border-radius: 50%;
	box-shadow: inset -40px 200px 144px rgba(255,255,255,0.35);
	}		
	
.ShadowCast {
	z-index: 0;
	position: absolute;
	display: block;
	width: 52%;
	height: 10%;
	top: 45%;
	left: 25%;
	border-radius: 50%;
	box-shadow: 200px 300px 144px rgba(0,0,0,0.25);
	}

.ShadowBox:hover .BallBox { animation-play-state: running; }