html, body { position: absolute; width: 100%;  height: 100%; margin: 0;	padding: 0; overflow: hidden; }
label { cursor: pointer; }	
div { display: block; position: absolute; }	
	
	
/* >>>>>>>>>>>-------------------------- Plane.Steering.Anchors --------------------------<<<<<<<<<<<<< */
	
.perspBox {	 
	transform-style: preserve-3d; 
	top: 50%; left: 50%;
	margin: 0vmin 0 0 -25vmin;
	width: 50vmin;
	padding-bottom: 0vmin;
	}	
	
.rota,
.horizontal,
.vertical,
.intersect { top: 50%; left: 50%;  width:  0%;  height:  0%; }
	
.intersect {
	transform-style: preserve-3d;
	transform: rotateY( 90deg);
	}
	
.intersect.init { transform: rotateX( 90deg); }
	
.rota {
	transform-style: preserve-3d;
	transition: transform 2s ease-out 0s;
	}
	
.rotaBox { 
	transform-style: preserve-3d;
	width: 0%; height:  0%;
	left: 50%;
	animation-name: WindBoxAni;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;	
	animation-play-state: running;
	animation-duration: 6.0s;
	}	

@keyframes WindBoxAni { 
	  0%   {  transform: translateZ( 0vmin) translateY( 0vmin) translateX(-1vmin)   rotateX(89deg) rotateY(  1deg) rotateZ( -1deg); }
	 25%   {  transform: translateZ(-0vmin) translateY( 0vmin) translateX( 1vmin)   rotateX(92deg) rotateY( -1deg) rotateZ( 1deg); }
	 50%   {  transform: translateZ( 0vmin) translateY( 0vmin) translateX( 0vmin)   rotateX(90deg) rotateY(  2deg) rotateZ( 0deg); }
	 75%   {  transform: translateZ( 0vmin) translateY( 0vmin) translateX( 2vmin)   rotateX(91deg) rotateY(  0deg) rotateZ(1deg); }
	100%   {  transform: translateZ( 0vmin) translateY( 0vmin) translateX(-1vmin)   rotateX(89deg) rotateY(  1deg) rotateZ( -1deg); }
	}	
	
/* >>>>>>>>>>>-------------------------- The Plane --------------------------<<<<<<<<<<<<< */

/* Hrzn Distance */
.perspBox {	perspective: 400vmin; }
.rotaBox  { top: 150vmin; }
	
.frame3d {	
	transform-style: preserve-3d;
	position: absolute;    
	width:  0%;  height:  0%;
	top: 50%; left: 50%;
	}
	
.paperplane { 
	width: 300px; height: 99px;	
	top: 50%;	left: 50%;
	margin-top: -50px;
	margin-left: -150px;	
	transform: rotateZ(90deg);
	}
	
.fold { 
	width: 100%; height: 100%;
	position: absolute;
	overflow: hidden;
	}
	
.fold.wing.left { transform: rotateZ(  90deg) rotateY(  90deg) rotateZ( -13deg) translateX( -19px); }
.fold.wing.rite { transform: rotateZ( -90deg) rotateY(  90deg) rotateZ( -13deg) translateX( -19px); }
.fold.body.left { transform: rotateY(  77deg) rotateX(  45.25deg) rotateZ(   0deg); }
.fold.body.rite { transform: rotateY( 103deg) rotateX( -45.25deg) rotateZ(   0deg); }

.fold.wing.left { top: 35px; left:  88px; }
.fold.wing.rite { top: 35px; left: -87px; }
.fold.body.left { left: 1px; }
.fold.body.rite { left: 0px; }

.fold:after {
	content: "";
	display: block;
	position: absolute;
	width: 45%; height: 360%;
	}	
	
.fold:after {
	top: -67px;	left: 108px;
	transform: rotateZ(72deg);	
	box-sizing: border-box;
	}	
	
.fold:after { border: 1px solid blue; background-color: rgba(100,100,100, 0.3); }	
.fold.wing,
.fold.body  { border-bottom: 1px solid blue; border-right:  1px solid blue;	}
	
	

/* >>>>>>>>>>>-------------------------- GamePad --------------------------<<<<<<<<<<<<< */

.HoverPad {	z-index: 999; position: absolute; width: 12vmin; right: 15vmin; bottom: 15vmin; }	
.HoverPad:after, .HoverPad:before {
	content: ""; display: block; position: absolute;
	width: 100%; padding-bottom: 100%;	
	transform: scale(0.415, 1.0) rotateZ(45deg) rotateX(180deg) rotateY(180deg);	
	margin-left: 0px;	margin-top: 2.471vmin;	
	background-size: contain;
	}
	
.HoverPad:after { display: none;  }
.nw:before, .ne:before, .sw:before, .se:before    { background-image: url(pics/PadDia.svg); }
.et:before,  .wt:before,  .nt:before,  .st:before { background-image: url(pics/PadLin.svg); }
.nw:after,  .ne:after,  .sw:after,  .se:after  { background-image: url(pics/PadDiaOn.svg); }
.et:after,  .wt:after,  .nt:after,  .st:after  { background-image: url(pics/PadLinOn.svg); }

.st	{ transform: rotate(  0deg); }
.sw	{ transform: rotate( 45deg); }
.wt	{ transform: rotate( 90deg); }
.nw { transform: rotate(135deg); }
.nt	{ transform: rotate(180deg); }
.ne { transform: rotate(225deg); }
.et	{ transform: rotate(270deg); }
.se	{ transform: rotate(315deg); }	

