/* ============ 纸沙博客 · 米纸 / 墨黑 / 红 / 琥珀 ============ */
:root{
  --paper:#F2E8D6;
  --paper-card:#FBF5E7;
  --ink:#141414;
  --ink-soft:#4A3F35;
  --red:#D2462F;
  --red-deep:#B00C00;
  --amber:#E8A33D;
  --line:3px;
  --font:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono","Consolas",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  height:100vh;
  /* 整屏吸附：滑一段 → 换景 → 停 */
  scroll-snap-type:y mandatory;
  overflow-y:scroll;
  scroll-behavior:smooth;
}

/* ---- Three.js：固定全屏 ---- */
#scene{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block}

/* ---- 不透明米纸遮罩 ---- */
#mask{position:fixed;inset:0;z-index:2;pointer-events:none}
#hole,#holeShadow{
  position:absolute;left:50%;top:50%;width:60vmin;height:44vmin;
  transform:translate(-50%,-50%) rotate(-1deg);
  border-radius:2px;
  background:transparent;
  transition:width .6s cubic-bezier(.22,.9,.28,1),
             height .6s cubic-bezier(.22,.9,.28,1),
             left .6s cubic-bezier(.22,.9,.28,1),
             top .6s cubic-bezier(.22,.9,.28,1),
             transform .6s cubic-bezier(.22,.9,.28,1);
}
/* 硬阴影层：整屏墨色、中心留洞，向左上偏移 7px → 只在窗口右下露出墨边 */
#holeShadow{
  box-shadow:0 0 0 9999px rgba(20,20,20,.85);
  transform:translate(-50%,-50%) rotate(-1deg) translate(-7px,-7px);
}
#hole{
  border:var(--line) solid var(--ink);
  /* 整页不透明米纸，只露窗口 */
  box-shadow:0 0 0 9999px var(--paper);
}
/* 窗口四角红色墨直角 */
#hole::before,#hole::after{
  content:"";position:absolute;width:20px;height:20px;border:4px solid var(--red);
}
#hole::before{top:-11px;left:-11px;border-right:0;border-bottom:0}
#hole::after{bottom:-11px;right:-11px;border-left:0;border-top:0}

/* ---- 吸附段落 ---- */
main{position:relative;z-index:3}
.sheet{
  height:100vh;width:100%;
  position:relative;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
}
/* 文字直接写在遮罩纸上，无卡片底 */
.block{position:absolute;width:min(380px,88vw);padding:0 28px}
.block-top{top:7vh;left:50%;transform:translateX(-50%);text-align:center;width:min(560px,90vw)}
.block-bottom{bottom:6vh}
.block-left{left:6vw;text-align:left}
.block-right{right:6vw;text-align:left}
.block-end{
  bottom:9vh;left:50%;transform:translateX(-50%);text-align:center;width:min(420px,88vw)
}

.seq{
  font-family:var(--mono);font-weight:800;font-size:13px;letter-spacing:.15em;
  color:#fff;background:var(--red);border:2px solid var(--ink);
  display:inline-block;padding:2px 10px;margin-bottom:12px;
}
h1{
  font-size:clamp(32px,7vw,64px);font-weight:900;line-height:1.1;margin:14px 0 12px;
  display:inline-block;
  border-bottom:6px solid var(--red);
}
h2{font-size:clamp(26px,5vw,38px);font-weight:900;line-height:1.2;margin-bottom:14px}
h2::after{content:"";display:block;width:56px;height:5px;background:var(--amber);margin-top:10px}
.block-right h2::after{margin-left:0}
p{font-size:15.5px;line-height:1.9;color:var(--ink);margin-bottom:10px}
ul{margin:2px 0 8px;padding-left:20px}
li{font-size:15px;line-height:2;color:var(--ink)}
li::marker{color:var(--red)}
blockquote{
  border-left:5px solid var(--red);padding:8px 14px;margin:8px 0;
  font-size:15px;font-weight:700;
}

.kicker{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.3em;
  color:var(--red-deep);margin-top:6px;
}
.sub{font-size:clamp(13px,2.4vw,16px);color:var(--ink-soft);font-weight:600;margin-top:4px}
.maple{width:70px;height:70px;fill:var(--red);filter:drop-shadow(3px 3px 0 var(--ink));animation:spin-slow 16s linear infinite}
@keyframes spin-slow{to{transform:rotate(360deg)}}
.maple.big{width:52px;height:52px}
.scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.25em;font-weight:700;color:var(--ink-soft);
}
.scroll-hint span{display:block;width:2px;height:30px;background:var(--ink);margin:7px auto 0;animation:drip 1.6s ease-in-out infinite}
@keyframes drip{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1)}}

.footer-links{margin:12px 0 6px;display:flex;justify-content:center;align-items:center;gap:12px}
.footer-links a{color:var(--ink);font-weight:800;font-size:14px}
.footer-links i{width:4px;height:4px;background:var(--ink);border-radius:50%}
.copyright{font-family:var(--mono);font-size:11px;opacity:.8;margin:0}

/* 段落淡入（吸附就位后显现） */
.block{opacity:.25;transition:opacity .5s}
.sheet.is-active .block{opacity:1}

/* ---- 宽屏：文字块与窗口垂直居中对齐，左右分区不再一高一低 ---- */
@media (min-width:1100px){
  .block-bottom{bottom:10vh;
  }
  .block-left,.block-right{
    width:min(360px,26vw);
    top:50%;bottom:auto;transform:translateY(-50%);
  }
  .block-left{left:7vw}
  .block-right{right:7vw}
  .block-end{bottom:7vh;width:min(460px,34vw)}
  .block-end h2{font-size:34px}
}

@media (max-width:640px){
  .block{width:auto;left:0;right:0;padding:0 24px}
  .block-top, .block-end{transform:none}
  .block-bottom{bottom:3vh}
  .block p{font-size:14.5px;line-height:1.8}
  .block h2{font-size:26px}
}
/* 截图验证：钉住目标屏，其余隐藏 */
body.shot-preview{scroll-snap-type:none;overflow:hidden}
body.shot-preview .sheet:not(.preview-pin){display:none}
.sheet.preview-pin{position:fixed;inset:0;height:100vh}
@media (prefers-reduced-motion:reduce){
  body{scroll-snap-type:none}
  .maple,.scroll-hint span{animation:none}
}