* {
  padding:0; margin:0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow:visible;
  image-rendering: pixelated;
}

html, body {
 position:absolute;
 transform-style: flat;
 width:100%; height:100%;
 display: flex;
 justify-content: center;
 align-items: center;
 background:black;
 position: fixed;
 overflow: hidden;
}

/* 
 * Scene 
 */
.scene {
  position:absolute;
  transform-origin:0px 0px 0px;
  transform-style: preserve-3d;
  perspective:2400px;
  transform:scale(0.5);
}



.boxtop {
  position:absolute;
  top:50%; left:50%;
  width:1200px; height:1200px;
  border-radius:0%;
  transform-origin:0px 0px 0px;
  transform:translate(-50%,-50%) translateZ(0px) rotateX(0deg);
  background-size:1200px 1200px;
  background-image: url( 'https://www.wazcraft.com/cpa/img/box_top_pac.png' );
}

.boxsidea{
  position:absolute;
  top:50%; left:50%;
  width:1200px; height:200px;
  border-radius:0%;
  transform-origin:0px 0px 0px;
  transform:translate(600px,-600px) translateZ(0px) rotateX(-90deg) rotateY(180deg);
  background-size:1200px 200px;
  background-image: url( 'https://www.wazcraft.com/cpa/img/box_side_a_pac.png' );
  filter:brightness(0.66);
}


.boxsideb{
  position:absolute;
  top:50%; left:50%;
  width:1200px; height:200px;
  border-radius:0%;
  transform-origin:0px 0px 0px;
  transform:translate(600px,600px) translateZ(0px) rotateX(-90deg) rotateY(90deg);
  background-size:1200px 200px;
  background-image: url( 'https://www.wazcraft.com/cpa/img/box_side_b_pac.png' );
  filter:brightness(0.33);
}

.boxsidec{
  position:absolute;
  top:50%; left:50%;
  width:1200px; height:200px;
  border-radius:0%;
  transform-origin:0px 0px 0px;
  transform:translate(-600px,600px) translateZ(0px) rotateX(-90deg) rotateY(0deg);
  background-size:1200px 200px;
  background-image: url( 'https://www.wazcraft.com/cpa/img/box_side_c_pac.png' );
  filter:brightness(0.33);
}

.boxsided{
  position:absolute;
  top:50%; left:50%;
  width:1200px; height:200px;
  border-radius:0%;
  transform-origin:0px 0px 0px;
  transform:translate(-600px,-600px) translateZ(0px) rotateX(-90deg) rotateY(-90deg);
  background-size:1200px 200px;
  background-image: url( 'https://www.wazcraft.com/cpa/img/box_side_d_pac.png' );
  filter:brightness(0.66);
}


.table {
  position:absolute;
  top:50%; left:50%;
  width:3072px; height:3072px;
  border-radius:0%;
  transform-origin:0px 0px 0px;
  transform:translate(-50%,-50%) translateZ(-200px) rotateX(0deg);
  background-image: 
    radial-gradient( transparent 1024px, black 1536px ), 
    url( 'https://www.wazcraft.com/cpa/img/shadow_pac.png' ),
    url( 'https://www.wazcraft.com/cpa/img/felt.png' );
  background-position:center center;
  background-size:100% 100%, 1600px 1600px, 512px 512px;
  background-repeat:no-repeat, no-repeat, repeat;


}



/*
 * Object
 */
.object {

  --object-trx:0;
  --object-try:0;
  --object-rx:0;
  --object-ry:0;
  position:absolute;
  transform-origin:center;
  transform:rotateX( calc( 1deg * var(--object-rx) ) )  rotateZ( calc( 1deg * var(--object-ry) ) );
  display: flex;
  justify-content: center;
  align-items: center;
}

/*
 * Globe
 */
.globe {
  --shift:0; /* <-- int(0-35) */
  --rot:0; /* <-- rotation of globe float(0-1) */
  position:absolute;
  left:50%; top:50%;  
  transform-origin:0px 0px 0px;
  transform:translateZ(-400px) rotateX(-25deg) rotateY(calc(-10deg * var(--rot)));
}

/*
 * Quadrangles
 */
