* {
    margin: 0;
    padding: 0;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    background: linear-gradient(322deg, #161616 0%,#0A0A0A 50%,#000000 80%);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 隐藏滚动条 */
  .container::-webkit-scrollbar {
      display: none;
  }
  /* 顶部导航栏 谷歌*/
  .container {
    width: 100%;
    height: 100%;
    /* 溢出y轴保留滚动条，x轴隐藏滚动条 */
    overflow-y: scroll;
    scroll-behavior: smooth;
    /* 放在父级上，沿着y轴滑动  */
    scroll-snap-type: y mandatory;
      /*隐藏滚动条 兼容ie.火狐*/
    scrollbar-width: none;
    -ms-overflow-style: none; /* IE 10+ */
  }
  
  .translatebox{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 3vh 1vw;
    text-align: center;
  }
  
  .navbar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    display: flex;
    height: 61.5vh;
    flex-direction: column;
    justify-content: space-around;
    margin: 10vh 0;
    text-align: center;
  }
  
  .navbar li {
    list-style: none;
    margin: 0 1rem;
    padding: 0;
  }

  .navbar > li::before {
    content: "-";
    position: absolute;
    left: 0.2rem; /* 根据需要调整这个值来设置横线的位置 */
  }
  
  .navbar li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #f4f4f4;
    font-weight: 800;
  }
  
  .navbar li a:hover {
    color: #22bbff;
  }
  
  /* 内容 */
  section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    color: #f4f4f4;
    position: relative;
    /* 放在子元素上，和上面那个父元素一伙的 */
    scroll-snap-align: center;
    overflow: hidden;
  }
  
section.home {
    width: 100%;
    height: 100vh;
    display: flex;
}

#video-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 10;
}

.video-container-entry {
  width: 200% !important;
  height: 200% !important;
  transform: scale(1.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -90% !important;
  left: -50% !important;
  overflow: hidden;
  z-index: 10;
}

@keyframes video-entry{
    from{
        transform: scale(1.2);
    }
    to{
        transform: scale(1.0);
    }
}

.video-wrapper img{
  width: 100% !important;
  height: 100% !important;
  scale: 1.05;
  object-fit: cover !important;
}

.video-wrapper {
  width: 105% !important;  /* Slightly larger than 100% to avoid black edges */
  height: 105% !important; /* Slightly larger than 100% to avoid black edges */
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shake 10s infinite;
  animation: videoZoomin 2s forwards;
}


.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-lightblur{
    mix-blend-mode: screen;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    object-fit: cover;
     pointer-events: none;
}
@keyframes shake {
  0% { transform: translate(0, 0); filter: blur(0px);}
  10% { transform: translate(-2px, 2px); filter: blur(2px);}
  20% { transform: translate(-2px, -2px); filter: blur(10px); }
  30% { transform: translate(-3px, -3px); filter: blur(0px); }
  40% { transform: translate(3px, -3px); filter: blur(3px);}
  50% { transform: translate(2px, 2px); filter: blur(0px);}
  60% { transform: translate(3px, -3px); filter: blur(1px);}
  70% { transform: translate(3px, 3px); filter: blur(0px);}
  80% { transform: translate(-1px, 3px); filter: blur(10px);}
  90% { transform: translate(-1px, 1px); filter: blur(3px);}
  100% { transform: translate(0, 0); filter: blur(0px); }
}
@keyframes Bigshake {
  0% { transform: translate(0, 0); filter: blur(50px);}
  10% { transform: translate(-50px, 20px); filter: brightness(1) blur(1px);}
  15% { transform: translate(0px, -10px); filter: brightness(1) blur(20px); }
  20% { transform: translate(20px, 20px); filter: brightness(10) blur(50px); }
  30% { transform: translate(-30px, 30px); filter: blur(0px); }
  40% { transform: translate(-20px, 0px); filter: blur(3px);}
  50% { transform: translate(20px, -20px); filter: blur(0px);}
  60% { transform: translate(30px, -30px); filter: blur(1px);}
  70% { transform: translate(-20px, -10px); filter: blur(0px);}
  80% { transform: translate(10px, -30px); filter: blur(10px);}
  90% { transform: translate(-10px, 10px); filter: blur(3px);}
  100% { transform: translate(0, 0); filter: blur(0px); }
}
@keyframes slideVideo {
    0% {
        width: 100%;
        filter: brightness(10) blur(5px);
    }
    50% {
      filter: brightness(1.5) blur(0px);
    }
    100% {
        width: 61.5%; /* 5/8 of the screen width */
        filter: brightness(1) blur(0px);
    }
}

@keyframes SectionZoomin {
  0% {
      transform: scale(1.3);
      width: 150%;
      height: 150%;
      filter: brightness(10) blur(50px);
  }
  50% {
    filter: brightness(1.5) blur(30px);
  }
  100% {
      width: 100%;
      height: 100%;
      transform: scale(1);
      filter: brightness(1) blur(0px);
  }
}

@keyframes videoZoomin {
  0% {
    width: 210%;
    height: 210%;
  }
  70%{
    width: 200%;
    height: 200%;
  }
  71%{
    width: 110%;
    height: 110%;
  }
  100% {
    width: 105%;
    height: 105%;
  }
}
#static-content {
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
}

