anim.less

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400);

@grey: #f0f0f0;
@shadow: rgba(0,0,0,0.165);
@highlight: #55beeb;
@bg-col: #333;

@elem-width: 310px;
@elem-height: 38px;
@blue: #0099cc;
@grey: #f1f1f1;
@text: #525150;
@input-border: 2px solid @blue;
@roboto: "Roboto", sans-serif;
@hover-width: 230px;

.transition (@value1,@value2:X,...) {
    @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
    -webkit-transition: @value;
    -moz-transition: @value;
    -ms-transition: @value;
    -o-transition: @value;
    transition: @value;
}

.animation (...) {
  -webkit-animation: @arguments;  
     -moz-animation: @arguments;
      -ms-animation: @arguments;
       -o-animation: @arguments;
          animation: @arguments;
}

.backface (...){
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
}

// -- Codepen related --
body {padding:0 0 3em;margin:0;font-family:'Open Sans', Arial, sans-serif;font-size:1em;line-height:1;background:@bg-col;}
.pen {
	max-width: 1392px;
	height: 754px;
	margin: 0 auto;
	background: url(img/background.jpg) center 0 no-repeat;
	background-size: auto;
	position: relative;

	img {margin-left: 15px;}
}

.credit {
	display: block;
	max-width: 400px;
	text-align: center;
	margin: 0 auto;
	padding: 0;
	font-size: 0.8em;
	color: @grey;
	text-shadow: 0 1px 0 rgba(0,0,0,0.9);

	p a, a {
		color: white;
		text-decoration: none;
		font-weight: 700;

		&:hover, &:active {text-shadow:0 0 5px rgba(255,255,255,0.4);color:white;}

		&.button {
			padding: 6px 12px;
			margin-top: 10px;
			background: darken(@bg-col, 10%);
			border-radius: 3px;

			&:hover {background: lighten(@bg-col, 10%);}
		}
	}

	p:last-of-type {margin-bottom: 30px;}
}