/* strip Lat 60°:70° */
.quad:nth-child(1){  --lat:65; --lon:-45; --offx:5;  --offy:-0; --int-a:0.82; --int-b:0.62; }
.quad:nth-child(2){  --lat:65; --lon:-35; --offx:4;  --offy:-0; --int-a:1.02; --int-b:0.82; }
.quad:nth-child(3){  --lat:65; --lon:-25; --offx:3;  --offy:-0; --int-a:1.12; --int-b:1.02; }
.quad:nth-child(4){  --lat:65; --lon:-15; --offx:2;  --offy:-0; --int-a:1.18; --int-b:1.12; }
.quad:nth-child(5){  --lat:65; --lon:-5;  --offx:1;  --offy:-0; --int-a:1.12; --int-b:1.18; }
.quad:nth-child(6){  --lat:65; --lon:5;   --offx:0;  --offy:-0; --int-a:1.02; --int-b:1.12; }
.quad:nth-child(7){  --lat:65; --lon:15;  --offx:-1; --offy:-0; --int-a:0.82; --int-b:1.02; }
.quad:nth-child(8){  --lat:65; --lon:25;  --offx:-2; --offy:-0; --int-a:0.62; --int-b:0.82; }
.quad:nth-child(9){  --lat:65; --lon:35;  --offx:-3; --offy:-0; --int-a:0.42; --int-b:0.62; }
.quad:nth-child(10){ --lat:65; --lon:45;  --offx:-4; --offy:-0; --int-a:0.20; --int-b:0.42; }
.quad:nth-child(11){ --lat:65; --lon:55;  --offx:-5; --offy:-0; --int-a:0.00; --int-b:0.20; }





/* strip Lat 50°:60° */
.quad:nth-child(12){ --lat:55; --lon:-45; --offx:5;  --offy:-1; --int-a:1.02; --int-b:0.76; }
.quad:nth-child(13){ --lat:55; --lon:-35; --offx:4;  --offy:-1; --int-a:1.24; --int-b:1.02; }
.quad:nth-child(14){ --lat:55; --lon:-25; --offx:3;  --offy:-1; --int-a:1.40; --int-b:1.24; }
.quad:nth-child(15){ --lat:55; --lon:-15; --offx:2;  --offy:-1; --int-a:1.44; --int-b:1.40; }
.quad:nth-child(16){ --lat:55; --lon:-5;  --offx:1;  --offy:-1; --int-a:1.40; --int-b:1.44; }
.quad:nth-child(17){ --lat:55; --lon:5;   --offx:0;  --offy:-1; --int-a:1.24; --int-b:1.40; }
.quad:nth-child(18){ --lat:55; --lon:15;  --offx:-1; --offy:-1; --int-a:1.02; --int-b:1.24; }
.quad:nth-child(19){ --lat:55; --lon:25;  --offx:-2; --offy:-1; --int-a:0.76; --int-b:1.02; }
.quad:nth-child(20){ --lat:55; --lon:35;  --offx:-3; --offy:-1; --int-a:0.54; --int-b:0.76; }
.quad:nth-child(21){ --lat:55; --lon:45;  --offx:-4; --offy:-1; --int-a:0.30; --int-b:0.54; }
.quad:nth-child(22){ --lat:55; --lon:55;  --offx:-5; --offy:-1; --int-a:0.00; --int-b:0.30; }

/* strip Lat 40°:50° */
.quad:nth-child(23){ --lat:45; --lon:-55; --offx:6;  --offy:-2; --int-a:0.86; --int-b:0.62; }
.quad:nth-child(24){ --lat:45; --lon:-45; --offx:5;  --offy:-2; --int-a:1.10; --int-b:0.86; }
.quad:nth-child(25){ --lat:45; --lon:-35; --offx:4;  --offy:-2; --int-a:1.40; --int-b:1.10; }
.quad:nth-child(26){ --lat:45; --lon:-25; --offx:3;  --offy:-2; --int-a:1.62; --int-b:1.40; }
.quad:nth-child(27){ --lat:45; --lon:-15; --offx:2;  --offy:-2; --int-a:1.74; --int-b:1.62; }
.quad:nth-child(28){ --lat:45; --lon:-5;  --offx:1;  --offy:-2; --int-a:1.62; --int-b:1.74; }
.quad:nth-child(29){ --lat:45; --lon:5;   --offx:0;  --offy:-2; --int-a:1.40; --int-b:1.62; }
.quad:nth-child(30){ --lat:45; --lon:15;  --offx:-1; --offy:-2; --int-a:1.10; --int-b:1.40; }
.quad:nth-child(31){ --lat:45; --lon:25;  --offx:-2; --offy:-2; --int-a:0.86; --int-b:1.10; }
.quad:nth-child(32){ --lat:45; --lon:35;  --offx:-3; --offy:-2; --int-a:0.62; --int-b:0.86; }
.quad:nth-child(33){ --lat:45; --lon:45;  --offx:-4; --offy:-2; --int-a:0.34; --int-b:0.62; }
.quad:nth-child(34){ --lat:45; --lon:55;  --offx:-5; --offy:-2; --int-a:0.00; --int-b:0.34; }
.quad:nth-child(35){ --lat:45; --lon:65;  --offx:-6; --offy:-2; --int-a:0.00; --int-b:0.00; }

