@charset "UTF-8";
/*
 * 首页 main.main-container.index：沿图片外轮廓（圆角矩形周长）移动的七彩描边
 * 由 SVG rect + stroke-dashoffset 实现，随容器宽高比拉伸；非中心旋转 conic
 * 外围：呼吸灯式泛光（filter + 柔光层）
 */

html body .main-container.index .swiper .swiper-item,
html body .main-container.index #right.main-right .document-widget-ad__link,
html body .main-container.index #right.main-right .recent .ul li a .thumnbnail,
html body .main-container.index #right.main-right .update .ul li a .thumnbnail {
  position: relative;
  isolation: isolate;
}

/*
 * 注意：勿在悬停时把 .article-list / 大容器改为 overflow:visible，
 * 否则与默认 overflow:hidden 切换会改变 BFC 与外边距折叠，出现整块内容上移/下移。
 * 光晕仅在缩略图格内溢出即可。
 */

html body .main-container.index .i-article-thumb:has(a.i-article-thumb__link:hover),
html body .main-container.index .i-article-thumb:has(a.i-article-thumb__link:focus-visible) {
  overflow: visible;
}

html body .main-container.index .i-article-thumb a.i-article-thumb__link {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

html body .main-container.index .i-article-thumb a.i-article-thumb__link:hover,
html body .main-container.index .i-article-thumb a.i-article-thumb__link:focus-visible {
  overflow: visible;
}

html body .main-container.index .i-article-thumb a.i-article-thumb__link img {
  z-index: 1;
}

/* 外围柔光层（呼吸 + 轻微缩放） */
html body .main-container.index .i-article-thumb a.i-article-thumb__link::after {
  content: "";
  position: absolute;
  inset: -22px;
  z-index: 0;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse 72% 68% at 50% 48%,
    rgba(0, 212, 255, 0.28) 0%,
    rgba(176, 38, 255, 0.14) 38%,
    rgba(255, 20, 147, 0.08) 55%,
    transparent 72%
  );
  transform: scale(0.98);
  transition: opacity 0.3s ease;
  animation: document-perimeter-ambient-pulse 3.9s ease-in-out infinite;
  animation-play-state: paused;
}

html body .main-container.index .i-article-thumb a.i-article-thumb__link:hover::after,
html body .main-container.index .i-article-thumb a.i-article-thumb__link:focus-visible::after {
  opacity: 1;
  animation-play-state: running;
}

/* 覆盖在图上的 SVG 外框 */
html body .main-container.index .document-perimeter-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 14;
  pointer-events: none;
  opacity: 0;
  filter: none;
  transition: opacity 0.22s ease;
  overflow: visible;
  box-sizing: border-box;
}

html body .main-container.index .swiper .swiper-item .document-perimeter-svg {
  z-index: 102;
}

/* 沿 pathLength=100 的周长跑动；悬停才播放 */
@keyframes document-perimeter-dash {
  to {
    stroke-dashoffset: -100;
  }
}

/* 描边外围：呼吸灯式 drop-shadow 泛光 */
@keyframes document-perimeter-halo-breathe {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
      drop-shadow(0 0 12px rgba(0, 212, 255, 0.42))
      drop-shadow(0 0 28px rgba(176, 38, 255, 0.32))
      drop-shadow(0 0 48px rgba(255, 20, 147, 0.2))
      drop-shadow(0 0 72px rgba(0, 212, 255, 0.11))
      drop-shadow(0 0 96px rgba(176, 38, 255, 0.07));
  }

  50% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 1))
      drop-shadow(0 0 22px rgba(0, 212, 255, 0.68))
      drop-shadow(0 0 48px rgba(176, 38, 255, 0.52))
      drop-shadow(0 0 78px rgba(255, 20, 147, 0.38))
      drop-shadow(0 0 108px rgba(0, 212, 255, 0.24))
      drop-shadow(0 0 140px rgba(176, 38, 255, 0.14));
  }
}

@keyframes document-perimeter-ambient-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.92;
    transform: scale(1.07);
  }
}

html body .main-container.index .document-perimeter-svg__rect {
  animation: document-perimeter-dash 2.85s linear infinite;
  animation-play-state: paused;
}