.HoverPad.DeadZone        { right: 21vmin; width: 0vmin; height: 0vmin; background-color: rgba(0,0,0,0.0); }	
.HoverPad.DeadZone:after,
.HoverPad.DeadZone:before {
	content: "";
	display: block;
	position: absolute;
	border: none;
	transform: none;
	background-image: none;
	border-radius: 50%;
	background-color: rgba(0,0,0,0.0);
	}
	
.HoverPad.DeadZone:after  { width:  3vmin; height:  3vmin; margin-left: -1.5vmin; margin-top: -1.5vmin; }	
.HoverPad.DeadZone:before { width: 25vmin; height: 25vmin; margin-left: -12.5vmin; margin-top: -12.5vmin; }
.HoverPad.DeadZone:active::before { display: none; }
.HoverPad:hover::after { display: block; }





/* >>>>>>>>>>>-------------------------- Plane Controls --------------------------<<<<<<<<<<<<< */

/* Idle */
.perspBox .rota.vertical   { transform: rotateZ(  -2deg); }
.perspBox .rotaBox .rota.cY { transform: rotateY( -10deg); }

/* -------------------------- Horizon Anchor -------------------------- */
/* Diagonal */
.HoverPad.ne:hover ~ .perspBox .rota.vertical    { transform: rotateZ( 15deg); }
.HoverPad.ne:hover ~ .perspBox .rota.horizontal  { transform: rotateZ( 15deg); }
.HoverPad.nw:hover ~ .perspBox .rota.vertical    { transform: rotateZ( 15deg); }
.HoverPad.nw:hover ~ .perspBox .rota.horizontal  { transform: rotateZ(-15deg); }
.HoverPad.sw:hover ~ .perspBox .rota.vertical    { transform: rotateZ(-10deg); }
.HoverPad.sw:hover ~ .perspBox .rota.horizontal  { transform: rotateZ(-15deg); }
.HoverPad.se:hover ~ .perspBox .rota.vertical    { transform: rotateZ(-10deg); }
.HoverPad.se:hover ~ .perspBox .rota.horizontal  { transform: rotateZ( 15deg); }

/* Straight */
.HoverPad.nt:hover ~ .perspBox .rota.vertical    { transform: rotateZ( 13deg); }
.HoverPad.st:hover ~ .perspBox .rota.vertical    { transform: rotateZ(-7deg); }
.HoverPad.wt:hover ~ .perspBox .rota.horizontal  { transform: rotateZ(-15deg); }
.HoverPad.et:hover ~ .perspBox .rota.horizontal  { transform: rotateZ( 15deg); }


/* -------------------------- Plane Weight -------------------------- */
/* Diagonal */
.HoverPad.ne:hover ~ .perspBox .rotaBox .rota.cY { transform: rotateY( 15deg); }
.HoverPad.ne:hover ~ .perspBox .rotaBox .rota.cX { transform: rotateX(-15deg); }
.HoverPad.ne:hover ~ .perspBox .rotaBox .rota.cZ { transform: rotateZ(-25deg); }

.HoverPad.nw:hover ~ .perspBox .rotaBox .rota.cY { transform: rotateY( 15deg); }
.HoverPad.nw:hover ~ .perspBox .rotaBox .rota.cX { transform: rotateX( 15deg); }
.HoverPad.nw:hover ~ .perspBox .rotaBox .rota.cZ { transform: rotateZ( 25deg); }

.HoverPad.sw:hover ~ .perspBox .rotaBox .rota.cY { transform: rotateY(-15deg); }
.HoverPad.sw:hover ~ .perspBox .rotaBox .rota.cX { transform: rotateX( 15deg); }
.HoverPad.sw:hover ~ .perspBox .rotaBox .rota.cZ { transform: rotateZ( 35deg); }

.HoverPad.se:hover ~ .perspBox .rotaBox .rota.cY { transform: rotateY(-15deg); }
.HoverPad.se:hover ~ .perspBox .rotaBox .rota.cX { transform: rotateX(-15deg); }
.HoverPad.se:hover ~ .perspBox .rotaBox .rota.cZ { transform: rotateZ(-35deg); }

/* Straight */
.HoverPad.nt:hover ~ .perspBox .rotaBox .rota.cY { transform: rotateY( 15deg); }
.HoverPad.st:hover ~ .perspBox .rotaBox .rota.cY { transform: rotateY(-15deg); }

.HoverPad.et:hover ~ .perspBox .rotaBox .rota.cY { transform: rotateY(-15deg); }
.HoverPad.et:hover ~ .perspBox .rotaBox .rota.cX { transform: rotateX( -5deg); }
.HoverPad.et:hover ~ .perspBox .rotaBox .rota.cZ { transform: rotateZ(-60deg); }

.HoverPad.wt:hover ~ .perspBox .rotaBox .rota.cY { transform: rotateY(-15deg); }
.HoverPad.wt:hover ~ .perspBox .rotaBox .rota.cX { transform: rotateX(  5deg); }
.HoverPad.wt:hover ~ .perspBox .rotaBox .rota.cZ { transform: rotateZ( 60deg); }















/* ---------    visualize    -------------- */
/*
.intersect {}
.horizontal,
.vertical {
	border: 4px solid black;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	}
.horizontal { border-color: green; }	
.vertical { border-color: orange; }
.intersect { border-color: blue; border-radius: 15%; }
*/

.perspBox { border-top: 1px solid purple; }



/* Plane Sphere */
.rota:after { 
	content: "";
	display: block;
	position: absolute;
	width: 400px; height: 400px;
	top: -200px; left: -200px;	
	border: 2px solid rgba(100,180,20,0.7);
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	transform: rotateX(0deg);
	}
	
.rota.cX:after { transform: rotateY(90deg); }	
.rota.cY:after { transform: rotateX(90deg); }	
	
/*
.rota.vertical:after,
.rota.horizontal:after { display: none; }
*/