/* strip Lat 30°:40° */
.quad:nth-child(36){ --lat:35; --lon:-55; --offx:6;  --offy:-3; --int-a:0.88; --int-b:0.64; }
.quad:nth-child(37){ --lat:35; --lon:-45; --offx:5;  --offy:-3; --int-a:1.18; --int-b:0.88; }
.quad:nth-child(38){ --lat:35; --lon:-35; --offx:4;  --offy:-3; --int-a:1.44; --int-b:1.18; }
.quad:nth-child(39){ --lat:35; --lon:-25; --offx:3;  --offy:-3; --int-a:1.74; --int-b:1.44; }
.quad:nth-child(40){ --lat:35; --lon:-15; --offx:2;  --offy:-3; --int-a:2.00; --int-b:1.74; }
.quad:nth-child(41){ --lat:35; --lon:-5;  --offx:1;  --offy:-3; --int-a:1.74; --int-b:2.00; }
.quad:nth-child(42){ --lat:35; --lon:5;   --offx:0;  --offy:-3; --int-a:1.44; --int-b:1.74; }
.quad:nth-child(43){ --lat:35; --lon:15;  --offx:-1; --offy:-3; --int-a:1.18; --int-b:1.44; }
.quad:nth-child(44){ --lat:35; --lon:25;  --offx:-2; --offy:-3; --int-a:0.88; --int-b:1.18; }
.quad:nth-child(45){ --lat:35; --lon:35;  --offx:-3; --offy:-3; --int-a:0.64; --int-b:0.88; }
.quad:nth-child(46){ --lat:35; --lon:45;  --offx:-4; --offy:-3; --int-a:0.36; --int-b:0.64; }
.quad:nth-child(47){ --lat:35; --lon:55;  --offx:-5; --offy:-3; --int-a:0.00; --int-b:0.36; }
.quad:nth-child(48){ --lat:35; --lon:65;  --offx:-6; --offy:-3; --int-a:0.00; --int-b:0.00; }

/* strip Lat 20°:30° */
.quad:nth-child(49){ --lat:25; --lon:-55; --offx:6;  --offy:-4; --int-a:0.86; --int-b:0.60; }
.quad:nth-child(50){ --lat:25; --lon:-45; --offx:5;  --offy:-4; --int-a:1.12; --int-b:0.86; }
.quad:nth-child(51){ --lat:25; --lon:-35; --offx:4;  --offy:-4; --int-a:1.36; --int-b:1.12; }
.quad:nth-child(52){ --lat:25; --lon:-25; --offx:3;  --offy:-4; --int-a:1.60; --int-b:1.36; }
.quad:nth-child(53){ --lat:25; --lon:-15; --offx:2;  --offy:-4; --int-a:1.72; --int-b:1.60; }
.quad:nth-child(54){ --lat:25; --lon:-5;  --offx:1;  --offy:-4; --int-a:1.60; --int-b:1.72; }
.quad:nth-child(55){ --lat:25; --lon:5;   --offx:0;  --offy:-4; --int-a:1.36; --int-b:1.60; }
.quad:nth-child(56){ --lat:25; --lon:15;  --offx:-1; --offy:-4; --int-a:1.12; --int-b:1.36; }
.quad:nth-child(57){ --lat:25; --lon:25;  --offx:-2; --offy:-4; --int-a:0.86; --int-b:1.12; }
.quad:nth-child(58){ --lat:25; --lon:35;  --offx:-3; --offy:-4; --int-a:0.60; --int-b:0.86; }
.quad:nth-child(59){ --lat:25; --lon:45;  --offx:-4; --offy:-4; --int-a:0.32; --int-b:0.60; }
.quad:nth-child(60){ --lat:25; --lon:55;  --offx:-5; --offy:-4; --int-a:0.00; --int-b:0.32; }
.quad:nth-child(61){ --lat:25; --lon:65;  --offx:-6; --offy:-4; --int-a:0.00; --int-b:0.00; }

