@import "./88-31-button.css";

header {
  & h1 {
    transition: text-shadow 0.25s ease-in-out, color 0.25s ease-in-out;
    &:hover {
      color: transparent;
      text-shadow: var(--color-taxodium-purple) -5px -5px 1px,
                   var(--color-taxodium-yellow) 10px 10px 5px;
    }
  }
}

h2 {
  text-align: center;
  width: 100%;
}

/* 文章标题的子标题 */
.sitemap-subtitle {
  color: var(--color-text-secondary);
  color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));
  font-size: 0.85rem;
}

/* 标题下的一句话 */
header + p {
  text-align: center;
  color: var(--color-text-secondary);
  color: light-dark(var(--color-text-secondary), var(--dark-color-text-secondary));
}

/* 移除 postamble 的内容 */
#postamble::before {
  display: none;
}

.quick-access {
  text-align: center;
  line-height: 1;

  a {
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: transform 0.2s;

    &:active {
      transform: scale(0.9);
    }

    &.anime {
      filter: grayscale(1) brightness(0.75);
      transition: all 0.8s;
    }

    &.black-hole {
      padding-inline: 0.5rem;
      cursor: none;
    }

    &:hover {
      background: unset;

      &.changelog {
        transform-origin: center bottom;
        animation: jelly 0.7s;
      }

      &.music-rank {
        animation: infinite play-cd 1s linear;
        transform-origin: 48% 45%;
      }

      &.black-hole {
        cursor: none;

        &::before {
          cursor: none;
        }
      }

      &.anime {
        filter: grayscale(0) brightness(120%);
      }

      &.tools {
        transform-origin: center center;
        animation: infinite heat-hammer 0.8s linear;
      }
    }

    /* 扩大 icon 的 hover 范围 */
    &::before {
      content: "";
      position: absolute;
      top: var(--extra-active-area-size);
      left: var(--extra-active-area-size);
      right: var(--extra-active-area-size);
      bottom: var(--extra-active-area-size);
      cursor: pointer;
    }

    &::after {
      display: none !important;
    }
  }
}

@keyframes jelly {
  0% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.25, 0.75);
  }
  40% {
    transform: scale(0.75, 1.25);
  }
  50% {
    transform: scale(1.15, 0.85);
  }
  65% {
    transform: scale(0.95, 1.05);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes play-cd {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes heat-hammer {
  0% {
    transform: rotateZ(-25deg);
  }
  100% {
    transform: rotateZ(15deg);
  }
}

@keyframes unroll {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

#content ul {
  padding-inline-start: 0;
  counter-reset: step;
  counter-set: step -1;
  transition: background 0.25s ease-in-out;

  li {
    counter-increment: step;
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "chapter page";
    gap: 0 0.5rem;
    margin-block: 0.5rem;

    &::after {
      grid-area: page;
      content: counter(step);
      color: var(--color-border);
      color: light-dark(var(--color-border), var(--dark-color-border));
      font-size: 1.2rem;
      text-align: end;
    }

    & a {
      grid-area: chapter;
      overflow: hidden;
      position: relative;

      &::after {
        position: absolute;
        content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
                 ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
                 ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
        text-align: end;
        padding-left: 0.5rem;
        color: var(--color-border);
        color: light-dark(var(--color-border), var(--dark-color-border));
      }
    }

    .timestamp {
      display: none;
    }
  }
}