japanese-drum-game/public/src/css/songbg.css

#songbg,
#songbg>*,
.donbg,
.donbg *,
#song-stage{
	position: absolute;
	right: 0;
	left: 0;
	width: 100%;
	max-width: calc(100vh / 9 * 32);
}
#songbg{
	height: 50.1%;
}
#songbg>*{
	top: 0;
}
#songbg,
#songbg>*{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	bottom: 0;
}
#song-stage{
	height: calc(44 / 720 * 100vh);
	background-position: center bottom;
	background-repeat-y: no-repeat;
	bottom: 0;
}
.portrait #songbg{
	height: 63.4%;
	max-height: calc(50% + 24vw);
}
.touchp2 #songbg{
	height: calc(50% - 5.5vw);
}
.multiplayer.portrait #songbg{
	height: calc(50% - 37vw);
	min-height: calc(29% + 1px);
}
.multiplayer:not(.touchp2):not(.portrait) #songbg,
.multiplayer:not(.touchp2):not(.portrait) #song-stage{
	display: none;
}
.game-paused *{
	animation-play-state: paused !important;
}
@keyframes songbg-strobe{
	0%{opacity: 1}
	25%{opacity: 0}
	50%{opacity: 0.66}
	75%{opacity: 0}
}
@keyframes songbg-pulse{
	0%{opacity: 1}
	50%{opacity: 0}
}
.songbg-1 #layer2,
.songbg-2 #layer2,
.songbg-3 #layer2{
	animation: 0.4s linear songbg-strobe infinite;
	mix-blend-mode: difference;
}
.songbg-4 #layer2{
	animation: 0.4s linear songbg-pulse infinite;
	mix-blend-mode: difference;
}
.songbg-5 #layer2{
	animation: 1s linear songbg-pulse infinite;
	mix-blend-mode: color-dodge;
}
.songbg-strobe #layer2{
	animation: 0.4s linear songbg-strobe infinite;
}
.songbg-pulse #layer2{
	animation: 0.4s linear songbg-pulse infinite;
}
.songbg-slowfade #layer2{
	animation: 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) songbg-pulse infinite;
}
.touch-visible #layer2{
	display: none;
	background-image: none;
	animation: none;
}
.donbg{
	top: 0;
	height: calc(50% - 13.7vw);
	min-height: 25.6%;
}
.portrait .donbg{
	height: calc(50% - 48.9vw);
	min-height: 22.5%;
}
.donbg *{
	top: 0;
	bottom: 0;
	background-repeat-y: no-repeat;
}
.donbg.donbg-bottom{
	top: auto;
	bottom: 0;
}
.portrait .donbg.donbg-bottom {
	top: calc(50% + -1vw);
	bottom: auto;
}
@keyframes donbg-scroll{
	from{background-position-x: 0}
	to{background-position-x: calc(var(--h) / var(--sh1) * var(--sw) * -1)}
}
@keyframes donbg-raise{
	from{background-position-y: 0}
	to{background-position-y: var(--raised)}
}
@keyframes donbg-anim3{
	0%{background-position-y: 0}
	13%{background-position-y: var(--raised)}
	15%{background-position-y: var(--raised)}
	45%{background-position-y: 0}
	50%{background-position-y: 0}
	65%{background-position-y: calc(var(--raised) / 2)}
	80%{background-position-y: 0}
}
@keyframes donbg-anim5{
	0%{background-position-y: 0}
	13%{background-position-y: var(--raised)}
	17%{background-position-y: var(--raised)}
	30%{background-position-y: 0}
}
.donlayer1{
	animation: 5s linear donbg-scroll infinite;
	background-size: auto 100%;
}
.donlayer2{
	background-size: auto calc(var(--sh2) / var(--sh1) * 100%);
	--raised: calc((var(--sh2) - var(--sh1)) / var(--sh2) * var(--h) * -1);
}
.donlayer3{
	background-color: #000;
	opacity: 0;
	transition: 0.15s opacity linear;
}
.donbg-dark .donlayer3{
	opacity: 0.5;
}
.donbg-1 .donlayer2,
.donbg-2 .donlayer2,
.donbg-4 .donlayer2,
.donbg-6 .donlayer2,
.donbg-raise .donlayer2{
	animation: 5s linear donbg-scroll infinite, 1s linear donbg-raise infinite alternate;
}
.donbg-3 .donlayer2,
.donbg-anim3 .donlayer2{
	animation: 3.4s linear donbg-scroll infinite, 1.8s linear donbg-anim3 infinite;
}
.donbg-5 .donlayer2,
.donbg-anim5 .donlayer2{
	animation: 2.7s linear donbg-scroll infinite, 2.2s linear donbg-anim5 infinite;
}
.donbg-fastscroll .donlayer1{
	animation: 2s linear donbg-scroll infinite;
}
.donbg-fastscroll .donlayer2{
	animation: 1s linear donbg-scroll infinite;
}