/* strip Lat 10°:20° */
.quad:nth-child(62){ --lat:15; --lon:-45; --offx:5;  --offy:-5; --int-a:0.98; --int-b:0.74; }
.quad:nth-child(63){ --lat:15; --lon:-35; --offx:4;  --offy:-5; --int-a:1.20; --int-b:0.98; }
.quad:nth-child(64){ --lat:15; --lon:-25; --offx:3;  --offy:-5; --int-a:1.38; --int-b:1.20; }
.quad:nth-child(65){ --lat:15; --lon:-15; --offx:2;  --offy:-5; --int-a:1.44; --int-b:1.38; }
.quad:nth-child(66){ --lat:15; --lon:-5;  --offx:1;  --offy:-5; --int-a:1.38; --int-b:1.44; }
.quad:nth-child(67){ --lat:15; --lon:5;   --offx:0;  --offy:-5; --int-a:1.20; --int-b:1.38; }
.quad:nth-child(68){ --lat:15; --lon:15;  --offx:-1; --offy:-5; --int-a:0.98; --int-b:1.20; }
.quad:nth-child(69){ --lat:15; --lon:25;  --offx:-2; --offy:-5; --int-a:0.74; --int-b:0.98; }
.quad:nth-child(70){ --lat:15; --lon:35;  --offx:-3; --offy:-5; --int-a:0.52; --int-b:0.74; }
.quad:nth-child(71){ --lat:15; --lon:45;  --offx:-4; --offy:-5; --int-a:0.28; --int-b:0.52; }
.quad:nth-child(72){ --lat:15; --lon:55;  --offx:-5; --offy:-5; --int-a:0.00; --int-b:0.28; }

/* strip Lat 0°:10° */
.quad:nth-child(73){ --lat:5; --lon:-45; --offx:5;  --offy:-6; --int-a:0.82; --int-b:0.62; }
.quad:nth-child(74){ --lat:5; --lon:-35; --offx:4;  --offy:-6; --int-a:1.00; --int-b:0.82; }
.quad:nth-child(75){ --lat:5; --lon:-25; --offx:3;  --offy:-6; --int-a:1.08; --int-b:1.00; }
.quad:nth-child(76){ --lat:5; --lon:-15; --offx:2;  --offy:-6; --int-a:1.16; --int-b:1.08; }
.quad:nth-child(77){ --lat:5; --lon:-5;  --offx:1;  --offy:-6; --int-a:1.08; --int-b:1.16; }
.quad:nth-child(78){ --lat:5; --lon:5;   --offx:0;  --offy:-6; --int-a:1.00; --int-b:1.08; }
.quad:nth-child(79){ --lat:5; --lon:15;  --offx:-1; --offy:-6; --int-a:0.82; --int-b:1.00; }
.quad:nth-child(80){ --lat:5; --lon:25;  --offx:-2; --offy:-6; --int-a:0.62; --int-b:0.82; }
.quad:nth-child(81){ --lat:5; --lon:35;  --offx:-3; --offy:-6; --int-a:0.42; --int-b:0.62; }
.quad:nth-child(82){ --lat:5; --lon:45;  --offx:-4; --offy:-6; --int-a:0.20; --int-b:0.42; }
.quad:nth-child(83){ --lat:5; --lon:55;  --offx:-5; --offy:-6; --int-a:0.00; --int-b:0.20; }

/* strip Lat 10°:0° */
.quad:nth-child(84){ --lat:-5; --lon:-35; --offx:4;  --offy:-7; --int-a:0.76; --int-b:0.62; }
.quad:nth-child(85){ --lat:-5; --lon:-25; --offx:3;  --offy:-7; --int-a:0.84; --int-b:0.76; }
.quad:nth-child(86){ --lat:-5; --lon:-15; --offx:2;  --offy:-7; --int-a:0.88; --int-b:0.84; }
.quad:nth-child(87){ --lat:-5; --lon:-5;  --offx:1;  --offy:-7; --int-a:0.84; --int-b:0.88; }
.quad:nth-child(88){ --lat:-5; --lon:5;   --offx:0;  --offy:-7; --int-a:0.76; --int-b:0.84; }
.quad:nth-child(89){ --lat:-5; --lon:15;  --offx:-1; --offy:-7; --int-a:0.62; --int-b:0.76; }
.quad:nth-child(90){ --lat:-5; --lon:25;  --offx:-2; --offy:-7; --int-a:0.42; --int-b:0.62; }
.quad:nth-child(91){ --lat:-5; --lon:35;  --offx:-3; --offy:-7; --int-a:0.26; --int-b:0.42; }
.quad:nth-child(92){ --lat:-5; --lon:45;  --offx:-4; --offy:-7; --int-a:0.00; --int-b:0.26; }

