@charset "utf-8";
#model{
    position: absolute;
    inset: 0;
    perspective: 80vw;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    overflow:hidden;
}
#model #modelAxe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform: rotateX(-15deg) rotateY(15deg);
    transform-style: preserve-3d;
    cursor:grab;
    --mapL:20;
    --unit:5%;
}

/* define texture */
#model{
    --texture:url(../gfx/gfx.gif);
    --textureAfter:url(../gfx/baseball.gif);
    --textureBefore:url(../gfx/afol.gif);
}

/*set solid class */
.solid,#shadow{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform-style: preserve-3d;
    image-rendering: pixelated;
    transform:  translateX(calc(var(--unit) * var(--posX)))
                translateY(calc(var(--unit) * var(--posY)))
                rotateY(-90deg) translateX(calc(var(--unit) * var(--posZ))) rotateY(90deg)
                rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ));
}
.solid div{
    transform-style: inherit;
}
.solid .front,
.solid .back,
.solid .left,
.solid .right,
.solid .top,
.solid .bottom,
.solid .plan{
    box-sizing: border-box;
    backface-visibility: visible;
    position:absolute;
    top:50%;
    left:50%;
    background:transparent var(--texture);
    background-size:calc((var(--mapL) * 100% ) / var(--width));
    box-shadow: 0px 0px 0px 1px #000000;
}
.solid .front,
.solid .back{
    background-position-x: calc((var(--offsetX) / (var(--mapL) - var(--width)) ) * 100%);
    background-position-y: calc((var(--offsetY) / (var(--mapL) - var(--height)) ) * 100%);
}
.solid .left,
.solid .right{
    background-position-x: calc((var(--offsetX) / (var(--mapL) - var(--depth)) ) * 100%);
    background-position-y: calc((var(--offsetY) / (var(--mapL) - var(--height)) ) * 100%);
}
.solid .top,
.solid .bottom{
    background-position-x: calc((var(--offsetX) / (var(--mapL) - var(--width)) ) * 100%);
    background-position-y: calc((var(--offsetY) / (var(--mapL) - var(--depth)) ) * 100%);
}
.solid div:after,
.solid div:before{
    content:"";
    display:block;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:transparent var(--textureAfter);
    background-size:inherit;
    background-position-x: inherit;
    background-position-y: inherit;
    transition:opacity .5s ease;
}

