#shc_knuckles {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 116px;
	overflow: hidden;
}
#shc_knuckles::before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: -100%;
	top: 0;
	background: url(../img/knuckles_peeking.png) 0% 0%/auto 100% no-repeat;
	transition: left 0.25s linear;
}
#shc_knuckles[data-frame="0"]::before { background-position: 0% 0%; }
#shc_knuckles[data-frame="1"]::before { background-position: 25% 0%; }
#shc_knuckles[data-frame="2"]::before { background-position: 50% 0%; }
#shc_knuckles[data-frame="3"]::before { background-position: 75% 0%; }
#shc_knuckles[data-frame="4"]::before { background-position: 100% 0%; }

#shc_knuckles.peek::before {
	left: 0;
}

#shc_logo {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	width: 50%;
	min-width: 480px;
	max-width: 1565px;
	z-index: -1;
	opacity: 1;
	transition: opacity 2s;
}
#shc_logo.quickload {
	opacity: 0;
	transition: opacity: 0.25s;
}
#shc_logo.fade {
	opacity: 0.2 !important;
}
#shc_logo > span,
#shc_logo > span::before,
#shc_logo > span::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../px.png) 50% 50%/100% auto no-repeat;
	opacity: 0;
}
#shc_logo.fade span,
#shc_logo.fade span::before,
#shc_logo.fade span::after {
	animation: none !important;
	transition: none !important;
	opacity: 1 !important;
}
#shc_logo > span::before,
#shc_logo > span::after {
	content: "";
	transition: opacity 0.75s;
}
#shc_logo > span::before {
	transition: opacity 2s;
	z-index: -1;
}
#shc_logo > span.show {
	opacity: 1;
	animation: show 0.75s linear 1;
}
#shc_logo > span.show::before,
#shc_logo > span.show::after {
	opacity: 1;
}
@keyframes show {
	0% { opacity: 0; }
	5% { opacity: 0; }
	5.1% { opacity: 1; }
	10% { opacity: 1; }
	10.1% { opacity: 0; }
	15% { opacity: 0; }
	15.1% { opacity: 1; }
	20% { opacity: 1; }
	20.1% { opacity: 0; }
	25% { opacity: 0; }
	25.1% { opacity: 1; }
	30% { opacity: 1; }
	30.1% { opacity: 0; }
	35% { opacity: 0; }
	35.1% { opacity: 1; }
	40% { opacity: 1; }
	40.1% { opacity: 0; }
	55% { opacity: 0; }
	55.1% { opacity: 1; }
	60% { opacity: 1; }
	60.1% { opacity: 0; }
	65% { opacity: 0; }
	65.1% { opacity: 1; }
	100% { opacity: 1; }
}

#shc_logo > span[data-id="logo"]::before { background-image: url(../img/blur.png); }
#shc_logo > span[data-id="sonic_s"]::before { background-image: url(../img/blur_sonic_s.png); }
#shc_logo > span[data-id="sonic_o"]::before { background-image: url(../img/blur_sonic_o.png); }
#shc_logo > span[data-id="sonic_n"]::before { background-image: url(../img/blur_sonic_n.png); }
#shc_logo > span[data-id="sonic_i"]::before { background-image: url(../img/blur_sonic_i.png); }
#shc_logo > span[data-id="sonic_c"]::before { background-image: url(../img/blur_sonic_c.png); }
#shc_logo > span[data-id="hacking_h"]::before { background-image: url(../img/blur_hacking_h.png); }
#shc_logo > span[data-id="hacking_a"]::before { background-image: url(../img/blur_hacking_a.png); }
#shc_logo > span[data-id="hacking_c"]::before { background-image: url(../img/blur_hacking_c.png); }
#shc_logo > span[data-id="hacking_k"]::before { background-image: url(../img/blur_hacking_k.png); }
#shc_logo > span[data-id="hacking_i"]::before { background-image: url(../img/blur_hacking_i.png); }
#shc_logo > span[data-id="hacking_n"]::before { background-image: url(../img/blur_hacking_n.png); }
#shc_logo > span[data-id="hacking_g"]::before { background-image: url(../img/blur_hacking_g.png); }
#shc_logo > span[data-id="contest_c"]::before { background-image: url(../img/blur_contest_c.png); }
#shc_logo > span[data-id="contest_o"]::before { background-image: url(../img/blur_contest_o.png); }
#shc_logo > span[data-id="contest_n"]::before { background-image: url(../img/blur_contest_n.png); }
#shc_logo > span[data-id="contest_t"]::before { background-image: url(../img/blur_contest_t.png); }
#shc_logo > span[data-id="contest_e"]::before { background-image: url(../img/blur_contest_e.png); }
#shc_logo > span[data-id="contest_s"]::before { background-image: url(../img/blur_contest_s.png); }
#shc_logo > span[data-id="contest_t2"]::before { background-image: url(../img/blur_contest_t2.png); }
#shc_logo > span[data-id="full"]::before { background-image: url(../img/blur_full.png); }
#shc_logo > span[data-id="logo"]::after { background-image: url(../img/logo.png); }
#shc_logo > span[data-id="sonic_s"]::after { background-image: url(../img/logo_sonic_s.png); }
#shc_logo > span[data-id="sonic_o"]::after { background-image: url(../img/logo_sonic_o.png); }
#shc_logo > span[data-id="sonic_n"]::after { background-image: url(../img/logo_sonic_n.png); }
#shc_logo > span[data-id="sonic_i"]::after { background-image: url(../img/logo_sonic_i.png); }
#shc_logo > span[data-id="sonic_c"]::after { background-image: url(../img/logo_sonic_c.png); }
#shc_logo > span[data-id="hacking_h"]::after { background-image: url(../img/logo_hacking_h.png); }
#shc_logo > span[data-id="hacking_a"]::after { background-image: url(../img/logo_hacking_a.png); }
#shc_logo > span[data-id="hacking_c"]::after { background-image: url(../img/logo_hacking_c.png); }
#shc_logo > span[data-id="hacking_k"]::after { background-image: url(../img/logo_hacking_k.png); }
#shc_logo > span[data-id="hacking_i"]::after { background-image: url(../img/logo_hacking_i.png); }
#shc_logo > span[data-id="hacking_n"]::after { background-image: url(../img/logo_hacking_n.png); }
#shc_logo > span[data-id="hacking_g"]::after { background-image: url(../img/logo_hacking_g.png); }
#shc_logo > span[data-id="contest_c"]::after { background-image: url(../img/logo_contest_c.png); }
#shc_logo > span[data-id="contest_o"]::after { background-image: url(../img/logo_contest_o.png); }
#shc_logo > span[data-id="contest_n"]::after { background-image: url(../img/logo_contest_n.png); }
#shc_logo > span[data-id="contest_t"]::after { background-image: url(../img/logo_contest_t.png); }
#shc_logo > span[data-id="contest_e"]::after { background-image: url(../img/logo_contest_e.png); }
#shc_logo > span[data-id="contest_s"]::after { background-image: url(../img/logo_contest_s.png); }
#shc_logo > span[data-id="contest_t2"]::after { background-image: url(../img/logo_contest_t2.png); }
#shc_logo > span[data-id="full"]::after { background-image: url(../img/logo_full.png); }