*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',sans-serif;
  background:#000;
  color:#fff;
  overflow-x:hidden;
}

/* header - 滚动后隐藏 */
.site-header{
  position:fixed;top:30px;width:100%;text-align:center;z-index:20;
  transition:opacity .4s ease, transform .4s ease;
  opacity:1;
  transform:translateY(0);
  cursor:pointer;
}
.site-header.hidden-header{
  opacity:0;
  transform:translateY(-20px);
  pointer-events:none;
}
.site-header h1{
  font-weight:600;font-size:2.4rem;letter-spacing:1px;text-transform:lowercase;
}

/* post - 添加滚动吸附 */
body, html{
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

.post{
  height:100vh;width:100%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  background-attachment:fixed;
  background-size:auto 100%;
  background-repeat:repeat-x;
  background-position:center;
  position:relative;
  transition:opacity .45s;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* nav arrows - 纯箭头设计 */
.nav-arrows{
  position:fixed;top:60%;;width:100%;
  text-align:center;z-index:25;pointer-events:none;
}
.nav-btn{
  background:transparent;
  border:0;
  color:#fff;
  font-size:4.2rem;
  padding:8px 16px;
  margin:0 20px;
  cursor:pointer;
  pointer-events:auto;
  transition:transform .2s ease, opacity .2s ease;
  opacity:1;
}
.nav-btn:hover{
  transform:scale(1.2);
  opacity:1;
}

/* 按钮禁用状态 */
.nav-btn:disabled{
  opacity:0.2;
  cursor:not-allowed;
  pointer-events:none;
}

/* show/hide helpers */
.hidden{opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .3s,transform .3s}
.visible{opacity:1;transform:translateY(0);pointer-events:auto;transition:opacity .2s}

/* footer */
.footer{
  position:fixed;bottom:10px;right:20px;z-index:20;
  opacity:.8;font-size:.9rem;
}
.footer a{color:#fff;text-decoration:none}

/* loader */
.loading-spinner{
  position:fixed;bottom:100px;left:50%;
  transform:translateX(-50%);
  border:4px solid rgba(255,255,255,.25);
  border-top:4px solid white;
  border-radius:50%;
  width:36px;height:36px;
  animation:spin 1s linear infinite;
  display:none;z-index:30;
}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}

/* fade */
.fade-in{animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}