/* Variables converted to CSS */
:root {
	--color-white:hsla(0,0%,100%,1);
	--color-black:#fff0;
	--color-blue:hsla(244,100%,50%,1);
	--color-red:hsla(0,100%,50%,1);
	--pure-white:hsla(0,0%,100%,1);
	--pure-black:hsla(0,0%,0%,1);
	--dark-jungle-green:hsla(210,3%,11%,1);
	--grey-dark:hsla(0,0%,25%,1);
	--white-dark:hsla(0,0%,95%,1);
	--fuel-yellow:hsla(36,100%,49%,1);
	--droid-serif:'Droid Serif',serif;
	--kalam:'Kalam',cursive;
	--open-sans:'Open Sans',sans-serif;
	--transition:.5s cubic-bezier(.77,0,.175,1);
	--transition-fast:.2s cubic-bezier(.77,0,.175,1);
}
/* Functions and rem conversion applied directly in the CSS */
body {
	background-color:var(--color-black);
	max-width:100vw;
	overflow:hidden;
	position:relative;
}
body::before,body::after {
	display:none;
}
body::before {
	animation:curtain 0.4s cubic-bezier(0.445,0.05,0.55,0.95) forwards;
	content:'';
	height:100vh;
	position:absolute;
	right:-100%;
	top:0;
	width:100vw;
	z-index:-1;
	background-color:var(--color-black);
}
body::after {
	animation:curtain 0.5s cubic-bezier(0.445,0.05,0.55,0.95) 0.3s forwards;
	content:'';
	height:100vh;
	position:absolute;
	right:-100%;
	top:0;
	width:100vw;
	z-index:-1;
	background-color:var(--color-white);
}
@keyframes curtain {
	100% {
	transform:translateX(-100%);
}
}
/* 视频背景样式 */
.video-background {
	position:fixed;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	object-fit:cover;
	z-index:-100;
}
/* 遮罩层样式 */
.overlay {
	position:fixed;
	top:0;
	left:0;
	width:180%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	/* 半透明黑色 */
          z-index:-99;
}
/* 主要内容区样式 */
.o-main {
	position:relative;
	color:white;
	text-align:center;
	padding-top:20vh;
	/* 调整顶部间距 */
}
.o-main {
	align-items:center;
	display:flex;
	justify-content:center;
	height:100%;
	position:relative;
}
.o-main::before {
	animation:curtain 0.6s cubic-bezier(0.445,0.05,0.55,0.95) 0.4s forwards;
	content:'';
	height:100vh;
	position:absolute;
	right:-100%;
	top:0;
	width:100vw;
	z-index:0;
	background-color:#000;
	display:none;
}
.o-content {
	z-index:1;
}
.c-drawing {
	animation:drawing-path 0.7s cubic-bezier(0.95,0.05,0.795,0.035) 0.7s forwards;
	stroke-dasharray:254;
	stroke-dashoffset:254;
	width:25rem;
	/* 150 / 16 */
}
@keyframes drawing-path {
	to {
	    stroke-dashoffset:0;
    }
}
.c-glitch {
	animation:fade-in 0.4s linear 1.8s forwards;
	color:var(--color-white);
	font-size:4rem;
	/* 18 / 16 */
  margin:0.625rem 0 0 1.25rem;
	/* 10 / 16,20 / 16 */
  opacity:0;
	position:relative;
	user-select:none;
	overflow:hidden;
}
.c-glitch::before,.c-glitch::after {
	animation:glitch-anime 0s infinite linear alternate-reverse;
	background:var(--color-black);
	color:var(--color-white);
	content:attr(data-text);
	position:absolute;
	overflow:hidden;
	top:0;
}
.c-glitch::before {
	animation-duration:2s;
	left:-0.125rem;
	/* -2 / 16 */
  text-shadow:1px 0 var(--color-blue);
}
.c-glitch::after {
	animation-duration:5s;
	left:0.125rem;
	/* 2 / 16 */
  text-shadow:-1px 0 var(--color-red);
}
@keyframes glitch-anime {
0%,100% {
	clip-path:polygon(0 2%,100% 2%,100% 5%,0 5%);
}
20% {
	clip-path:polygon(0 15%,100% 15%,100% 15%,0 15%);
}
30% {
	clip-path:polygon(0 10%,100% 10%,100% 20%,0 20%);
}
40% {
	clip-path:polygon(0 1%,100% 1%,100% 2%,0 2%);
}
50% {
	clip-path:polygon(0 33%,100% 33%,100% 33%,0 33%);
}
55% {
	clip-path:polygon(0 44%,100% 44%,100% 44%,0 44%);
}
60% {
	clip-path:polygon(0 50%,100% 50%,100% 20%,0 20%);
}
65% {
	clip-path:polygon(0 70%,100% 70%,100% 70%,0 70%);
}
70% {
	clip-path:polygon(0 80%,100% 80%,100% 80%,0 80%);
}
80% {
	clip-path:polygon(0 50%,100% 50%,100% 55%,0 55%);
}
85% {
	clip-path:polygon(0 60%,100% 60%,100% 65%,0 65%);
}
95% {
	clip-path:polygon(0 72%,100% 72%,100% 78%,0 78%);
}
}@keyframes fade-in {
	100% {
	opacity:1;
}
}
.c-intro {
	animation:fe30-anime 1s ease-in-out 4s forwards;
	bottom:3.125rem;
	/* 50 / 16 */
    left:50%;
	opacity:0;
	position:fixed;
	transform:translateX(-50%);
}
.c-fe30 {
	color:var(--pure-white);
	margin-top:2.5rem;
	/* 40 / 16 */
}
.c-fe30 a {
	color:var(--pure-white);
}
.c-fe30 a:hover {
	text-decoration:none;
}
.c-ryanyu {
	background-color:transparent;
	display:block;
	font-family:var(--kalam);
	height:4.375rem;
	/* 70 / 16 */
  margin:1.25rem auto 0;
	/* 20 / 16 */
  position:relative;
	width:4.375rem;
	/* 70 / 16 */
}
.c-ryanyu img {
	background-color:var(--pure-white);
	border:0.1875rem solid var(--fuel-yellow);
	/* 3 / 16 */
  border-radius:50%;
	height:4.375rem;
	/* 70 / 16 */
  object-fit:contain;
	width:4.375rem;
	/* 70 / 16 */
}
.c-ryanyu__front {
	backface-visibility:hidden;
	height:inherit;
	position:absolute;
	top:0;
	transform:rotateX(0) rotateY(0);
	transform-style:preserve-3d;
	transition:all 0.5s cubic-bezier(0.77,0,0.175,1);
	z-index:2000;
}
.c-ryanyu:hover .c-ryanyu__front {
	transform:rotateY(180deg);
}
.c-ryanyu__back {
	background-color:var(--pure-white);
	backface-visibility:hidden;
	border-radius:50%;
	color:var(--fuel-yellow);
	height:inherit;
	position:absolute;
	top:0;
	transform:rotateY(180deg);
	transform-style:preserve-3d;
	transition:all 0.5s cubic-bezier(0.77,0,0.175,1);
	width:inherit;
	z-index:1000;
}
.c-ryanyu__back::before {
	content:'Ryan Yu';
	display:block;
	transform:rotate(-45deg) translate(-4px,25px);
	width:3.125rem;
	/* 50 / 16 */
}
.c-ryanyu:hover .c-ryanyu__back {
	transform:rotateY(0);
}
@keyframes fe30-anime {
	0% {
	opacity:0;
}
100% {
	opacity:1;
}
}