@mixin pivot(){
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50%;
  transform-style: preserve-3d;
}

@mixin face(
  $texture,
  $texture-position,
  $height,
  $width
){
  backface-visibility: hidden;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1678849/' + $texture);
  background-position: $texture-position;
  height: $height;
  position: absolute;
  transform-style: preserve-3d;
  width: $width;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
}

@mixin box(
  $depth: 128px,
  $height: 128px,
  $pivot-position-x: "center",
  $pivot-position-y: "center",
  $pivot-position-z: "center",
  $texture: 'box-placeholder.jpg',
  $texture-position-default: 0 0,
  $texture-position-top: $texture-position-default,
  $texture-position-bottom: $texture-position-default,
  $texture-position-left: $texture-position-default,
  $texture-position-right: $texture-position-default,
  $texture-position-front: $texture-position-default,
  $texture-position-back: $texture-position-default,
  $width: 128px,
  $top-x: 0,
  $bottom-x: 0,
  $sides-x: 0,
  $top-y: 0,
  $bottom-y: 0,
  $sides-y: 0,
  $top-z: 0,
  $bottom-z: 0,
  $sides-z: 0,
){
  @if($pivot-position-z == 'top'){
    $top-z: 0;
    $bottom-z: - $depth;
    $sides-z: - $depth /2;
  }@else if($pivot-position-z == 'center'){
    $top-z: $depth / 2;
    $bottom-z: - $depth / 2;
    $sides-z: 0;
  }@else{
    $top-z: $depth;
    $bottom-z: 0;
    $sides-z: $depth /2;
  }

  @if($pivot-position-y == 'top'){
    $top-y: 0;
    $bottom-y: 0;
    $sides-y: calc( -50% + #{$height / 2});
  }@else if($pivot-position-y == 'center'){
    $top-y: -50%;
    $bottom-y: -50%;
    $sides-y: -50%;
  }@else{
    $top-y: -$height;
    $bottom-y: -$height;
    $sides-y: calc( -50% - #{$height / 2});
  }

  @if($pivot-position-x == 'left'){
    $top-x: 0;
    $bottom-x: 0;
    $sides-x: calc( -50% + #{$width / 2});
  }@else if($pivot-position-x == 'center'){
    $top-x: -50%;
    $bottom-x: -50%;
    $sides-x: -50%;
  }@else{
    $top-x: -$width;
    $bottom-x: -$width;
    $sides-x: calc( -50% - #{$width / 2});
  }

  @include pivot;

  .face--top{
    @include face($texture, $texture-position-top, $height, $width);
    transform: translate3d($top-x, $top-y, $top-z);
  }

  .face--bottom{
    @include face($texture, $texture-position-bottom, $height, $width);
    transform: translate3d($bottom-x, $bottom-y, $bottom-z) rotateX(180deg);
  }

  .face--front{
    @include face($texture, $texture-position-front, $depth, $width);
    transform: translate3d($sides-x, $sides-y, $sides-z)
    translateY( $height / 2 )
    rotateX(270deg);
  }

  .face--back{
    @include face($texture, $texture-position-back, $depth, $width);
    transform: translate3d($sides-x, $sides-y, $sides-z)
    translateY( -$height / 2 )
    rotateX(270deg)
    rotateY(180deg);
  }

  .face--left {
    @include face($texture, $texture-position-left, $depth, $height);
    transform: translate3d($sides-x, $sides-y, $sides-z)
    translateX( $width / 2 )
    rotateX(270deg)
    rotateY(90deg);
  }

  .face--right{
    @include face($texture, $texture-position-right, $depth, $height);
    transform: translate3d($sides-x, $sides-y, $sides-z)
    translateX( -$width / 2 )
    rotateX(270deg)
    rotateY(270deg);
  }

}

$floor-size: 640px;
$floor-depth: 128px;
$post-depth: $floor-depth * 2;
$rope-gap: $floor-depth / 4.5;
$post-size: 16px;
$ground-size: $floor-size + 320px;
$ground-depth: 32px;

html{
  height: 100%;
}

body {
  font-family: 'Press Start 2P';
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.scene-wrapper{
  @include pivot;
  transform: translateY(-50%) translateX(-50%) scale(0.8);
  height: 100%;
  width: 100%;
  perspective: 3000;
}

//Scene

@keyframes sceneSpin{
  0%{
    transform: translateY(40px) rotateX(45deg) rotateZ(-135deg);
  }
  100%{
    transform: translateY(40px) rotateX(45deg) rotateZ(225deg);
  }
}

.scene{
  @include pivot;
  transform: rotateX(45deg) rotateZ(225deg);
  transition: transform 1000ms linear;
}

.scene--start{
  animation: sceneSpin 90s infinite linear;
}

.scene--focus-jerry{
  transform: translateY(190px) rotateX(45deg) rotateZ(225deg);
  transition: none;
}

.scene--focus-andy{
  transform: translateY(-80px) rotateX(45deg) rotateZ(225deg); 
  transition: none;
}

//Wrestling Ring

.ring{
  @include pivot;
}

.floor{
  @include box(
    $pivot-position-z: 'top',
    $depth: $floor-depth,
    $height: $floor-size,
    $width: $floor-size,
    $texture: 'ring-floor.gif',
    $texture-position-default: 0 -640px,
    $texture-position-top: 0 0,
  );
}

.post{
  @include box(
    $pivot-position-z: 'bottom',
    $depth: $post-depth,
    $height: $post-size,
    $width: $post-size,
  );
}

$ring-edge: $floor-size / 2 + $post-size / 2;

[class*="post--top"] {
  [class^="face"] {
    background: #451b1b linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
  }
  
  .face--top{
    background: #642626;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  }  
}

[class*="post--bottom"] {
  [class^="face"] {
    background: #132433 linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
  }
  
  .face--top{
    background: #1c3348;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  }
}

.post--top-left{
  transform: translate3d($ring-edge, -$ring-edge, -$floor-depth);
}

.post--top-right{
  transform: translate3d(-$ring-edge, -$ring-edge, -$floor-depth);
}

.post--bottom-left{
  transform: translate3d($ring-edge, $ring-edge, -$floor-depth);
}

.post--bottom-right{
  transform: translate3d(-$ring-edge, $ring-edge, -$floor-depth);
}

.rope{
  box-sizing: border-box;
  top: 0;
  left: 0;
}

.rope--bottom{
  @include face($texture: 'ropes-blue.gif', $texture-position: 0, $height: $floor-size + 16px, $width: $floor-size + 16px);
  transform: translate3d(-50%, -50%, $rope-gap); 
}

.rope--middle{
  @include face($texture: 'ropes-white.gif', $texture-position: 0, $height: $floor-size + 16px, $width: $floor-size + 16px);
  transform: translate3d(-50%, -50%, $rope-gap * 2.5); 
}

.rope--top{
  @include face($texture: 'ropes-red.gif', $texture-position: 0, $height: $floor-size + 16px, $width: $floor-size + 16px);
  transform: translate3d(-50%, -50%, $rope-gap * 4); 
}

.andy{
  @include pivot;
  transform: translateZ($floor-depth / 2);
}

.andy__upper-body{
  @include pivot;
}

.andy__speach{
  opacity: 0;
  transition: opacity 150ms linear;
}

.andy__speach:not(:empty){
  background-color: rgba(255,255,255,0.6);
  border-radius: 20px;
  padding: 20px;
  @include pivot;
  transform: scaleZ(1.5) translateX(-50%) translateY(-50%) translateZ(150px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg);
  line-height: 1.6;
  min-width: 200px;
  text-align: center;
  opacity: 1;
}

.andy__head{
  @include box(
    $pivot-position-z: 'bottom',
    $depth: 28px,
    $height: 28px,
    $width: 28px,
    $texture: 'andy-kaufman.gif',
    $texture-position-top: -28px 0,
    $texture-position-front: 0 0,
    $texture-position-back: -28px -28px,
    $texture-position-left:  0 -28px,
    $texture-position-right: -56px -28px
  );
  transform: translateZ(54px);
  transition: transform 200ms linear;
}

.andy__body{
  @include box(
    $pivot-position-z: 'top',
    $depth: 48px,
    $height: 24px,
    $width: 32px,
    $texture: 'andy-kaufman.gif',
    $texture-position-default: -32px -56px,
    $texture-position-back: 0 -56px,
  );
  transform: translateZ(52px);
  transition: transform 200ms linear;
}

.andy__leg{
  @include box(
    $pivot-position-z: 'top',
    $depth: 52px,
    $height: 16px,
    $width: 16px,
    $texture: "andy-kaufman.gif",
    $texture-position-default: -80px -56px,
    $texture-position-top: -0 -93px,
    $texture-position-bottom: -56px -12px,
    $texture-position-back: -64px -56px
  );
  
  transition: transform 200ms linear;
}

.andy__arm{
  @include box(
    $pivot-position-z: 'top',
    $depth: 52px,
    $height: 12px,
    $width: 12px,
    $texture: "andy-kaufman.gif",
    $texture-position-default: -84px -4px,
    $texture-position-top: -72px -16px,
    $texture-position-bottom: -72px -4px,
  );
  
  transition: transform 200ms linear;
}

.andy__arm--left{
  transform: translateX(-20px) translateZ(48px) rotateY(10deg);
}

.andy__arm--right{
  transform: translateX(20px) translateZ(48px) rotateY(-10deg);
}

.andy__leg--left{
  transform: translateX(-8px);
}

.andy__leg--right{
  transform: translateX(8px);
}

.andy--walking{
  .andy__arm--left{
    animation: andyArmLeftWalk 300ms infinite;
  }
  .andy__arm--right{
    animation: andyArmRightWalk 300ms infinite;
  }
  .andy__leg--left{
    animation: andyLegLeftWalk 300ms infinite;
  }
  .andy__leg--right{
    animation: andyLegRightWalk 300ms infinite;
  }
}

@keyframes andyArmLeftWalk {
  0%{ transform: translateX(-20px) translateZ(48px) rotateX(20deg) rotateY(10deg); }
  50%{ transform: translateX(-20px) translateZ(48px) rotateX(-20deg) rotateY(10deg); }
  100%{ transform: translateX(-20px) translateZ(48px) rotateX(20deg) rotateY(10deg); }
}

@keyframes andyArmRightWalk {
  0%{ transform: translateX(20px) translateZ(48px) rotateX(-20deg) rotateY(-10deg); }
  50%{ transform: translateX(20px) translateZ(48px) rotateX(20deg) rotateY(-10deg); }
  100%{ transform: translateX(20px) translateZ(48px) rotateX(-20deg) rotateY(-10deg); }
}

@keyframes andyLegLeftWalk {
  0%{ transform: translateX(-8px) rotateX(-30deg); }
  50%{ transform: translateX(-8px) rotateX(30deg); }
  100%{ transform: translateX(-8px) rotateX(-30deg); }
}

@keyframes andyLegRightWalk {
  0%{ transform: translateX(8px) rotateX(30deg); }
  50%{ transform: translateX(8px) rotateX(-30deg); }
  100%{ transform: translateX(8px) rotateX(30deg); }
}

// Jerry

.jerry{
  @include pivot;
  transform: translateZ($floor-depth / 2);
  // transition: transform 400ms linear;
}

.jerry__upper-body{
  @include pivot;
}

.jerry__head{
  @include box(
    $pivot-position-z: 'bottom',
    $depth: 28px,
    $height: 28px,
    $width: 28px,
    $texture: 'jerry-lawler.gif',
    $texture-position-top: -52px -76px,
    $texture-position-front: -52px -76px,
    $texture-position-back: -80px -104px,
    $texture-position-left:  -52px -104px,
    $texture-position-right: -108px -104px
  );
  transform: translateZ(54px);
  transition: transform 200ms linear;
}

.jerry__body{
  @include box(
    $pivot-position-z: 'top',
    $depth: 47px,
    $height: 31px,
    $width: 52px,
    $texture: 'jerry-lawler.gif',
    $texture-position-top: 0 0,
    $texture-position-front: 0 -80px,
    $texture-position-back: 0 -33px,
    $texture-position-left:  -52px 0,
    $texture-position-right: -84px 0
  );
  transform: translateZ(52px);
  transition: transform 200ms linear;
  
  .face--bottom{
    background: #c43939;
  }
}

.jerry__leg{
  @include box(
    $pivot-position-z: 'top',
    $depth: 52px,
    $height: 20px,
    $width: 20px,
    $texture: 'jerry-lawler.gif',
    $texture-position-default: -116px -52px,
    $texture-position-top: -116px -48px,
    $texture-position-bottom: -76px -48px
  );
  
  transition: transform 200ms linear;
}

.jerry__arm{
  @include box(
    $pivot-position-z: 'top',
    $depth: 52px,
    $height: 20px,
    $width: 20px,
    $texture: 'jerry-lawler.gif',
    $texture-position-default: -116px 0,
    $texture-position-top: -52px -48px,
    $texture-position-bottom: -52px -48px
  );
  
  transition: transform 200ms linear;
}

.jerry__arm--left{
  transform: translateX(-32px) translateZ(48px);
}

.jerry__arm--right{
  transform: translateX(32px) translateZ(48px);
}

.jerry__leg--left{
  transform: translateX(-10px);
}

.jerry__leg--right{
  transform: translateX(10px);
}

.jerry--walking{
  .jerry__arm--left{
    animation: jerryArmLeftWalk 300ms infinite;
  }
  .jerry__arm--right{
    animation: jerryArmRightWalk 300ms infinite;
  }
  .jerry__leg--left{
    animation: jerryLegLeftWalk 300ms infinite;
  }
  .jerry__leg--right{
    animation: jerryLegRightWalk 300ms infinite;
  }
}

@keyframes jerryArmLeftWalk {
  0%{ transform: translateX(-32px) translateZ(48px) rotateX(20deg); }
  50%{ transform: translateX(-32px) translateZ(48px) rotateX(-20deg); }
  100%{ transform: translateX(-32px) translateZ(48px) rotateX(20deg); }
}

@keyframes jerryArmRightWalk {
  0%{ transform: translateX(32px) translateZ(48px) rotateX(-20deg); }
  50%{ transform: translateX(32px) translateZ(48px) rotateX(20deg); }
  100%{ transform: translateX(32px) translateZ(48px) rotateX(-20deg); }
}

@keyframes jerryLegLeftWalk {
  0%{ transform: translateX(-10px) rotateX(-30deg); }
  50%{ transform: translateX(-10px) rotateX(30deg); }
  100%{ transform: translateX(-10px) rotateX(-30deg); }
}

@keyframes jerryLegRightWalk {
  0%{ transform: translateX(10px) rotateX(30deg); }
  50%{ transform: translateX(10px) rotateX(-30deg); }
  100%{ transform: translateX(10px) rotateX(30deg); }
}

.use-transition *{
  transition: transform 400ms linear;
}

.jerry--headlock{
  .jerry__upper-body{
    transform: rotateX(50deg);
  }
  .jerry__arm--left{
    transform: translateX(-32px) translateZ(48px) rotateX(20deg) rotateY(-20deg);
  }
  .jerry__arm--right{
    transform: translateX(32px) translateZ(48px) rotateX(20deg) rotateY(20deg);
  }
}

.andy--headlock{
  transform: translateZ($floor-depth / 2) translateX(-30px) translateY(-40px) rotateX(0deg)!important;
  
  .andy__arm--right{
    transform: translateX(20px) translateZ(48px) rotateZ(-10deg) rotateY(-90deg);
  }
}

@keyframes AndySuplexArmRight{
  0%{ transform: translateX(20px) translateZ(48px) rotateZ(-10deg) rotateY(-90deg); }
  40%{ transform: translateX(20px) translateZ(48px) rotateZ(-10deg) rotateY(-90deg); }
  60%{ transform: translateX(20px) translateZ(48px) rotateZ(-10deg) rotateY(-10deg); }
  100%{ transform: translateX(20px) translateZ(48px) rotateZ(-10deg) rotateY(-10deg); }
}

@keyframes AndySuplexUpperBody{
  0%{transform: rotateX(0deg);}
  50%{transform: rotateX(0deg);}
  100%{transform: rotateX(90deg);}
}

@keyframes AndySuplex {
  0%{  transform: translateZ($floor-depth / 2) translateX(-30px) translateY(-40px) rotateX(0deg) }
  40%{  transform: translateZ($floor-depth / 2) translateX(-30px) translateY(-40px) rotateX(0deg) }
  50%{  transform: translateZ($floor-depth / 2 + 100px) translateX(-30px) translateY(50px) rotateX(-120deg) }
  70%{  transform: translateZ($floor-depth / 2 + 20px) translateX(-30px) translateY(100px) rotateX(-180deg) }
  100%{  transform: translateZ($floor-depth / 2 - 48px) translateX(-30px) translateY(100px) rotateX(-180deg) }
}

@keyframes JerrySuplexArmLeft{
  0%{ transform: translateX(-32px) translateZ(48px) rotateX(20deg) rotateY(-20deg) }
  40%{ transform: translateX(-32px) translateZ(48px) rotateX(20deg) rotateY(50deg) }
  60%{ transform: translateX(-32px) translateZ(48px) rotateX(-140deg) rotateY(0deg) }
  100%{ transform: translateX(-32px) translateZ(48px) rotateX(-140deg) rotateY(0deg) }
}

@keyframes JerrySuplexArmRight{
  0%{ transform: translateX(32px) translateZ(48px) rotateX(20deg) rotateY(20deg) }
  40%{ transform: translateX(32px) translateZ(48px) rotateX(-140deg) rotateY(45deg) }
  60%{ transform: translateX(32px) translateZ(48px) rotateX(-140deg) rotateY(-10deg) }
  100%{ transform: translateX(32px) translateZ(48px) rotateX(-140deg) rotateY(-10deg) }
}

@keyframes JerrySuplexUpperBody{
  0%{transform: rotateX(50deg);}
  40%{transform: rotateX(50deg);}
  75%{transform: rotateX(-30deg);}
  100%{transform: rotateX(-30deg);}
}

@keyframes JerrySuplex {
  0%{  transform: translateZ($floor-depth / 2) rotateX(0deg) }
  40%{  transform: translateZ($floor-depth / 2) rotateX(0deg) }
  60%{  transform: translateZ($floor-depth / 2 - 20px) rotateX(-90deg) }
  100%{  transform: translateZ($floor-depth / 2 - 30px) rotateX(-90deg) }
}

@keyframes SceneSuplex {
  0%{
    transform: translateX(0) rotateX(45deg) rotateZ(225deg);
  }
  60%{
    transform: translateX(0) rotateX(45deg) rotateZ(225deg);
  }
  64%{
    transform: translateX(-5px) rotateX(45deg) rotateZ(225deg);
  }
  68%{
    transform: translateX(5px) rotateX(45deg) rotateZ(225deg);
  }
  72%{
    transform: translateX(-5px) rotateX(45deg) rotateZ(225deg);
  }
  100%{
    transform: translateX(0) rotateX(45deg) rotateZ(225deg);
  }
}

.andy--suplex{
   animation: AndySuplex 3s forwards;
   // transform: translateZ($floor-depth / 2);
  
  .andy__upper-body{
    animation: AndySuplexUpperBody 3s forwards;
  }
  
  .andy__arm--right{
    animation: AndySuplexArmRight 3s forwards;
  }
}

.jerry--suplex{
   animation: JerrySuplex 3s forwards;
  
  .jerry__upper-body{
    animation: JerrySuplexUpperBody 3s forwards;
  }
  
  .jerry__arm--left{
    animation: JerrySuplexArmLeft 3s forwards;
  }
  
  .jerry__arm--right{
    animation: JerrySuplexArmRight 3s forwards;
  }
}

.scene--suplex{
  animation: SceneSuplex 3s forwards;
}

.scene--pile{
  animation: SceneSuplex 1s 2000ms forwards;
}

@keyframes AndyPile {
  0%{
    transform: translateZ(140px) translateY(-30px) rotateX(180deg) rotateZ(-180deg); 
  }
  50%{
    transform: translateZ(190px) translateY(-30px) rotateX(180deg) rotateZ(-180deg); 
  }
  80%{
    transform: translateZ(100px) translateY(-30px) rotateX(180deg) rotateZ(-180deg); 
  }
  100%{
    transform: translateZ(105px) translateY(-30px) rotateX(180deg) rotateZ(-180deg); 
  }
}

@keyframes JerryPile {
  0%{
    transform: translateZ($floor-depth / 2); 
  }
  50%{
    transform: translateZ($floor-depth / 2 + 50px);   
  }
  80%{
    transform: translateZ($floor-depth / 2 - 40px);   
  }
  100%{
    transform: translateZ($floor-depth / 2 - 35px);
  }
}

@keyframes JerryPileLegLeft {
  0%{
    transform: translateX(-10px) rotateX(0deg);
  }
  40%{
    transform: translateX(-10px) rotateX(-90deg) rotateY(20deg);
  }
  100%{
    transform: translateX(-10px) rotateX(-90deg) rotateY(20deg);
  }
}

@keyframes JerryPileLegRight {
  0%{
    transform: translateX(10px) rotateX(0deg);
  }
  40%{
    transform: translateX(10px) rotateX(-90deg) rotateY(-20deg);
  }
  100%{
    transform: translateX(10px) rotateX(-90deg) rotateY(-20deg);
  }
}

.andy--pile{
  transform: translateZ(140px) translateY(-30px) rotateX(180deg) rotateZ(-180deg) !important; 
  animation: AndyPile 1s 2000ms forwards;
  
  .andy__leg--left{
    transform: translateX(-8px) rotateY(20deg);
  }
  
  .andy__leg--right{
    transform: translateX(8px) rotateY(-20deg);
  }
}

.jerry--pile{
  transform: translateZ($floor-depth / 2) !important; 
  animation: JerryPile 1s 2000ms forwards;
  
  .jerry__arm--left{
    transform: translateX(-32px) translateZ(48px) rotateY(-30deg) rotateX(-90deg);
  }
  
  .jerry__arm--right{
    transform: translateX(32px) translateZ(48px) rotateY(30deg) rotateX(-90deg);
  }
  
  .jerry__leg--left{
    animation: JerryPileLegLeft 1s 2000ms forwards;
  }
  
  .jerry__leg--right{
    animation: JerryPileLegRight 1s 2000ms forwards;
  }
}

@keyframes blink{
  0%{color: rgba(255,255,255,1);}
  100%{color: rgba(255,255,255,0.5);}
}

.blink{
  animation: blink 1s alternate infinite;
  display: inline;
}

.background {
  background-color: #000;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  transform: translateZ(-1000px);
}

.background-overlay {
  background-color: #000;
  position: fixed;
  left: 0;
  opacity: 1;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  transition: opacity 300ms linear;
  transform: translateZ(1000px);
}

.background-overlay--hide {
  opacity: 0;  
}

.background-overlay--clear {
  opacity: 0.8;
}

.background-circle-overlay {
  background-image: url("data:image/svg+xml,%3Csvg width='6000px' height='6000px' viewBox='0 0 6000 6000' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3ECombined Shape%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M0,0 L6000,0 L6000,6000 L0,6000 L0,0 Z M3000,3120 C3066.27417,3120 3120,3066.27417 3120,3000 C3120,2933.72583 3066.27417,2880 3000,2880 C2933.72583,2880 2880,2933.72583 2880,3000 C2880,3066.27417 2933.72583,3120 3000,3120 Z' id='Combined-Shape' fill='%23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-size: 6000px;
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  left: 0;
  opacity: 1;
  top: 0;
  bottom: 0;
  right: 0;
  transition: opacity 500ms linear;
  transform: translateZ(1000px);
  z-index: 1;
}

.background-circle-overlay--hide{
  opacity: 0;
}

.text-overlay {
  background-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  box-sizing: border-box;
  font-size: 1.1rem;
  color: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  text-align: center;
  padding: 32px;
  transition: opacity 300ms linear;
  transform: translate3d(-50%, -50%, 1100px);
  line-height: 1.6;
  width: 100%;
  max-width: 720px;
  z-index: 1;
}

.text-overlay--bottom {
  font-size: 0.9rem;
  top: inherit;
  transform: translate3d(-50%, 0, 1100px);
  padding-bottom: 64px;
  bottom: 0;
}

.text-overlay--hide {
  opacity: 0;
}

.button{
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='157px' height='56px' viewBox='0 0 157 56' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M150.761589,47.877551 L150.761589,44.7755102 L153.880795,44.7755102 L153.880795,6 L157,6 L157,49.877551 L153.880795,49.877551 L153.880795,52.9387755 L150.761589,52.9387755 L150.761589,56 L6.2384106,56 L6.2384106,52.9387755 L3.1192053,52.9387755 L3.1192053,49.877551 L0,49.877551 L0,6 L3.1192053,6 L3.1192053,44.7755102 L6.2384106,44.7755102 L6.2384106,47.877551 L150.761589,47.877551 Z M3,2 L6,2 L6,6 L3,6 L3,2 Z M151,2 L155,2 L155,6 L151,6 L151,2 Z M6,0 L151,0 L151,3 L6,3 L6,0 Z' id='Shape' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  left: 50%;
  outline: none;
  position: fixed;
  top: 50%;
  transform: translate3d(-50%, -50%, 1200px);
  z-index: 3;
  height: 56px;
  width: 157px;
  font-size: 0.9rem;
  transform-origin: top left;
  transition: background-size 120ms linear, opacity 100ms linear;
  
  &:hover{
    background-size: 100%;
  }
  
  &:active{
    background-size: 95%;
  }
}

.button--hide{
  opacity: 0;
  pointer-events: none;
}

.secret{
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1678849/tony.gif');
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  bottom: -40px;
  right: -40px;
  height: 240px;
  width: 240px;
  transform: rotateZ(0deg) translate3d(100%, 100%, 1200px);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  z-index: 3;
  transition: transform 3s ease-in-out;
}

.secret--shown{
  transform: rotateZ(-30deg) translate3d(0, 0, 1200px); 
}