.solid div:before{
    z-index:1;
    background:transparent var(--textureBefore);
    background-size:inherit;
    background-position-x: inherit;
    background-position-y: inherit;
}
.solid .top,
.solid .bottom{
    background-position-y: calc((var(--offsetY) / (var(--mapL) - var(--depth)) ) * 100%);
}
.solid .plan{
    box-shadow:none;
    width:calc(var(--unit) * var(--p-width));
    height:calc(var(--unit) * var(--p-height));
    transform:  translate(-50%,-50%)
                translateX(calc(var(--p-posX) / (var(--p-width) / 2) * 50% ))
                translateY(calc(var(--p-posY) / (var(--p-height) / 2) * 50% ))
                rotateY(-90deg)
                translateX(calc(var(--p-posZ) / (var(--p-width) / 2) * 50% ))
                rotateY(90deg)
                rotateX(var(--p-rotX))
                rotateY(var(--p-rotY))
                rotateZ(var(--p-rotZ));
    background-size:calc((var(--mapL) * 100% ) / var(--p-width));
    background-position-x: calc((var(--offsetX) / (var(--mapL) - var(--p-width)) ) * 100%);
    background-position-y: calc((var(--offsetY) / (var(--mapL) - var(--p-height)) ) * 100%);

}
.solid .front{
    width:calc(var(--unit) * var(--width));
    height:calc(var(--unit) * var(--height));
    transform:  translate(-50%,-50%)
                rotateY(-90deg) translateX(calc((50% * (var(--depth) /  var(--width))))) rotateY(90deg);
}
.solid .back{
    width:calc(var(--unit) * var(--width));
    height:calc(var(--unit) * var(--height));
    transform:  translate(-50%,-50%)
                rotateY(-90deg) translateX(calc((-50% * (var(--depth) /  var(--width))))) rotateY(-90deg);
}
.solid .left{
    width:calc(var(--unit) * var(--depth));
    height:calc(var(--unit) * var(--height));
    background-size:calc((var(--mapL) * 100% ) / var(--depth));
    transform:  translate(-50%,-50%)
                translateX(calc((50% * (var(--width) /  var(--depth)))))
                rotateY(90deg);
}
.solid .right{
    width:calc(var(--unit) * var(--depth));
    height:calc(var(--unit) * var(--height));
    background-size:calc((var(--mapL) * 100% ) / var(--depth));
    transform:  translate(-50%,-50%)
                translateX(calc((-50% * (var(--width) /  var(--depth)))))
                rotateY(-90deg);
}
.solid .top{
    width:calc(var(--unit) * var(--width));
    height:calc(var(--unit) * var(--depth));
    transform:  translate(-50%,-50%)
                translateY(calc((-50% * (var(--height) /  var(--depth)))))
                rotateX(90deg);
}
.solid .bottom{
    width:calc(var(--unit) * var(--width));
    height:calc(var(--unit) * var(--depth));
    transform:  translate(-50%,-50%)
                translateY(calc((50% * (var(--height) /  var(--depth)))))
                rotateX(-90deg);
}
#head{
    --width:6;
    --height:5;
    --depth:6;
    --posX:0;
    --posY:-3;
    --posZ:0;
    --rotX:0deg;
    --rotY:0deg;
    --rotZ:0deg;
    /* animation: aniHead .5s linear infinite alternate; */
}
#head .front{
    --offsetX:6;
    --offsetY:0;
}
#head .left{
    --offsetX:12;
    --offsetY:0;
}
#head .right{
    --offsetX:0;
    --offsetY:0;
}
#head .top{
    --offsetX:6;
    --offsetY:5;
}
#head .bottom{
    --offsetX:0;
    --offsetY:5;
}
#head .capTop{
    --p-width: 6;
    --p-height: 2;
    --p-posX: 0;
    --p-posY: -1;
    --p-posZ: 4;
    --p-rotX: 90deg;
    --p-rotY: 0deg;
    --p-rotZ: 0deg;
    --offsetX: 6;
    --offsetY: 17;
}
#head .capLeft{
    --p-width: 2;
    --p-height: 1;
    --p-posX: 3;
    --p-posY: -0.5;
    --p-posZ: 4;
    --p-rotX: 0deg;
    --p-rotY: 90deg;
    --p-rotZ: 0deg;
    --offsetX: 16;
    --offsetY: 6;
}
#head .capRight{
    --p-width: 2;
    --p-height: 1;
    --p-posX: -3;
    --p-posY: -0.5;
    --p-posZ: 4;
    --p-rotX: 0deg;
    --p-rotY: -90deg;
    --p-rotZ: 0deg;
    --offsetX: 16;
    --offsetY: 7;
}
#head .headTop{
    --p-width: 2;
    --p-height: 1;
    --p-posX: 0;
    --p-posY: -3;
    --p-posZ: 0;
    --p-rotX: 0deg;
    --p-rotY: 0deg;
    --p-rotZ: 0deg;
    --offsetX: 16;
    --offsetY: 5;
}
#head .glasses{
    --p-width: 6;
    --p-height: 2;
    --p-posX: 0;
    --p-posY: 0.2;
    --p-posZ: 3.5;
    --p-rotX: 0deg;
    --p-rotY: 0deg;
    --p-rotZ: 0deg;
    --offsetX: 0;
    --offsetY: 17;
}
#head .idea-left{
    --p-width: 3;
    --p-height: 3;
    --p-posX: 5.5;
    --p-posY: 0;
    --p-posZ: 0;
    --p-rotX: 0deg;
    --p-rotY: 0deg;
    --p-rotZ: 0deg;
    --offsetX: 16;
    --offsetY: 8;
}
#head .idea-right{
    --p-width: 3;
    --p-height: 3;
    --p-posX: -5.5;
    --p-posY: 0;
    --p-posZ: 0;
    --p-rotX: 0deg;
    --p-rotY: 0deg;
    --p-rotZ: 0deg;
    --offsetX: 16;
    --offsetY: 11;
}

@keyframes aniHead {
    from { --rotY:5deg; }
    50% { --rotY:0deg; }
    to   { --rotY:-5deg; }
}

#body{
    --width: 4;
    --height: 6;
    --depth: 4;
    --posX: 0;
    --posY: 2.5;
    --posZ: 0;
    --rotX: 0deg;
    --rotY: 0deg;
    --rotZ: 0deg;
}
#body .front{
    --offsetX:4;
    --offsetY:11;
}
#body .left{
    --offsetX:8;
    --offsetY:11;
}
#body .right{
    --offsetX:0;
    --offsetY:11;
}
#body .bottom{
    --offsetX:12;
    --offsetY:5;
}
#body .tongue{
    --p-width: 4;
    --p-height: 1;
    --p-posX: 0;
    --p-posY: 1;
    --p-posZ: 2.2;
    --p-rotX: -30deg;
    --p-rotY: 0deg;
    --p-rotZ: 0deg;
    --offsetX: 0;
    --offsetY: 19;
}
#body .lanyard{
    --p-width: 4;
    --p-height: 1;
    --p-posX: 0;
    --p-posY: 1;
    --p-posZ: 2.2;
    --p-rotX: -30deg;
    --p-rotY: 0deg;
    --p-rotZ: 0deg;
    --offsetX: 0;
    --offsetY: 19;
}
#body .shadow{
    background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
    --p-width: 10;
    --p-height: 10;
    --p-posX: 0;
    --p-posY: 3;
    --p-posZ: 0;
    --p-rotX: 90deg;
    --p-rotY: 0deg;
    --p-rotZ: 0deg;
    backface-visibility: hidden;
}
#body .shadow:after,
#body .shadow:before{
    display:none;
}
#leftarm{
    --width: 2;
    --height: 4;
    --depth: 2;
    --posX: 3.01;
    --posY: 1.5;
    --posZ:0;
    --rotX:0deg;
    --rotY:0deg;
    --rotZ:0deg;
}
#leftarm .front{
    --offsetX:12;
    --offsetY:9;
}
#leftarm .top{
    --offsetX:18;
    --offsetY:0;
}
#leftarm .left{
    --offsetX:14;
    --offsetY:9;
}
#leftarm .bottom{
    --offsetX:18;
    --offsetY:2;
}
#leftarm .hand{
    --p-width: 8;
    --p-height: 2;
    --p-posX: 0;
    --p-posY: 1.5;
    --p-posZ: 1;
    --p-rotX: 0deg;
    --p-rotY: 90deg;
    --p-rotZ: 0deg;
    --offsetX: 12;
    --offsetY: 17;
}

