/* GLOBAL */
body {
	margin: 0;
	overflow: hidden;
	background-color: #000000;
	background-image: url('../images/background-01.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	-webkit-tap-highlight-color: transparent;
}

/* UI */
.info {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
}

.info.hide {
	opacity: 0;
	transition: all 0.3s ease-out;
}
.info.none {
	display: none;
}

.info .content {
	flex: none;
	max-width: 80%;
	text-align: center;
}

.info .content h2 {
	font-weight: bold;
	font-size: 1.4em;
	letter-spacing: 3;
}

@media (min-width: 768px) {
	.info h2 {
		font-size: 2.0em;
	}
}

/* UI */
.ui {
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ui.none {
	display: none;
}

.ui nav {
	pointer-events: auto;
	position: absolute;
	bottom: 5%;
	left: 0;
	width: 100%;
	text-align: center;
}

/* BTN */
.ui .btn {
	cursor: pointer;
	display: inline-block;
	position: relative;
	width: 100px;
	height: 80px;
	margin: 0 6px;
	border-radius: 2px;
	background-color: rgba(20, 20, 20, 0.4);
	transition: all 0.3s;
}
.ui .btn svg {
	pointer-events: none;
	position: absolute;
	top: 20px;
	left: 30px;
	width: 40px;
	height: 40px;
	transform: scale(0.5);
}

/* BTN modifier */
.ui .btn:hover {
	background-color: rgba(30, 30, 30, 0.8);
}
.ui .btn:active {
	background-color: rgba(30, 30, 30, 0.4);
}
.ui .btn.xmas {
	background-color: rgba(205, 25, 65, 0.8);
}
.ui .btn.gimmick svg {
	top: 24px;
	transition: opacity 0.3s 0.1s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui .btn.gimmick {
	position: relative;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Arial', Helvetica, sans-serif;
	font-size: 24px;
	letter-spacing: 1px;
}
.ui .btn.gimmick span {
	display: inline-block;
	position: absolute;
	top: 26px;
	left: 0;
	width: 100%;
	text-align: center;
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui .btn.gimmick .gimmick-touch {
	display: none;
}
.ui .btn.mute {
	pointer-events: auto;
	position: absolute;
	bottom: 60px;
	right: 30px;
	width: 40px;
	height: 40px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-image: url('../images/icon-audio-playing.webp');
}
.ui .btn.mute.muted {
	background-image: url('../images/icon-audio-muted.webp');
}

.ui .btn.gimmick.active {
	background-color: rgba(205, 25, 65, 0.7);
}
.ui .btn.gimmick.active span {
	opacity: 1;
	transition: opacity 0.1s 0.1s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.gimmick.active svg rect {
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.is-touch-device .ui .btn.gimmick svg *:not(.gimmick-touch) {
	display: none;
}
.is-touch-device .ui .btn.gimmick .gimmick-touch {
	display: block;
}

/* BTN ANIMATIONS */
/* icon-drums */
.ui .btn.drums circle {
	transform-origin: 50% 50%;
	transform: scale(0.2);
	transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.drums circle {
	transform: scale(1);
	transition: all 0.3s 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
/* icon-bass */
.ui .btn.bass line:nth-of-type(1) {
	transform-origin: 50% 50%;
	transform: scaleY(0.1);
	transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.bass line:nth-of-type(1) {
	transform: scaleY(1);
	transition: all 0.3s 1.0s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui .btn.bass line:nth-of-type(2) {
	transform-origin: 100% 50%;
	transform: rotate(30deg);
	transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.bass line:nth-of-type(2) {
	transform: rotate(0);
	transition: all 0.3s 1.0s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui .btn.bass line:nth-of-type(3) {
	transform-origin: 100% 50%;
	transform: rotate(-30deg);
	transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.bass line:nth-of-type(3) {
	transform: rotate(0);
	transition: all 0.3s 1.0s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
/* icon-key */
.ui .btn.key line:nth-of-type(1) {
	transform-origin: 50% 50%;
	transform: scaleY(0.1);
	transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.key line:nth-of-type(1) {
	transform: scaleY(1);
	transition: all 0.3s 1.5s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui .btn.key line:nth-of-type(2) {
	transform-origin: 50% 50%;
	transform: scaleY(0.1);
	transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.key line:nth-of-type(2) {
	transform: scaleY(1);
	transition: all 0.3s 1.5s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui .btn.key line:nth-of-type(3) {
	transform-origin: 50% 50%;
	transform: scaleY(0.1);
	transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.key line:nth-of-type(3) {
	transform: scaleY(1);
	transition: all 0.3s 1.5s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
/* icon-gimmick */
.ui.show .btn.gimmick rect {
	animation-duration: 0.3s;
	animation-name: showScale;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui .btn.gimmick rect:nth-of-type(1) {
	transform-origin: 50% 50%;
	transform: scale(0.1) translate3d(0, 0, 0);
	transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.gimmick rect:nth-of-type(1) {
	animation-delay: 2.0s;
}
.ui .btn.gimmick rect:nth-of-type(2) {
	transform-origin: 50% 50%;
	transform: scale(0.1) translate3d(0, 0, 0);
	transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.gimmick rect:nth-of-type(2) {
	animation-delay: 2.05s;
}
.ui .btn.gimmick rect:nth-of-type(3) {
	transform-origin: 50% 50%;
	transform: scale(0.1) translate3d(0, 0, 0);
	transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.gimmick rect:nth-of-type(3) {
	animation-delay: 2.1s;
}
.ui .btn.gimmick rect:nth-of-type(4) {
	transform-origin: 50% 50%;
	transform: scale(0.1) translate3d(0, 0, 0);
	transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.gimmick rect:nth-of-type(4) {
	animation-delay: 2.15s;
}
.ui .btn.gimmick rect:nth-of-type(5) {
	transform-origin: 50% 50%;
	transform: scale(0.1) translate3d(0, 0, 0);
	transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.gimmick rect:nth-of-type(5) {
	animation-delay: 2.2s;
}
.ui .btn.gimmick circle {
	transform-origin: 50% 50%;
	transform: scale(0.2);
	transition: all 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.ui.show .btn.gimmick circle {
	transform: scale(1);
	transition: all 0.3s 2.0s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
	.ui .btn.mute {
		background-image: url('../images/icon-audio-playing@2x.webp');
		background-size: 40px;
	}
	.ui .btn.mute.muted {
		background-image: url('../images/icon-audio-muted@2x.webp');
		background-size: 40px;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.ui .btn {
		width: 20vw;
		height: 20vw;
		line-height: 20vw;
		margin: 0 1vw;
	}
	.ui .btn svg {
		top: calc(50% - 20px);
		left: calc(50% - 20px);
	}
	.ui .btn.mute {
		top: 20px;
		right: 20px;
	}
	.ui .btn.gimmick svg {
		top: calc(50% - 20px);
	}
	.ui .btn.gimmick span {
		top: 0;
	}
	.is-touch-device .ui .btn.gimmick span {
		display: none;
	}
}

@keyframes showScale {
	from {
		transform-origin: 50% 50%;
		transform: scale(0.1);
	}

	to {
		transform-origin: 50% 50%;
		transform: scale(1);
	}
}