/* ==========================================================================
   首页：全屏字符坠落 + 正中标题 + 最近文章
   ========================================================================== */

:root{ --bg:#0a0705; --ink:#f8ecda }
*,*::before,*::after{ box-sizing:border-box }

html,body{
  margin:0; height:100%;
  background:var(--bg); overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

#stage{
  position:fixed; inset:0; display:block;
  width:100%; height:100%;
  cursor:crosshair; touch-action:none;
}

.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(118% 88% at 50% 46%,transparent 42%,
             rgba(7,4,2,.38) 78%,rgba(3,2,1,.82) 100%);
}

/* 整层不吃鼠标事件，好让特效照常响应；只有链接单独打开 */
.hero{
  position:fixed; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  padding:2.5rem 6vw;
  pointer-events:none;
  overflow:hidden;
}
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 44% at 50% 50%,
             rgba(10,7,5,.9) 0%,rgba(10,7,5,.66) 46%,rgba(10,7,5,0) 78%);
}
.hero__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:2rem; width:100%; max-width:32rem; text-align:center;
}

.hero__title{
  margin:0; font-weight:600; line-height:1.1; color:var(--ink);
  font-family:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","SimSun",serif;
  font-size:clamp(2.4rem,7vw,4.6rem);
  letter-spacing:.18em; text-indent:.18em;
  text-shadow:
    0 0 1px rgba(255,222,176,.85),
    0 0 22px rgba(255,158,66,.34),
    0 0 72px rgba(255,110,40,.16),
    0 3px 0 rgba(0,0,0,.55);
  animation:rise .95s cubic-bezier(.16,.84,.24,1);
}

/* ------------------------------------------------------------ 最近文章 */
.recent{ width:100%; animation:rise .95s cubic-bezier(.16,.84,.24,1) }
.recent__label{
  margin:0 0 .9rem;
  font-family:"Songti SC","Noto Serif CJK SC",serif;
  font-size:.75rem; letter-spacing:.5em; text-indent:.5em;
  color:#8c8070;
}
.recent__list{ list-style:none; margin:0; padding:0 }
.recent__item{ border-top:1px solid rgba(248,236,218,.075) }
.recent__item:last-child{ border-bottom:1px solid rgba(248,236,218,.075) }
.recent__a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.7rem .4rem;
  color:#ded1bd; border-radius:6px;
  pointer-events:auto;                       /* 链接单独恢复鼠标事件 */
  transition:color .2s,background .2s;
}
.recent__a:hover{ color:#ffd9a0; background:rgba(255,200,130,.06) }
.recent__t{
  font-size:1rem; line-height:1.5; letter-spacing:.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.recent__d{
  flex-shrink:0;
  font-family:"Cascadia Mono",Consolas,monospace;
  font-size:.75rem; color:#7d7262;
}

/* ------------------------------------------------------------ 全部文章 */
.hero__more{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem 1.15rem;
  border:1px solid rgba(248,236,218,.13); border-radius:999px;
  font-size:.84rem; letter-spacing:.2em; text-indent:.2em;
  color:#a2937f;
  pointer-events:auto;
  transition:color .22s,border-color .22s,background .22s;
}
.hero__more:hover{
  color:#ffd9a0; border-color:rgba(255,200,130,.45);
  background:rgba(255,200,130,.07);
}
.hero__more span{ transition:transform .22s }
.hero__more:hover span{ transform:translateX(5px) }

/* 刻意不使用 animation-fill-mode: both / from{opacity:0}：
   那会让「内容可见」依赖于动画必然执行，动画一旦没跑内容就永久隐身。
   这里默认状态就是可见的，动画只负责入场动效。 */
@keyframes rise{
  from{ opacity:.01; transform:translateY(1.2rem) }
  to{ opacity:1; transform:none }
}

@media (max-height:640px){
  .hero{ padding:1.4rem 6vw }
  .hero__inner{ gap:1.15rem }
  .hero__title{ font-size:clamp(1.9rem,5vw,3rem) }
  .recent__a{ padding:.5rem .35rem }
  .recent__t{ font-size:.94rem }
}
@media (max-width:560px){
  .hero{ padding:1.6rem 1.2rem }
  .recent__label{ letter-spacing:.36em; text-indent:.36em }
  .recent__t{ font-size:.94rem }
}
@media (prefers-reduced-motion:reduce){
  .hero__title,.recent{ animation:none }
}