#tetsuohana{
	position: absolute;
	right: calc(-12px * var(--scale));
	left: calc(-12px * var(--scale));
	margin: auto;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	top: calc(50% - 15px * var(--scale));
	width: calc(1304px * var(--scale));
	height: calc(375px * var(--scale));
	--frame: 0;
	--low: calc(36px * var(--scale));
}
#tetsuo,
#hana{
	position: absolute;
	top: 0;
	width: calc(292px * var(--scale));
	height: calc(425px * var(--scale));
	background-repeat: no-repeat;
	background-size: calc(292px * var(--scale) * 2);
	background-position-y: calc(-425px * var(--frame) * var(--scale));
	transform: translateY(calc(360px * var(--scale)));
}
#tetsuo{
	left: calc(173px * var(--scale));
}
#hana{
	right: calc(178px * var(--scale));
	background-position-x: calc(-292px * var(--scale));
}
#mikoshi{
	position: absolute;
	top: 0;
	left: calc(390px * var(--scale));
	width: calc(553px * var(--scale));
	height: calc(416px * var(--scale));
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateY(calc(461px * var(--scale)));
}
#flowers1,
#flowers2{
	position: absolute;
	top: calc(218px * var(--scale));
	width: calc(483px * var(--scale));
	height: calc(159px * var(--scale));
	background-repeat: no-repeat;
	background-size: calc(483px * var(--scale));
	background-position-y: calc(-159px * var(--frame) * var(--scale));
	transform: translateY(calc(243px * var(--scale))) scaleX(var(--flip));
	--frame: 0;
}
#flowers1{
	left: 0;
	--flip: 1;
}
#flowers2{
	right: calc(4px * var(--scale));
	--flip: -1;
}
#tetsuohana.fadein,
#tetsuohana.dance,
#tetsuohana.failed{
	height: calc(461px * var(--scale));
}
#tetsuohana.fadein #tetsuo,
#tetsuohana.fadein #hana{
	transition: 0.5s transform cubic-bezier(0.2, 0.6, 0.4, 1.2);
	transform: translateY(var(--low));
}
@keyframes tetsuohana-dance1{
	0%{transform: translateY(var(--low))}
	50%{transform: translateY(0)}
}
@keyframes tetsuohana-dance2{
	50%{transform: translateY(0)}
	100%{transform: translateY(var(--low))}
}
@keyframes tetsuohana-failed1{
	0%{transform: translateY(calc(10px * var(--scale)))}
	50%{transform: translateY(0)}
}
@keyframes tetsuohana-failed2{
	50%{transform: translateY(calc(5px * var(--scale)))}
	100%{transform: translateY(calc(15px * var(--scale)))}
}
@keyframes tetsuohana-flowers{
	0%{--frame: 0}
	50%{--frame: 1}
	100%{--frame: 2}
}
#tetsuohana.dance #tetsuo,
#tetsuohana.dance #hana{
	--frame: 1;
	transform: translateY(var(--low));
	animation: 0.5s ease-out tetsuohana-dance1 infinite, 0.5s ease-in tetsuohana-dance2 infinite;
}
#tetsuohana.dance #flowers1,
#tetsuohana.dance #flowers2{
	transform: translateY(0) scaleX(var(--flip));
	animation: 0.25s 0.4s tetsuohana-flowers both;
	transition: 0.34s transform ease-out;
}
#tetsuohana.dance #mikoshi{
	transform: translateY(var(--low));
	transition: 0.4s 0.4s transform ease-out;
	animation: 0.5s 0.8s ease-out tetsuohana-dance1 infinite, 0.5s 0.8s ease-in tetsuohana-dance2 infinite;
}
#tetsuohana.failed #tetsuo,
#tetsuohana.failed #hana{
	--frame: 2;
	top: calc(26px * var(--scale));
	transform: translateY(calc(46px * var(--scale)));
	animation: 1.25s ease-out tetsuohana-failed1 both infinite, 1.25s ease-in tetsuohana-failed2 both infinite;
}