// Pen-related
* {
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

.tutorial-dimmer {
	position: fixed;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	width:100%;
	background: rgba(0, 0, 0, 0.4);
	top:0;
	z-index: 999;
}

.start-here {
	max-width: 300px;
	margin: 0 auto;
	left: 20px;
	z-index:1000;
	height: 130px;
	top: 125px;
	position: relative;
	text-align: right;

	p {
		color: white;
		text-shadow: 0 2px 3px rgba(0,0,0,0.3);
		font-weight: 400;
		font-size: 20px;
		font-family: @roboto;
		position: relative;
		right: -20px;
		top: 20px;
	}

	.circle {
		width: 70px;
		height: 70px;
		background: @blue;
		opacity: 0.4;
		border-radius: 60px;
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;
		.backface();
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		.animation(pulse 2s infinite);
	}
}

.wa-input-container {
	// background: @grey;
	width: @elem-width;
	font-family: @roboto;
	position: relative;
	margin: 0 auto;
	top: 259px;
	height: 170px;
	overflow: hidden;

	.input-bg {
		height: @elem-height;
		position: absolute;
		bottom: 0;
		width: inherit;
		background: @grey;
	}

	.wa-input {
		border-bottom: @input-border;
		width: 228px;
		margin: 0 auto;
		height: 33px;
		position: absolute;
		bottom: 6px;
		left: 40px;
		line-height: 2;
		z-index: 1;
		padding: 0 10px;
		border-right: 0;
		display: block;
		border-top: 0;
		border-left: 0;

		input[type=text] {
			border:0;
			width:100%;
			display: block;
			height: 100%;
			font-size: 15px;
			font-family: @roboto;
			font-weight: 300;
			background-color: transparent;

			&:focus {outline: 0;}
		}

		&:before,
		&:after {
			height: 4px;
			border-left: @input-border;
			position: absolute;
			content:'';
			display: block;
			bottom: 0;
		}
		
		&:before { left: 0; }
		&:after { right: 0; }

	}

	.speech-container {
		display: block;
		position: absolute;
		height: 38px;
		bottom: 0;
		background: @grey;
		z-index: 2;
		width: @hover-width;
		right: -@hover-width;
		.transition(right 500ms);
		.backface();

		.time {
			font-family: @roboto;
			font-size: 24px;
			position: absolute;
			height: inherit;
			padding: 0 3px;
			color: @text;
			line-height: @elem-height;
			background: @grey;
		}

		.swipe-to-cancel {
			display: block;
			position: absolute;
			background: @grey;
			width: 176px;
			left: 55px;
			background-repeat: no-repeat;
			background-position: 150px;
			background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
			background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
			background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 75%,rgba(255,255,255,0) 100%);
			background-image: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 75%,rgba(255,255,255,0) 100%);
			background-image: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 75%,rgba(255,255,255,0) 100%);
			background-image: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 75%,rgba(255,255,255,0) 100%);
			height:inherit;
			.animation(swipe 2s infinite);

			&:before {
				display: block;
				text-transform: uppercase;
				content: 'Swipe to cancel';
				top: 13px;
				color: @text;
				font-size: 12px;
				font-weight: 300;
				position: relative;
				text-align: center;
			}
		}
	}

	.bin {
		// opacity: 0;
		bottom: -40px;
		position: absolute;
		.transition(bottom 500ms);
		.backface();

		&.show {opacity: 1;}
	}

	.ptt-icon {
		height: 19px;
		width: 20px;
		position: absolute;
		cursor: pointer;
		
		&.record-right {
			bottom: 10px;
			right: 10px;
		}

		&.bin-base, &.bin-head {
			bottom: 3px;
			width: 25px;
			height: 25px;
			left: 7px;
			.transition(all 250ms);
			.backface();
		}

		&.bin-head.anim {
			transform: rotate(-80deg);
			transform-origin:20% 40%;
			-moz-transform: rotate(-80deg);
			-moz-transform-origin:20% 40%;
			-webkit-transform: rotate(-80deg);
			-webkit-transform-origin:20% 40%;
			.backface();
		}

		&.record-left {
			height: 25px;
			bottom: 6px;
			opacity: 0;
			left: 10px;
			width: 20px;

			&.show {opacity: 1;}

			&.small {
				height: 20px;
				width: 15px;
				bottom: 9px;
				left: 12px;
			}

			&.record-start {
				.transition(opacity, 500ms);
				.animation(shine 1s infinite 750ms);
				.backface();
			}

			&.record-delete {
				.animation(jump 2s 1 250ms forwards);
				.backface();
			}
		}

		&.emoticon {
			bottom: 10px;
			left: 10px;
			.transition(opacity 250ms);
			.backface();
		}

		svg {
			height: inherit;
			width: inherit;

			.record-icon {fill: #858583;}
			.record-icon-red {fill: #ff3314;}
		}
	}
}

.hide {opacity: 0;}

@keyframes swipe {from {background-position: 150px;} to {background-position: -150px;}}
@-moz-keyframes swipe {from {background-position: 150px;} to {background-position: -150px;}}
@-webkit-keyframes swipe {from {background-position: 150px;} to {background-position: -150px;}}

@keyframes shine {0% {opacity: 1} 60% {opacity: 0.6} 61% {opacity: 0} 100% {opacity: 0}}
@-moz-keyframes shine {0% {opacity: 1} 60% {opacity: 0.6} 61% {opacity: 0} 100% {opacity: 0}}
@-webkit-keyframes shine {0% {opacity: 1} 60% {opacity: 0.6} 61% {opacity: 0} 100% {opacity: 0}}

@keyframes jump {0% {transform: rotate(0deg);opacity: 1;} 50% {bottom: 150px;transform: rotate(360deg);opacity: 1;} 85% {transform: rotate(360deg);opacity: 0;} 100% {bottom: -30px;transform: rotate(360deg);opacity: 0;}}
@-moz-keyframes jump {0% {-moz-transform: rotate(0deg);opacity: 1;} 50% {bottom: 150px;-moz-transform: rotate(360deg);opacity: 1;} 85% {-moz-transform: rotate(360deg);opacity: 0;} 100% {bottom: -30px;-moz-transform: rotate(360deg);opacity: 0;}}
@-webkit-keyframes jump {0% {-webkit-transform: rotate(0deg);opacity: 1;} 50% {bottom: 150px;-webkit-transform: rotate(360deg);opacity: 1;} 85% {-webkit-transform: rotate(360deg);opacity: 0;} 100% {bottom: -30px;-webkit-transform: rotate(360deg);opacity: 0;}}

@-webkit-keyframes pulse {
	0% { -webkit-transform: scale(1); opacity: 0.4}
	2% { -webkit-transform: scale(1.1);}
	4% { -webkit-transform: scale(1);}
	100% {-webkit-transform: scale(1.7); opacity: 0.0}
}
@keyframes pulse {
	0% { transform: scale(1); opacity: 0.4}
	2% { transform: scale(1.1);}
	4% { transform: scale(1);}
	100% {transform: scale(1.7); opacity: 0.0}
}
@-moz-keyframes pulse {
	0% { -moz-transform: scale(1); opacity: 0.4}
	2% { -moz-transform: scale(1.1);}
	4% { -moz-transform: scale(1);}
	100% {-moz-transform: scale(1.7); opacity: 0.0}
}