/* 博客首页背景、导航与 3D 卡片 */
@keyframes dcAuroraA {
  0% {
    background-position:12% 18%,88% 82%
  }
  50% {
    background-position:26% 34%,72% 64%
  }
  100% {
    background-position:12% 18%,88% 82%
  }
}

@keyframes dcAuroraB {
  0% {
    background-position:78% 28%,22% 74%
  }
  50% {
    background-position:64% 46%,36% 58%
  }
  100% {
    background-position:78% 28%,22% 74%
  }
}

@keyframes dcCardGlow {
  0% {
    box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 rgba(84,51,255,0)
  }
  50% {
    box-shadow:0 12px 30px rgba(0,0,0,.34),0 0 24px rgba(84,51,255,.38)
  }
  100% {
    box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 rgba(84,51,255,0)
  }
}

.dc-home #article-list {
  display:none!important
}

.dc-home .app-wrapper {
  position:relative;
  isolation:isolate
}

.dc-home .app-wrapper::before,.dc-home .app-wrapper::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  mix-blend-mode:lighten
}

.dc-home .app-wrapper::before {
  background-image:radial-gradient(52rem 40rem at 50% 50%,rgba(36,198,220,.42),rgba(36,198,220,0) 62%),radial-gradient(52rem 40rem at 50% 50%,rgba(84,51,255,.46),rgba(84,51,255,0) 64%);
  background-repeat:no-repeat;
  animation:dcAuroraA 18s ease-in-out infinite
}

.dc-home .app-wrapper::after {
  background-image:radial-gradient(46rem 34rem at 50% 50%,rgba(255,0,153,.34),rgba(255,0,153,0) 62%),radial-gradient(42rem 30rem at 50% 50%,rgba(36,198,220,.28),rgba(36,198,220,0) 64%);
  background-repeat:no-repeat;
  animation:dcAuroraB 26s ease-in-out infinite
}

.dc-home-nav {
  margin:2rem 0 0
}

.dc-home-nav>h2 {
  font-size:1.35rem!important;
  margin:0 0 1rem!important
}

.dc-home-nav-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1.1rem;
  align-items:stretch;
  perspective:380px
}

.dc-home-nav-card {
  position:relative;
  display:block;
  padding:0;
  border-radius:1rem;
  background:var(--background-secondary);
  border:1px solid transparent;
  text-decoration:none!important;
  transform-style:preserve-3d;
  transform:translateY(var(--ty,0px)) scale(var(--sc,1)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .18s ease-out,border-color .25s ease;
  animation:dcCardGlow 6s ease-in-out infinite
}

.dc-home-nav-card:hover {
  --ty:-10px;
  --sc:1.045;
  border-color:var(--text-accent);
  animation-play-state:paused;
  box-shadow:0 24px 52px rgba(0,0,0,.45),0 0 34px rgba(84,51,255,.45)
}

.dc-home-nav-card::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 62%);
}

.dc-home-nav-card:hover::after {
  opacity:1
}

.dc-home-nav-inner {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:1.5rem 2.2rem
}

.dc-home-nav-title {
  display:block;
  min-height:1.4em;
  font-size:1.15rem;
  font-weight:700;
  color:var(--text-bright);
  line-height:1.2
}

.dc-home-nav-card:hover .dc-home-nav-title {
  color:var(--text-accent)
}

.dc-home-nav-desc {
  display:block;
  font-size:.9rem;
  color:var(--text-dim);
  line-height:1.6
}

@media (max-width:640px) {
  .dc-home-nav-grid {
    grid-template-columns:1fr
  }
}

@media (prefers-reduced-motion:reduce) {
  .dc-home .app-wrapper::before,.dc-home .app-wrapper::after {
    animation:none
  }
  .dc-home-nav-card {
    animation:none;
    transform:none!important
  }
  .dc-home-nav-card::after {
    display:none
  }
  .dc-home-nav-inner {
    transform:none!important
  }
}

/* 搜索按钮保持导航卡片的尺寸与字体 */
button.dc-home-nav-card {
  width:100%;
  font:inherit;
  text-align:left;
  cursor:pointer
}