/* hide on default, then once everything has loaded,
fadeIn() our content using jquery */
#container { display: none; border: none; }

/* ----------------------------------------
	Helpers
---------------------------------------- */
div { border: solid lightpink 0px; }


/* ----------------------------------------
	Character Defaults
---------------------------------------- */

#thing-1 { 
	width: 300px;
	height: 300px;
	/* position your character however you'd like within the container */
	bottom: 15%; 
	right: 5%;
	animation-name: spin1;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;}

    @-webkit-keyframes spin1 { 
        from { 
            -webkit-transform: rotate(360deg); 
        } to { 
            -webkit-transform: rotate(0deg); 
        }
    }
    @keyframes spin1 { 
        from { 
            transform: rotate(360deg); 
        } to { 
            transform: rotate(0deg); 
        }
    }

#thing-2 { 
	width: 300px;
	height: 300px;
	/* position your character however you'd like within the container */
	bottom: 15%;
	left: 5%;
	animation-name: spin2;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;}

    @-webkit-keyframes spin2 { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin2 { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }


/* ----------------------------------------
	Character States
	for each character, there are 5 states ... 

	1. default : what we see when we land on the page
	2. hover : when our cursor is over the character
	3. click : when we click on the character
	4. hover-response : how character responds to its partner being hovered on
	5. click-response : how character responds to its partner being clicked on;
---------------------------------------- */

/* THING 1 */
#thing-1.hover {
	opacity: 0.5;
}

#thing-1.click {
	animation-name: pulse1;
	animation-duration: 0.2s;
	animation-iteration-count:;
}
@keyframes pulse1 {
  from {
    transform: scale3d(0.7, 0.7, 0.7);
  }
  25% {
    transform: scale3d(0.5, 0.5, 0.5);
  }
  50% {
    transform: scale3d(0, 0, 0);
  }

  70% {
    transform: scale3d(0.5, 0.5, 0.5);
  }
  90% {
    transform: scale3d(0.7, 0.7, 0.7);
  }
}

/* THING 1 responding to thing 2 */
#thing-1.hover-response {
	animation: thing-1-hover-response 1800ms linear infinite alternate;
	animation-fill-mode: forwards;
}
#thing-1.click-response {
	animation-name: sametime;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
}
@keyframes sametime {
  from {
    transform: scale3d(0.2, 0.2, 0.2);
  }

  50% {
    transform: scale3d(0.5, 0.5, 0.5);
  }

  to {
    transform: scale3d(0.1, 0.1, 0.1);
  }
}

/* THING 2 */
#thing-2.hover {
}



#thing-2.click {
	animation-name: pulse2;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
}
@keyframes pulse2 {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(0.5, 0.5, 0.5);
  }

  to {
    transform: scale3d(3, 3, 3);
  }
}

/* THING 2 responding to thing 1 */
#thing-2.hover-response {
	animation: thing-2-hover-response 300ms linear infinite alternate;
	animation-fill-mode: forwards;
}

#thing-2.click-response {
	animation-name: sametime2;
	animation-duration: 0.1s;
	animation-iteration-count: infinite;
}
@keyframes sametime2 {
  from {
    transform: scale3d(0.7, 0.7, 0.7);
  }

  50% {
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    transform: scale3d(0.1, 0.1, 0.1);
  }
}



@keyframes thing-1-hover-response {
	0% { transform: translate(0px,0px); }
	25% { transform: translate(190px,0px); }
	50% { transform: translate(-200px,0px);}
	75% { transform: translate(190px,0px); }
}

@keyframes thing-2-hover-response {
	0% { transform: translate(0px,-50px); }
	25% { transform: translate(-200px,0px); }
	50% { transform: translate(0px,200px); }
	75% { transform: translate(-200px,0px); }
}