#rightarm{
    --width: 2;
    --height: 4;
    --depth: 2;
    --posX: -3.01;
    --posY: 1.5;
    --posZ:0;
    --rotX:0deg;
    --rotY:0deg;
    --rotZ:0deg;
}
#rightarm .front{
    --offsetX:14;
    --offsetY:13;
}
#rightarm .top{
    --offsetX:18;
    --offsetY:4;
}
#rightarm .right{
    --offsetX:12;
    --offsetY:13;
}
#rightarm .bottom{
    --offsetX:18;
    --offsetY:6;
}


/* accessories */
#keyboard{
    --width: 4;
    --height: 2;
    --depth: .5;
    --posX: 3;
    --posY: 3.5;
    --posZ: 0;
    --rotX: 0deg;
    --rotY: 90deg;
    --rotZ: 0deg;
}
#keyboard div{
    opacity:0;
    transition:opacity .5s ease;
}
#keyboard .front{
    --offsetX:16;
    --offsetY:16;
}
#keyboard .back,
#keyboard .right,
#keyboard .top,
#keyboard .bottom{
    --offsetX:16;
    --offsetY:18;
}

#bat1{
    --width: 3;
    --height: 1;
    --depth: 1;
    --posX: 3;
    --posY: 2.8;
    --posZ: 3.5;
    --rotX: 0deg;
    --rotY: 90deg;
    --rotZ: 0deg;
}
#bat1 div{
    opacity:0;
    transition:opacity .5s ease;
}
#bat1 .right{
    --offsetX:16;
    --offsetY:14;
}
#bat1 .back,
#bat1 .front,
#bat1 .top,
#bat1 .bottom{
    --offsetX:17;
    --offsetY:14;
}

#bat2{
    --width: 4;
    --height: .5;
    --depth: .5;
    --posX: 3;
    --posY: 2.8;
    --posZ: 0;
    --rotX: 0deg;
    --rotY: 90deg;
    --rotZ: 0deg;
}
#bat2 div{
    opacity:0;
    transition:opacity .5s ease;
}
#bat2 .back,
#bat2 .front,
#bat2 .top,
#bat2 .bottom{
    --offsetX:16;
    --offsetY:15;
}

#watch{
    --width: 1;
    --height: 1;
    --depth: .25;
    --posX: 4.1;
    --posY: 2;
    --posZ: 0;
    --rotX: 0deg;
    --rotY: 90deg;
    --rotZ: 0deg;
}
#watch .right,
#watch .front,
#watch .top,
#watch .bottom{
    --offsetX:19;
    --offsetY:10;
}

#lego{
    --width: 2;
    --height: 2;
    --depth: .75;
    --posX: -3;
    --posY: 4;
    --posZ: 1;
    --rotX: 75deg;
    --rotY: 90deg;
    --rotZ: 0deg;
}
#lego div{
    opacity:0;
    transition:opacity .5s ease;
}
#lego .back{
    --offsetX:14;
    --offsetY:17;
}
#lego .front,
#lego .right,
#lego .top,
#lego .bottom{
    --offsetX:12;
    --offsetY:17;
}

/* Animation fading */
.gfx #model .solid div:after{opacity:0;}
.gfx #model .solid div:before{opacity:0;}
.baseball #model .solid div:after{opacity:1;}
.baseball #model .solid div:before{opacity:0;}
.afol #model .solid div:after{opacity:0;}
.afol #model .solid div:before{opacity:1;}

.gfx #model #keyboard div,
.baseball #model #bat1 div,
.baseball #model #bat2 div,
.afol #model #lego div{opacity:1;}

.baseball #head .idea-right,
.baseball #head .idea-left,
.afol #head .idea-right,
.afol #head .idea-left{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);}