html body .main-container.index .i-article-thumb a.i-article-thumb__link:hover .document-perimeter-svg,
html body .main-container.index .i-article-thumb a.i-article-thumb__link:focus-visible .document-perimeter-svg,
html body .main-container.index .swiper .swiper-item:hover .document-perimeter-svg {
  opacity: 1;
  animation: document-perimeter-halo-breathe 3.85s ease-in-out infinite;
}

html body .main-container.index .i-article-thumb a.i-article-thumb__link:hover .document-perimeter-svg__rect,
html body .main-container.index .i-article-thumb a.i-article-thumb__link:focus-visible .document-perimeter-svg__rect,
html body .main-container.index .swiper .swiper-item:hover .document-perimeter-svg__rect {
  animation-play-state: running;
}

html body .main-container.index .i-article-thumb a.i-article-thumb__link img:hover {
  transform: none;
}

/* 轮播：底层柔光 + 悬停溢出 */
html body .main-container.index .swiper .swiper-slide .swiper-item img {
  position: relative;
  z-index: 1;
}

html body .main-container.index .swiper .swiper-slide .swiper-item::after {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: 0;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse 75% 70% at 50% 45%,
    rgba(0, 212, 255, 0.26) 0%,
    rgba(176, 38, 255, 0.12) 40%,
    rgba(255, 20, 147, 0.07) 58%,
    transparent 74%
  );
  transform: scale(0.97);
  transition: opacity 0.3s ease;
  animation: document-perimeter-ambient-pulse 4s ease-in-out infinite;
  animation-play-state: paused;
}

html body .main-container.index .swiper .swiper-slide .swiper-item:hover::after {
  opacity: 1;
  animation-play-state: running;
}

/*
 * 侧栏：勿用 #right a:has(img) ——「热门资源」等为左图右文整行链接，伪元素会铺满整行，圆锥光带会落在文字区。
 * 仅：侧栏广告整图链接 + 列表内 .thumnbnail 缩略图盒。
 */
html body .main-container.index #right.main-right .document-widget-ad__link {
  display: block;
  overflow: hidden;
  border-radius: 8px;
}

html body .main-container.index #right.main-right .recent .ul li a:hover .thumnbnail,
html body .main-container.index #right.main-right .update .ul li a:hover .thumnbnail,
html body .main-container.index #right.main-right .recent .ul li a:focus-visible .thumnbnail,
html body .main-container.index #right.main-right .update .ul li a:focus-visible .thumnbnail {
  overflow: visible;
}

@keyframes document-sidebar-halo-breathe {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.78))
      drop-shadow(0 0 14px rgba(0, 212, 255, 0.36))
      drop-shadow(0 0 32px rgba(176, 38, 255, 0.24))
      drop-shadow(0 0 52px rgba(255, 20, 147, 0.14))
      drop-shadow(0 0 76px rgba(0, 212, 255, 0.08));
  }

  50% {
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.95))
      drop-shadow(0 0 24px rgba(0, 212, 255, 0.55))
      drop-shadow(0 0 48px rgba(176, 38, 255, 0.38))
      drop-shadow(0 0 78px rgba(255, 20, 147, 0.26))
      drop-shadow(0 0 108px rgba(0, 212, 255, 0.16));
  }
}

html body .main-container.index #right.main-right .document-widget-ad__link::before,
html body .main-container.index #right.main-right .recent .ul li a .thumnbnail::before,
html body .main-container.index #right.main-right .update .ul li a .thumnbnail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 12;
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  filter: none;
  transition: opacity 0.22s ease;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 252deg,
    #ff1493 252deg 258deg,
    #ff6600 258deg 264deg,
    #ffcc00 264deg 270deg,
    #39ff14 270deg 276deg,
    #00e5a8 276deg 282deg,
    #00d4ff 282deg 288deg,
    #3388ff 288deg 294deg,
    #b026ff 294deg 300deg,
    #ff00aa 300deg 306deg,
    transparent 306deg 360deg
  );
  transform-origin: center;
  animation: document-sidebar-frame-spin 2.75s linear infinite,
    document-sidebar-halo-breathe 4s ease-in-out infinite;
  animation-play-state: paused, paused;
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 2.5px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff calc(100% - 2.5px));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

