.menu-active {
  color: var(--color-primary);
}
.menu-active span[class^="icon-"] {
  color: var(--color-primary);
}

.carousel-slide {
  position: relative;
  overflow: hidden;
}

.carousel-slide::before,
.carousel-slide::after,
.carousel-slide .top-edge,
.carousel-slide .bottom-edge {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.carousel-slide::before {
  left: 0;
  top: 0;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, #111319, transparent);
}

.carousel-slide::after {
  right: 0;
  top: 0;
  width: 20%;
  height: 100%;
  background: linear-gradient(270deg, #111319, transparent);
}

.carousel-slide .bottom-edge {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(0deg, #111319, transparent);
}

@media (max-width: 640px) {
  .carousel-slide::before,
  .carousel-slide::after,
  .carousel-slide .top-edge {
    display: none;
  }

  .carousel-slide .bottom-edge {
    height: 40%;
  }
}

@media (min-width: 641px) {
  .carousel-slide .top-edge {
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(180deg, #111319, transparent);
  }

  .carousel-slide .bottom-edge {
    height: 20%;
  }
}

.headershadow {
  box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 6px 0px;
}

header {
  transition: all 0.3s ease;
}

/* 基础懒加载样式 */
.lazy,
.lazy-bg {
  /*opacity: 0;*/
  /*transition: opacity 0.3s;*/
  /*filter: blur(5px);*/
}

/* 图片专属样式 */
.lazy {
  background-color: #25252b;
  background-image: url(../img/placeholder.png);
  background-size: cover;
  background-position: center;
}

/* 背景图专属样式 */
.lazy-bg {
  background-color: #25252b;
  background-size: cover;
  background-position: center;
}

/* 加载完成状态 */
.lazy-loaded,
.lazy-bg-loaded {
  opacity: 1;
  filter: blur(0);
}

.scrollbar-hide {
  scrollbar-width: none;
}

.occlusion {
  mask-image: linear-gradient(to bottom, #121212, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #121212, transparent);
}

.play-on {
  display: block;
  height: 8px;
  position: absolute;
  left: calc(50% - 11px);
  bottom: 0;
}

.play-on i {
  width: 4px;
  height: 6px;
  border-radius: 4px 4px 0 0;
  background-color: #26b2ff;
  position: absolute;
  bottom: 0;
  left: 0;
}

.play-on i:nth-last-child(1) {
  animation: playon 0.8s 0.3s infinite;
}

.play-on i:nth-last-child(2) {
  animation: playon 0.8s 0.1s infinite;
  left: 6px;
}

.play-on i:nth-last-child(3) {
  animation: playon 0.6s 0.2s infinite;
  left: 12px;
}

.play-on i:nth-last-child(4) {
  animation: playon 1s 0.3s infinite;
  left: 18px;
}

@keyframes playon {
  0% {
    height: 70%;
  }

  50% {
    height: 100%;
  }

  100% {
    height: 35%;
  }
}