@import "variables";

.header {
  display: flex;
  flex-direction: column;
  position: relative;

  &__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }

  .menu {
    margin: 20px 0;

    &__inner {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        position: relative;
        flex: 0 0 auto;
        padding-bottom: 10px;

        &.active {
          color: var(--cyan);
        }

        &:not(:last-of-type) {
          margin-right: 20px;
        }
      }
    }

    &__sub-inner {
      position: absolute;
      z-index: 99;
      top: 35px;
      left: 0;
      display: none;
      margin: 0;
      padding: 10px;
      list-style: none;
      border: 2px solid var(--red);
      background: var(--background);
      box-shadow: 0 10px var(--background), -10px 10px var(--background), 10px 10px var(--background);
      overflow: hidden;

      li {
        padding: 5px;
        white-space: nowrap;
        text-decoration: underline;
        color: var(--green);
        opacity: 0;
        transform: translateX(-10px);

        &:not(:last-of-type) {
          margin-right: 0;
        }
      }

      &.open {
        display: block;
        animation: terminal-frame-reveal 0.3s ease-out forwards;

        // 逐行渲染效果 - 为每个子项添加延迟动画
        li {
          animation: terminal-line 0.2s ease-out forwards;

          // 为前20个菜单项添加递增延迟
          @for $i from 1 through 20 {
            &:nth-child(#{$i}) {
              animation-delay: #{($i * 0.05) + 0.1}s;
            }
          }
        }
      }
    }
  }

  .button {
    background-color: transparent;
    color: var(--foreground);
    margin: 0 0 0 .5rem;
    padding: 0;
  }

  // 菜单框架渲染动画 - 从上到下逐层渲染边框和内容
  @keyframes terminal-frame-reveal {
    0% {
      clip-path: inset(-10px -10px calc(100% + 10px) -10px);
      opacity: 1;
    }
    100% {
      clip-path: inset(-10px -10px -10px -10px);
      opacity: 1;
    }
  }

  // 菜单项逐行渲染动画 - 模拟终端文本逐行输出
  @keyframes terminal-line {
    0% {
      opacity: 0;
      transform: translateX(-2px);
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
}