@import compass

// fed
$da-blue: #00f7ff
$lighter-blue: #99fcff
$text-shadow-blue: #11f1ff
$text-hover-blue: #e5Feff

// reb
$da-red: #ff443d
$lighter-red: #ff7570
$text-shadow-red: #ff0900
$text-hover-red: #ffd8d6

// pen
$da-gray: #999
$lighter-gray: #bbb
$text-shadow-gray: #666
$text-hover-gray: #fff

// Common transition time
$trans-time: 330ms

@keyframes holox-fed
	0%
		box-shadow: 0 0 13px rgba(17,241,255, .6) inset
	50%
		box-shadow: 0 0 14px rgba(17,241,255, 1) inset
	100%
		box-shadow: 0 0 13px rgba(17,241,255, .6) inset

@keyframes holox-reb
	0%
		box-shadow: 0 0 13px rgba(255,9,0, .6) inset
	50%
		box-shadow: 0 0 14px rgba(255,9,0, 1) inset
	100%
		box-shadow: 0 0 13px rgba(255,9,0, .6) inset

@keyframes holox-pen
	0%
		box-shadow: 0 0 13px rgba(102,102,102, .6) inset
	50%
		box-shadow: 0 0 14px rgba(102,102,102, 1) inset
	100%
		box-shadow: 0 0 13px rgba(102,102,102, .6) inset

a[class^='holo-btn']
	color: $da-gray
	font: normal 1.1em/3.11em Electrolize, 'Cultive Mono', Tahoma, sans-serif
	text-decoration: none
	text-transform: uppercase	
	display: block
	height: 60px
	transition: all $trans-time linear
	//perspective: 260px
	&:hover
		color: $text-hover-gray
		text-rendering: optimizeLegibility
	&:hover .top
		margin-top: -55px
		animation: none
		box-shadow: none
	&:hover .bottom
		margin-top: -47px
	&:active .skew
		animation: none
		box-shadow: 0 0 22px rgba(102,102,102, .6) inset
	
a.holo-btn span
	box-sizing: border-box

a.holo-btn-fed
	color: $da-blue
	&:hover
		color: $text-hover-blue
	&:active .skew
		box-shadow: 0 0 22px rgba(17,241,255, .6) inset
	
a.holo-btn-reb
	color: $da-red
	&:hover
		color: $text-hover-red
	&:active .skew
		box-shadow: 0 0 22px rgba(255,9,0, .6) inset

span[class^='cta']
	width: 100%
	display: block
	padding: 0 29px
	text-shadow: 0 0 30px $text-shadow-gray
	//transform: rotateX(-15deg)
	&:before
		text-transform: none
		font-family: fontastic1
		font-size: 1.4em
		display: inline-block
		vertical-align: middle
		margin-right: 22px
		padding-bottom: 4px
		transition: margin 500ms cubic-bezier(.79,.01,1,.21)

.holo-btn-fed span[class^='cta']
	text-shadow: 0 0 30px $text-shadow-blue

.holo-btn-reb span[class^='cta']
	text-shadow: 0 0 30px $text-shadow-red

.cta-d:before
	content: 'd'
.cta-e:before
	content: 'e'
.cta-f:before
	content: 'f'
.cta-h:before
	content: 'h'
.cta-x:before
	content: 'x'

.top
	margin-top: -60px

.bottom
	margin-top: -42px

.skew
	transform: skew(-45deg)
	border: 1px solid transparent
	border-right-width: 2px
	border-image: linear-gradient(top left, $lighter-gray 0%, $da-gray 100%) 1
	animation: holox-pen 5.4s ease 1s infinite
	padding: 24px
	display: block
	transition: all $trans-time linear
	box-shadow: 0 0 13px rgba(102,102,102, .6) inset

.holo-btn-fed .skew
	border-image: linear-gradient(top left, $lighter-blue 0%, $da-blue 100%) 1
	animation-name: holox-fed
	box-shadow: 0 0 13px rgba(17,241,255, .6) inset

.holo-btn-reb .skew
	border-image: linear-gradient(top left, $lighter-red 0%, $da-red 100%) 1
	animation-name: holox-reb
	box-shadow: 0 0 13px rgba(255,9,0, .6) inset

html,body
	height: 100%
	width: 100%

body
	padding: 0 40px
	align-items: center
	display: flex
	flex-flow: row wrap
	justify-content: space-around
	//background: #000c1a
	background: #111