/* strip Lat 20°:10° */
.quad:nth-child(93){ --lat:-15; --lon:-25; --offx:3;  --offy:-8; --int-a:0.50; --int-b:0.38; }
.quad:nth-child(94){ --lat:-15; --lon:-15; --offx:2;  --offy:-8; --int-a:0.60; --int-b:0.50; }
.quad:nth-child(95){ --lat:-15; --lon:-5;  --offx:1;  --offy:-8; --int-a:0.60; --int-b:0.60; }
.quad:nth-child(96){ --lat:-15; --lon:5;   --offx:0;  --offy:-8; --int-a:0.60; --int-b:0.60; }
.quad:nth-child(97){ --lat:-15; --lon:15;  --offx:-1; --offy:-8; --int-a:0.50; --int-b:0.60; }
.quad:nth-child(98){ --lat:-15; --lon:25;  --offx:-2; --offy:-8; --int-a:0.38; --int-b:0.50; }
.quad:nth-child(99){ --lat:-15; --lon:35;  --offx:-3; --offy:-8; --int-a:0.24; --int-b:0.38; }

.quad {
  --int-a:1;
  --int-b:1;
  --contrast:0.35;
  --balance:0.8; 


  filter:brightness( calc( (var(--balance) - ( var(--contrast) * 0.5) ) + ( var(--int-a) + ( ( var(--int-b) - var(--int-a) ) * var(--rot) ) ) * var(--contrast) ) );  
  width:98px; height:98px;
  position:absolute;
  transform-origin:49px 49px 0px;
  transform:translate(-50%,-50%) rotateY(calc( 1deg * var(--lon) ) ) rotateX(calc( 1deg * var(--lat))) translateZ(557.9px); 
  background: 
    url(https://www.wazcraft.com/cpa/img/map_sm_comp_pac.png);
  background-size:
    3528px 882px;
  background-position:
    calc(98px * ( var(--offx) - var(--shift) ) ) calc(98px * ( 0 + var(--offy) ) ); 
}

var obj, _tx, _ty;
var _rx = 50;
var _ry = -20;




var _pos = 16;
var _shift, _rot;
window.onload = function(){
  obj = document.getElementById('object');
  
  window.addEventListener('touchstart', input);
  window.addEventListener('touchmove', input);
  window.addEventListener('touchend', input);
  window.addEventListener('touchcancel', input);
  window.addEventListener('mousedown', input);
  window.addEventListener('mousemove', input);
  window.addEventListener('mouseup', input);
  window.addEventListener('mouseleave', input);
  
  //document.body.addEventListener('touchmove', input);
  //document.body.addEventListener('mousemove', input);
  update();
}

function update (){
  _pos = (_pos + 0.02) % 35.99; //<-- float[0-36]
  
  if(_shift != parseInt(_pos)){
     _shift = parseInt(_pos); // <-- map shift int[0-36]
     if(_shift != null) document.getElementById('globe').style.setProperty('--shift', _shift);
  }
  
  if(_rot != _pos % 1){
    _rot = _pos % 1; // <-- rotation of globe float(0-1)
    if(_rot != null) document.getElementById('globe').style.setProperty('--rot', _rot);
  }
  
  obj.style.setProperty('--object-rx', _rx);
  obj.style.setProperty('--object-ry', _ry);

  //window.requestAnimationFrame(update);
  setTimeout(update, 1000/30);
}




function input(e){
  let touchobj = (e.touches) ? e.touches[0]: null;
  let cx = (touchobj) ? parseInt(touchobj.clientX) : e.clientX;
  let cy = (touchobj) ? parseInt(touchobj.clientY) : e.clientY;
  if( e.type == 'mousedown' || e.type == 'touchstart' ) { 
    _tx = cx; _ty = cy; 
  }
  if( e.type == 'mouseup' || e.type == 'mouseleave' || 
     e.type == 'touchend' || e.type == 'touchcancel' ) { 
    _tx =null; _ty = null; 
  }
  if( ( e.type == 'mousemove' || e.type == 'touchmove' ) && _tx != null ) {  
    _ry = ((_ry + ((_tx - cx)*0.25) % 360) + 360 ) % 360; _tx = cx;
    _rx = Math.min(Math.max(_rx + ((_ty - cy )*0.25),20),94); _ty = cy;
  }
}