#static-content .content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Adjust as needed */
    width: 100%; /* Adjust as needed */
    flex-direction: column;
    padding-right: 16%;
}

.homecontent{
  align-items: start;
  flex-direction: column;
  text-align: start;
  width: 75%;
}

.homecontent img{
  width: calc(5vw + 5vh) /* Responsive font size */;
  margin-bottom: 10px;
}

.homecontent p{
  font-size: calc(0.5vw + 0.5vh) /* Responsive font size */ !important;
  font-weight: 400;
  line-height: normal;
  margin-top: 3vh;
}

.homecontent h1{
  color: #e5c2ae;
}

.content h1{
  font-size: calc(2vw + 2vh) /* Responsive font size */ !important;
  font-weight: 900 !important;
  transition: all 0.3s ease;
  margin-bottom: 1vh;
}

.content h5{
  font-size: calc(0.3vw + 0.3vh) /* Responsive font size */ !important;
  color: #22bbff;
  margin-bottom: 1vh;
  margin-top: 1vh;
}

.homepage_logo {
  width: 18.75%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
  flex-direction: row;
  padding: 0.1% 0.5%;
}

.homepage_logo_img {
  max-width: 100%;
  max-height: 75%;
  height: auto;
  width: auto;
}

.homepage_logo_gear{
    max-width: 100%;
    max-height: 75%;
    height: auto;
    width: auto;
    translate: -1.5vw;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.75) 19%, rgba(0,0,0,0) 60%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.75) 19%, rgba(0,0,0,0) 60%);
    filter: hue-rotate(-60deg);
}

.homepage_logo_h1 {
  margin: 0;
  font-size: calc(1vw + 1vh); /* Responsive font size */
  color: #EBE0C8;
  text-shadow: 0px 0px 10px #fff0e8, 0px 0px 20px #e30000a6;
}
.sub_homepage_logo_h1{
  margin: 0;
  font-size: calc(1vw + 1vh); /* Responsive font size */
  color: #EBE0C8;
  text-shadow: 0px 0px 10px #fff0e8, 0px 0px 20px #e30000a6;
}
.homepage_logo_h1_entry {
  margin: 0;
  font-size: calc(3vw + 1vh); /* Responsive font size */
  color: #EBE0C8;
  text-shadow: 0px 0px 10px #fff0e8, 0px 0px 20px #e30000a6;
}

.homepage_logo_entry {
    width: 37.5%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 11;
    flex-direction: row;
    padding: 0.1% 0.5%;
    translate: -50% -50%;
    z-index: 100;
}

.homepage_logo_img_entry {
    max-width: 100%;
    max-height: 100%;
    height: 30vh;
    width: 6vw;
    object-fit: cover;
}

.homepage_logo_gear_entry{
    max-width: 100%;
    max-height: 85%;
    height: auto;
    width: auto;
    translate: -3vw;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.75) 19%, rgba(0,0,0,0) 60%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.75) 19%, rgba(0,0,0,0) 60%);
    filter: hue-rotate(-60deg);
}

.award{
    display: flex;
    flex-direction: row;
}
.acdemic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
}

.item {
  display: flex;
  font-size: calc(0.3vw + 0.3vh) /* Responsive font size */ !important;
  align-items: center;
}
.item img {
  width: 1vw;
  height: 1vw;
  transform: translate(-200px);
  margin: 0 0 !important;
}

