/* Projects page only: refine the shared EndSection without changing its DOM contract. */
body:has(#projects) #end-section {
  isolation: isolate;
  overflow: hidden;
  color: #fff;
}

body:has(#projects) #end-section #end-section-outer {
  overflow: hidden;
  background: transparent;
}

body:has(#projects) #end-section #end-section-outer::before,
body:has(#projects) #end-section #end-section-outer::after {
  position: absolute;
  z-index: 0;
  inset: -8%;
  content: "";
  pointer-events: none;
}

body:has(#projects) #end-section #end-section-outer::before {
  background: linear-gradient(
    180deg,
    /* 与全站唯一强调色 --color-blue #1a2ffb 对齐；上下两端各取一档明度做纵向渐变 */
    #2436fb 0%,
    #1a2ffb 56%,
    #1526d6 100%
  );
  backdrop-filter: blur(3.6px) saturate(0.82);
}

body:has(#projects) #end-section #end-section-outer::after {
  background:
    radial-gradient(
      ellipse at 68% 34%,
      rgba(107, 61, 242, 0.2),
      transparent 52%
    ),
    radial-gradient(
      circle at 25% 68%,
      rgba(116, 214, 255, 0.11),
      transparent 42%
    );
  opacity: 0.66;
  transform: translate3d(-3%, 2%, 0) scale(0.96);
  animation: projects-end-ambient 18s cubic-bezier(0.45, 0, 0.55, 1)
    infinite alternate;
  animation-play-state: paused;
}

body:has(#projects)
  #end-section.is-projects-end-active
  #end-section-outer::after {
  animation-play-state: running;
}

body:has(#projects) #end-section #end-section-inner {
  z-index: 1;
  overflow: hidden;
}

body:has(#projects) #end-section #end-section-inner::before {
  display: none;
}

body:has(#projects) #end-section #end-section-content {
  z-index: 2;
  top: 45%;
  left: 50%;
  width: min(88vw, 54rem);
  text-align: center;
  transform: translate(-50%, -50%) !important;
}

body:has(#projects) #end-section #end-section-content-crosses,
body:has(#projects) #end-section #end-section-title-top-decoration,
body:has(#projects) #end-section #end-section-title-bottom-left-decoration,
body:has(#projects) #end-section #end-section-title-bottom-right-decoration {
  display: none !important;
}

body:has(#projects) #end-section #end-section-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-family:
    Satoshi, "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial,
    sans-serif;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 400;
  letter-spacing: 0.01em;
}

body:has(#projects) #end-section #end-section-subtitle-text > div {
  overflow: visible !important;
}

body:has(#projects) #end-section #end-section-title {
  --font-size: clamp(76px, 10vw, 132px);

  width: fit-content;
  margin: 0.22em auto 0;
  color: #fff;
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.055em;
}

body:has(#projects) #end-section #end-section-title-link {
  position: relative;
  display: inline-block;
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

body:has(#projects) #end-section .end-section-title-link-line,
body:has(#projects) #end-section .end-section-title-link-word {
  height: auto !important;
  overflow: visible;
}

body:has(#projects)
  #end-section
  .end-section-title-link-word
  .char-wrapper {
  top: 0;
  height: 1em;
  transform: none !important;
}

body:has(#projects)
  #end-section
  .end-section-title-link-word
  .char-wrapper
  .char:first-child {
  display: none !important;
}

body:has(#projects)
  #end-section
  .end-section-title-link-word
  .char-wrapper
  .char:last-child {
  float: none;
  transform: none !important;
}

body:has(#projects) #end-section #end-section-title-link::after {
  position: absolute;
  right: 0.04em;
  bottom: -0.14em;
  left: 0.04em;
  height: 2px;
  content: "";
  background: rgba(255, 255, 255, 0.9);
  transform: scaleX(0.24);
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

body:has(#projects) #end-section #end-section-title-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.86);
  outline-offset: 0.12em;
}

body:has(#projects) #end-section #end-bottom {
  z-index: 2;
  width: auto;
  min-width: 0;
  height: auto;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  box-shadow: none;
  backdrop-filter: none;
}

body:has(#projects) #end-section #end-bottom-text {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px;
  letter-spacing: 0.06em;
}

body:has(#projects) #end-section .end-bottom-arrow {
  opacity: 0.72;
  filter: invert(1);
}

@media (hover: hover) and (pointer: fine) {
  body:has(#projects) #end-section #end-section-title-link:hover {
    text-shadow: 0 0.16em 0.56em rgba(7, 14, 94, 0.16);
    transform: translate3d(0.06em, 0, 0);
  }

  body:has(#projects) #end-section #end-section-title-link:hover::after {
    transform: scaleX(1);
  }
}

@keyframes projects-end-ambient {
  0% {
    opacity: 0.58;
    transform: translate3d(-3%, 2%, 0) scale(0.96);
  }

  100% {
    opacity: 0.9;
    transform: translate3d(4%, -2%, 0) scale(1.05);
  }
}

@media (max-width: 812px) {
  body:has(#projects) #end-section #end-section-content {
    top: 42%;
    width: calc(100vw - 48px);
  }

  body:has(#projects) #end-section #end-section-title {
    --font-size: clamp(58px, 17vw, 88px);
  }

  body:has(#projects) #end-section #end-section-subtitle {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#projects) #end-section #end-section-outer::after {
    animation: none !important;
    transform: none;
  }

  body:has(#projects) #end-section #end-section-title-link,
  body:has(#projects) #end-section #end-section-title-link::after {
    transition-duration: 0.01ms !important;
  }
}