// 文档-首页样式重写

:root {
  --gap-horizontal: 10px;
  --gap-vertical: 10px;
  --time-anim: 5s;
  --delay-anim: 0s;
  --blend-mode-1: none;
  --blend-color-1: transparent;
  --vt-bg-light: -webkit-linear-gradient(top,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0) 20%,
      rgba(0, 0, 0, 0) 80%,
      rgba(0, 0, 0, 0.1) 100%),
    -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 20%, rgba(0,
        0,
        0,
        0) 80%, rgba(0, 0, 0, 0.1) 100%),
    url('');
}

.VPHome {
  .VPHeroLogo {
    width: 15%;
    margin: 0 auto;
    padding: 30px 0 0 0;
  }

  .VPHero {
    .container {
      .main {
        text-align: center;

        .name {
          color: transparent;
          background: linear-gradient(to right, #32defd, rgb(247 69 152));
          max-width: 100%;
          -webkit-background-clip: text;

          &:hover {
            -webkit-animation: Glow 1.5s ease infinite alternate;
            animation: Glow 1.5s ease infinite alternate;
          }
        }

        .release-tag {
          font-size: 1rem;
          font-weight: bold;
          line-height: 20px;
          display: inline-block;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          padding: 6px;
          margin-left: 8px;
          background: var(--vp-c-brand);
          color: #fff;
          border-radius: 10px;
        }

        .text {
          color: var(--vp-c-gray);
          max-width: 100%;
        }

        .tagline {
          color: var(--vp-c-second-lighter);
          max-width: 100%;
        }

        .actions {
          justify-content: center;
        }
      }
    }
  }

  .VPButton {
    border-radius: 6px !important;
    border: 2px solid var(--vp-c-brand-light) !important;

    &.alt {
      color: var(--vp-c-brand-light) !important;
      background-color: transparent !important;
    }

    &.alt:hover {
      color: var(--vp-button-brand-text) !important;
      background-color: var(--vp-c-brand-light) !important;
    }

    &.brand {
      background-color: var(--vp-c-brand) !important;
    }

    &.brand:hover {
      background-color: var(--vp-c-brand-light) !important;
    }
  }

  &::after {
    content: ' ';
    height: 100%;
    width: 98%;
    top: 0;
    left: 0;
    position: fixed;
    background-image: var(--vt-bg-light);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-blend-mode: var(--blend-mode-1);
    animation-duration: var(--time-anim);
    animation-delay: var(--delay-anim);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: glitch-anim-1;
  }

  .VPFeatures {
    padding: 32px;
    margin: 0 15%;
    margin-bottom: 5%;
    background: linear-gradient(to right,
        rgba(6, 205, 255, 0.1882352941),
        rgba(223, 7, 107, 0.3));
    border-radius: 16px;

    .item {
      padding: 16px;

      .VPFeature {
        border: 1px solid var(--vp-c-text-inverse-4);
        background-color: transparent;

        &:hover {
          -webkit-animation-name: hfhover-zoom;
          animation-name: hfhover-zoom;
          -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
          -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
          -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
          color: var(--c-sub-brand-light);
        }

        .title {
          color: var(--vp-c-brand-light);
          font-size: 1.3rem;
          margin: 15px;
        }

        .details {
          color: var(--vp-c-second-lighter);
          font-size: 1rem;
          line-height: 1.5rem;
        }
      }
    }
  }
}

@media (min-width: 960px) {
  .VPFeatures {
    padding: 32px !important;
  }
}

@-webkit-keyframes Glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
      0 0 40px var(--vp-c-second), 0 0 70px var(--vp-c-second),
      0 0 80px var(--vp-c-second), 0 0 100px var(--vp-c-second),
      0 0 150px var(--vp-c-second);
  }

  to {
    text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff,
      0 0 10px var(--vp-c-brand), 0 0 17px var(--vp-c-brand),
      0 0 20px var(--vp-c-brand), 0 0 25px var(--vp-c-brand),
      0 0 37px var(--vp-c-brand);
  }
}

@keyframes Glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
      0 0 40px var(--vp-c-second), 0 0 70px var(--vp-c-second),
      0 0 80px var(--vp-c-second), 0 0 100px var(--vp-c-second),
      0 0 150px var(--vp-c-second);
  }

  to {
    text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff,
      0 0 10px var(--vp-c-brand), 0 0 17px var(--vp-c-brand),
      0 0 20px var(--vp-c-brand), 0 0 25px var(--vp-c-brand),
      0 0 37px var(--vp-c-brand);
  }
}

@keyframes glitch-anim-1 {
  0% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }

  2% {
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }

  4% {
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }

  6% {
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }

  8% {
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }

  10% {
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }

  12% {
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }

  14% {
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }

  16% {
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }

  18% {
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }

  20% {
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }

  21.9% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0);
  }

  22%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes hfhover-zoom {
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-filter: brightness(80%);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: brightness(100%);
  }
}