.bachelor {
  filter: drop-shadow(#66a0f7 200px 0);
  color: #66a0f7;
}

.master {
  filter: drop-shadow(#E17200 200px 0);
  color: #E17200;
}

/* 作品部分 */
.banner-container{
	width:100%;
	height:100%;
	position: relative;
}

.banner-container .banner-img-container {
  width: 100vw;
	height:100vh;
	overflow: visible;
	position: absolute;
	display: flex;
	transition: transform 0.6s ease;
	z-index: 0;
}

.banner-container .banner-info-container {
	width: 42vw;
  height: 6.18vh;
  background-color: rgba(0, 0, 0, 0.73);
  overflow: hidden;
  position: absolute;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: start; /* 水平方向内容平均分布 */
  gap: 2vw;
  transition: transform 0.6s ease;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  backdrop-filter: blur(10px); /* 添加背景模糊效果 */
}

.banner-container .banner-post-container {
  height: 20vh;
  overflow: visible;
  position: absolute;
  display: flex;
  align-items: start; /* 垂直居中 */
  justify-content:flex-start; /* 水平方向内容平均分布 */
  flex-direction: row;
  transition: transform 0.6s ease;
  top: 20vh;
  left: 10vw;
  z-index: 10;
  text-shadow: 0.4px 1px 4px #111111;
}

.banner-container .banner-post-container .banner-post-info {
  text-align: start;
  width: 100vw;
  align-items: start; /* 垂直居中 */
  justify-content:flex-start; /* 水平方向内容平均分布 */
  flex-direction: column;
  border-left: 0.7vw solid black; /* 这里设置边框的宽度和颜色 */
  padding-left: 1vw; /* 给内容留出一些空间，避免紧贴边框 */
}

.banner-container .banner-post-container .banner-post-info p {
  font-size: calc(0.6vw + 0.6vh) /* Responsive font size */ !important;
  font-weight: 400;
  line-height: normal;
  margin-top: 3vh;
}

.banner-container .banner-post-container .banner-post-info h3 {
  font-size: calc(1vw + 1vh) /* Responsive font size */ !important;
  font-weight: 600;
  line-height: normal;
  margin-top: 1vh;
}

.banner-container .banner-post-container .banner-post-info .p_hold {
  width: 30vw;
}
.banner-container .banner-post-container img {
  width: auto;
  height: 13vh;
  overflow: hidden;
  object-fit: cover;
  margin-bottom: 0;
}

.banner-container .banner-info-container h1,h2 {
 margin-bottom: 0;
 margin-left: 1vw;
}
.banner-container .banner-info-container h3 {
  margin-bottom: 0;
 }
 .banner-container .banner-info-container a {
  position: relative;
  background-color: transparent;
  width: 2vw;
 }
.banner-container .banner-info-container h1 {
  font-size: calc(1vw + 1vh) /* Responsive font size */ !important;
  font-weight: 800;
 }

.banner-container .banner-img-container img{
	width:100%;
	height:100%;
  object-fit: cover;
  flex: 0 0 100%; /* 每个图片占据100%的宽度 */
  height: 100%;
}

/* 轮播图圆点样式 */
.banner-container a {
	width:.7vw;
	height:.7vw;
	background:#09141a;
	position: absolute;
	bottom: 7.2%;
	border-radius: 100%;
	margin:0;
	z-index: 2;
}

.banner-container input{
	width:0.7vw;
	height:0.7vw;
	position: absolute;
	bottom: 7.2%;
	margin:0;
	cursor: pointer;
	z-index: 20;
	opacity: 0;
}
/* 设置导航圆点偏移量（居中布局）*/
#banner-control-1,#banner-control-1 + .banner-nav-a{
    left: 64%;
}
#banner-control-2,#banner-control-2 + .banner-nav-a{
    left: 65.5%;
}
#banner-control-3,#banner-control-3 + .banner-nav-a{
    left: 67%;
}
#banner-control-4,#banner-control-4 + .banner-nav-a{
    left: 68.5%;
}
/* 设置高亮 */
/*当 input 被选中时 他的兄弟级a标签高亮展示*/
input:checked + .banner-nav-a {
  background-color: #e9dbd7;
  box-shadow: 0px 0px 10px #c06937, 0px 0px 20px #fff;
  z-index: 22;
}
/* 设置轮播图动画 */
#banner-control-1:checked ~ .banner-post-container{
	transform: translateX(0px);
}
#banner-control-2:checked ~ .banner-post-container{
	transform: translateX(-100vw);
}
#banner-control-3:checked ~ .banner-post-container{
	transform: translateX(-200vw);
}
#banner-control-4:checked ~ .banner-post-container{
	transform: translateX(-300vw);
}

/* 设置轮播图动画 */
#banner-control-1:checked ~ .banner-img-container{
	transform: translateX(0px);
}
#banner-control-2:checked ~ .banner-img-container{
	transform: translateX(-100vw);
}
#banner-control-3:checked ~ .banner-img-container{
	transform: translateX(-200vw);
}
#banner-control-4:checked ~ .banner-img-container{
	transform: translateX(-300vw);
}