html body .main-container.index #right.main-right .recent .ul li a .thumnbnail::before,
html body .main-container.index #right.main-right .update .ul li a .thumnbnail::before {
  border-radius: 5px;
}

html body .main-container.index #right.main-right .document-widget-ad__link img,
html body .main-container.index #right.main-right .recent .ul li a .thumnbnail img,
html body .main-container.index #right.main-right .update .ul li a .thumnbnail img {
  position: relative;
  z-index: 11;
}

@keyframes document-sidebar-frame-spin {
  to {
    transform: rotate(360deg);
  }
}

html body .main-container.index #right.main-right .document-widget-ad__link::after,
html body .main-container.index #right.main-right .recent .ul li a .thumnbnail::after,
html body .main-container.index #right.main-right .update .ul li a .thumnbnail::after {
  content: "";
  position: absolute;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.3s ease;
  animation: document-perimeter-ambient-pulse 4.1s ease-in-out infinite;
  animation-play-state: paused;
}

html body .main-container.index #right.main-right .document-widget-ad__link::after {
  inset: -16px;
  border-radius: 12px;
  background: radial-gradient(
    ellipse 70% 68% at 50% 48%,
    rgba(0, 212, 255, 0.22) 0%,
    rgba(176, 38, 255, 0.1) 42%,
    transparent 70%
  );
}

html body .main-container.index #right.main-right .recent .ul li a .thumnbnail::after,
html body .main-container.index #right.main-right .update .ul li a .thumnbnail::after {
  inset: -10px;
  border-radius: 8px;
  background: radial-gradient(
    ellipse 72% 68% at 50% 48%,
    rgba(0, 212, 255, 0.22) 0%,
    rgba(176, 38, 255, 0.11) 42%,
    transparent 70%
  );
}

html body .main-container.index #right.main-right .document-widget-ad__link:hover::before,
html body .main-container.index #right.main-right .document-widget-ad__link:focus-visible::before,
html body .main-container.index #right.main-right .recent .ul li a:hover .thumnbnail::before,
html body .main-container.index #right.main-right .update .ul li a:hover .thumnbnail::before,
html body .main-container.index #right.main-right .recent .ul li a:focus-visible .thumnbnail::before,
html body .main-container.index #right.main-right .update .ul li a:focus-visible .thumnbnail::before {
  opacity: 1;
  animation-play-state: running, running;
}

html body .main-container.index #right.main-right .document-widget-ad__link:hover::after,
html body .main-container.index #right.main-right .document-widget-ad__link:focus-visible::after,
html body .main-container.index #right.main-right .recent .ul li a:hover .thumnbnail::after,
html body .main-container.index #right.main-right .update .ul li a:hover .thumnbnail::after,
html body .main-container.index #right.main-right .recent .ul li a:focus-visible .thumnbnail::after,
html body .main-container.index #right.main-right .update .ul li a:focus-visible .thumnbnail::after {
  opacity: 1;
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  html body .main-container.index .document-perimeter-svg__rect {
    animation: none;
  }

  html body .main-container.index .document-perimeter-svg {
    opacity: 0 !important;
    filter: none !important;
    animation: none !important;
  }

  html body .main-container.index .i-article-thumb a.i-article-thumb__link::after,
  html body .main-container.index .swiper .swiper-slide .swiper-item::after,
  html body .main-container.index #right.main-right .document-widget-ad__link::after,
  html body .main-container.index #right.main-right .recent .ul li a .thumnbnail::after,
  html body .main-container.index #right.main-right .update .ul li a .thumnbnail::after {
    animation: none !important;
    opacity: 0 !important;
  }

  html body .main-container.index #right.main-right .document-widget-ad__link::before,
  html body .main-container.index #right.main-right .recent .ul li a .thumnbnail::before,
  html body .main-container.index #right.main-right .update .ul li a .thumnbnail::before {
    animation: none !important;
    opacity: 0 !important;
    filter: none !important;
  }
}