/* BLOGS */
header {
  margin-bottom: 7vh;
}

header h1 {
  font-size: 2.5rem;
  margin: 0;
}

header p {
  font-size: 1.2rem;
  color: #555;
}
#carousel-container {
  position: relative;
  width: 64vh;
  height: 36vh;
  margin: 0 auto;
  overflow: visible;
}

.reflect{
    -webkit-box-reflect: below 3vh linear-gradient(0deg, rgba(0, 0, 0, 0.52) 7%,rgba(255, 255, 255, 0) 43%);
    width: 100%;
    height: 36vh;
}

#carousel {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 1s;
  perspective: 500px;
}

@keyframes blogin{
  0%{
    transform: translate3d(-4vw,0,360px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  33%{
    transform: translate3d(-4vw,0,320px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  66%{
      transform: translate3d(0,0,320px) rotateX(5deg) rotateY(-10deg) rotateZ(-2deg);
  }
  100%{
    transform: translate3d(-3vw,0,0) rotateX(5deg) rotateY(-10deg) rotateZ(-2deg);
  }
}

@keyframes blogin2{
  0%{
    width:36vw;
  }
  33%{
    width:36vw;
  }
  66%{
      width:64vh;
  }
  100%{
    width:64vh;
  }
}

.carousel-item {
  transform-origin: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  backface-visibility: visible;
  transition: all 1s, opacity 1s;
  transform: translate3d(0,0,-300px) rotateX(5deg) rotateY(-5deg) rotateZ(-0deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  perspective-origin: 50% 70%;
} 

.carousel-item.active {
  transform: translate3d(-3vw,0,0) rotateX(5deg) rotateY(-10deg) rotateZ(-2deg);
  transition: all 1s, opacity 1s;
}

.carousel-item.prev{
    filter: brightness(0.5);
    transition: all 1s, opacity 1s;
    transform: translate3d(-35vw,10vh,-300px) rotateX(5deg) rotateY(-45deg) rotateZ(-5deg);
}

.carousel-item.next{
    filter: brightness(0.8);
    transition: all 1s, opacity 1s;
    transform: translate3d(10vw,0,-100px) rotateX(5deg) rotateY(-10deg) rotateZ(-2deg);
}

.carousel-button {
    position: absolute;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(5px);
    border: none;
    font-size: 1vw;
    cursor: pointer;
    z-index: 10;
    animation-delay: 3s !important;
    clip-path: inset(0 0 0 0);
    color: #ffffff94;
    transition: all 0.2s ease;
}

.carousel-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: none;
    font-size: 1vw;
    cursor: pointer;
    z-index: 10;
    animation-delay: 3s !important;
    clip-path: inset(0 0 0 0);
    color: #ffffff;
    transition: all 0.2s ease;
}

.more-btn {
    display: inline-block;
    position: relative !important;
    padding: 10px 15px;
    margin-top: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px); /* 添加背景模糊效果 */
    width: 4vw !important;
    height: 3vh !important;
    color: white;
    text-decoration: none;
    border-radius: 0px !important;
    transition: all 0.3s ease;
    line-height: 3vh; /* 设置与按钮高度相同的行高 */
    text-align: center;
}

.more-btn:hover {
  background-color: #e5c2ae;
  color: black;
  box-shadow: 0px 0px 10px #e5c2ae, 0px 0px 20px #fff;
}

#prev-button {
  left: 10px;
}

#next-button {
  right: 10px;
}

.post-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.post-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  text-align: center;
}

.post-title {
  margin: 0;
  font-size: 24px;
}

.post-date {
  margin: 0;
  font-size: 16px;
}

#blogs header{
    position: absolute;
    top: 7vh;
    left: 7vw;
    text-align: start;
    max-width:27vw;
}

#blogs header h1{
    font-size: calc(1.3vw + 1.3vh);
    margin-bottom: 1vh;
    border: white solid;
    padding: 10px;
    line-height: 100%;
    font-weight: 900;
        animation-delay: 3s !important;
}

#blogs header P{
    font-size: calc(0.4vw + 0.4vh);
    color: white;
    width: 82%;
    margin-bottom: 0;
    line-height: 2vh;
    animation-delay: 1s !important;
}

#blogs footer{
    position: absolute;
    bottom: 7vh;
    z-index: 0;
    animation-delay: 2.4s !important;
}

#blogs footer h1{
    margin-bottom: 0;
    letter-spacing: 0;
    line-height: 5vh;
}

.endoftext{
    margin-bottom: 7vh !important;
}

.nine-text-block{
    font-size: calc(1vw + 1vh) !important;
    color: white !important;
    line-height: 3vh !important;
    display: flex;
    justify-content: space-around;
    width: 30%;
    text-align: center;
    animation-delay: 1s !important;
    margin-bottom: 1.7vh;
}

/* Contact */
.contact header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  width: 100%;
}

.header-left h1 {
  font-size: 1.5rem;
}

.header-right p {
  font-size: 1rem;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 100%;
}

.main-content {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
}

.main-image img {
  height: 100vh; /* Adjust as necessary */
  margin-right: 20px;
  object-fit: contact;
}

.main-text h1 {
  font-size: 3rem;
}

.main-text h2 {
  font-size: 2rem;
}

.contact footer {
  padding: 20px;
  text-align: center;
  width: 100%;
}

.footer-content {
  display: flex;
  justify-content: center;  
}
.download-options{
  display: flex;
  flex-direction: row;
  justify-content: space-around;  
  gap: 40px;
}
.download-options .option {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download-options .option img {
  width: 100px; /* Adjust as necessary */
  margin-bottom: 10px;
}

.contact{
  display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    justify-content: space-around;
}

/* anime keyframes */
@keyframes slideInFromLeft {
  0% {
      clip-path: inset(0 120% 0 0);
      transform: translateX(-50%);
  }
  100% {
      clip-path: inset(0 0 0 0);
      transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  0% {
      clip-path: inset(0 0 0 120%);
      transform: translateX(100%);
  }
  100% {
      clip-path: inset(0 0 0 0);
      transform: translateX(0);
  }
}

@keyframes slideInFromTop {
  0% {
      clip-path: inset(100% 0 0 0);
      transform: translateY(-50%);
  }
  100% {
      clip-path: inset(0 0 0 0);
      transform: translateY(0);
  }
}

@keyframes slideInFromBottom {
  0% {
      clip-path: inset(0 0 100% 0);
      transform: translateY(50%) !important;
  }
  100% {
      clip-path: inset(0 0 0 0);
      transform: translateY(0);
  }
}

@keyframes expandFromCenter {
  0% {
      clip-path: inset(50% 50% 50% 50%);
  }
  100% {
      clip-path: inset(0 0 0 0);
  }
}

/* 从左侧滑入 */
@keyframes enterFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 从右侧滑入 */
@keyframes enterFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 从上方滑入 */
@keyframes enterFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 从下方滑入 */
@keyframes enterFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes float3D {
    0% {
        transform: translate3d(0, 0, 0);
    }
    10% {
        transform: translate3d(2px, -1px, 3px);
    }
    20% {
        transform: translate3d(-1px, 2px, -2px);
    }
    30% {
        transform: translate3d(3px, -2px, 1px);
    }
    40% {
        transform: translate3d(-2px, 1px, -3px);
    }
    50% {
        transform: translate3d(1px, 3px, 2px);
    }
    60% {
        transform: translate3d(-3px, -1px, -1px);
    }
    70% {
        transform: translate3d(2px, -3px, 3px);
    }
    80% {
        transform: translate3d(-1px, 2px, -2px);
    }
    90% {
        transform: translate3d(3px, -2px, 1px);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes videoblurout{
    0% {
        filter: brightness(1);
        opacity: 1;
    }
    2% {
        filter: brightness(20);
        opacity: 1;
    }
    5% {
        filter: brightness(1.1);
        opacity: 1;
    }
    100% {
        filter: brightness(1);
        opacity: 0;
    }
}

@keyframes gear_entry{
    from{
        translate: -24vw;
        transform: rotate(300deg);
        -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 80%, rgba(0,0,0,0.5) 100%);
        mask-image: linear-gradient(90deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 80%, rgba(0,0,0,0.5) 100%);
        filter: hue-rotate(-60deg);
    }
    to{
        translate: -3vw;
        -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.75) 19%, rgba(0,0,0,0) 60%);
        mask-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.75) 19%, rgba(0,0,0,0) 60%);
        transform: rotate(0deg);
        filter: hue-rotate(-60deg);
    }
}
.delay1{
  animation-delay: 0.2s !important;
}

.delay2{
  animation-delay: 0.4s !important;
}

.delay3{
  animation-delay: 1.2s !important;
}

.delay4{
  animation-delay: 1.4s !important;
}