/* ============================================================
   bloodysky.top · 首页 hero 全屏海报（bh-crow-02 · crow-v2）
   crow-v2 变更（唯一改动）：墨鸦重画——侧面栖枝鸦（粗喙/楔尾/站姿/单眼），
   小尺寸剪影可辨。纸墨 token / 点阵 / 文案 / 布局全部不变，仅鸦相关样式微调：
   呼吸与头/眼 transform-origin 随新构型坐标更新，新增栖枝描边样式。
   ============================================================ */

@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("./fonts/noto-serif-sc-900-subset.woff2") format("woff2");
}

:root {
  --bh-paper: #f6f1e6;
  --bh-ink: #1f1c17;
  --bh-aux: #6b6455;
  --bh-amber: #c98a2e;
  --bh-ink-soft: rgba(31, 28, 23, 0.74);
  --bh-ink-line: rgba(31, 28, 23, 0.34);
  --bh-pupil: #17140f;
  --bh-dot: rgba(31, 28, 23, 0.17);
  --bh-fade: #ffffff;
  --bh-serif: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", "SimSun", serif;
  --bh-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --bh-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* Butterfly not-top-img 导航栏流高：60px 导航 + header 自身 margin-bottom 10px（实测）；
     海报高度按此计算，导航带 + 海报恰好一屏；如主题导航高度变了，只改这一处即可 */
  --bh-nav-h: 70px;
}

html[data-theme="dark"] {
  --bh-paper: #14130f;
  --bh-ink: #f2ede1;
  --bh-aux: #a59d8c;
  --bh-amber: #ffc53d;
  --bh-ink-soft: rgba(242, 237, 225, 0.76);
  --bh-ink-line: rgba(242, 237, 225, 0.32);
  --bh-dot: rgba(242, 237, 225, 0.15);
  --bh-fade: #0d0d0d;
}

/* ============================================================
   S1 全屏海报容器
   注入口在 #body-wrap 内（header 之后、main 之前），天然通栏；
   不加圆角/阴影/外边距——纸就是海报表面，不再是一张卡片。
   ============================================================ */
.bh-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  margin: 0;
  background: var(--bh-paper);
  display: flex;
  flex-direction: column;
  /* 首屏 = 导航 + 海报；svh 兜底链（旧浏览器回落 vh） */
  min-height: calc(100vh - var(--bh-nav-h));
  min-height: calc(100svh - var(--bh-nav-h));
  padding: clamp(1.5rem, 4.2vh, 3.2rem) clamp(1.25rem, 6vw, 5.5rem) clamp(1.1rem, 3vh, 2.4rem);
}

/* ---- 点阵画布（JS 驱动；reduced-motion 下隐藏，静态层接管） ---- */
.bh-dots,
.bh-dots-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bh-dots-static {
  display: none;
}

/* ---- 底部渐隐：纸色衔接正文背景 ---- */
.bh-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 96px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bh-fade));
  pointer-events: none;
  z-index: 0;
}

/* ---- 内容区：占满海报剩余高度，滚动引导贴底 ---- */
.bh-hero-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.95fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* ---- S3 文字区 ---- */
.bh-kicker {
  margin: 0 0 0.9rem;
  font-family: var(--bh-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--bh-aux);
}

.bh-site-name {
  margin: 0 0 1.1rem;
  font-family: var(--bh-serif);
  font-weight: 900;
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  line-height: 1.14;
  letter-spacing: 0.01em;
  color: var(--bh-ink);
}

.bh-tagline {
  margin: 0 0 1.8rem;
  max-width: 30em;
  font-family: var(--bh-body);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.75;
  color: var(--bh-ink-soft);
}

.bh-entries {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.bh-entry {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-family: var(--bh-mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--bh-ink);
  text-decoration: none;
}

.bh-entry:hover,
.bh-entry:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--bh-amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.bh-entry:focus-visible {
  outline: 2px solid var(--bh-amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.bh-entry .bh-arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}

.bh-entry:hover .bh-arrow {
  transform: translateX(3px);
}

/* ---- S5 海报底部滚动引导（主入口；bh-entry-primary 同时是 hero.js 平滑滚动钩子） ---- */
.bh-scroll-cue {
  position: relative;
  z-index: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: clamp(0.9rem, 2.6vh, 2rem);
  font-family: var(--bh-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--bh-aux);
  text-decoration: none;
  border-radius: 2px;
}

.bh-scroll-cue:hover,
.bh-scroll-cue:focus-visible {
  color: var(--bh-ink);
  text-decoration: underline;
  text-decoration-color: var(--bh-amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.bh-scroll-cue:focus-visible {
  outline: 2px solid var(--bh-amber);
  outline-offset: 4px;
}

.bh-cue-arrow {
  display: inline-block;
  color: var(--bh-amber);
  animation: bh-cue-bounce 2.2s ease-in-out infinite;
}

@keyframes bh-cue-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

/* ---- S2 墨鸦：全屏海报下的主角尺寸 ----
   注意：.bh-hero-crow 必须撑满栅格列（不能 justify-self:center），
   否则 .bh-crow 的 width:100% 形成循环尺寸、退回 SVG 默认 300px */
.bh-hero-crow {
  justify-self: stretch;
}

.bh-crow {
  display: block;
  width: 100%;
  max-width: min(52vh, 470px);
  height: auto;
  margin-inline: auto;
  pointer-events: none;
}

.bh-crow .ink-a {
  fill: var(--bh-ink);
}

.bh-crow .ink-b {
  fill: var(--bh-ink);
  opacity: 0.78;
}

.bh-crow .ink-beak {
  fill: var(--bh-ink);
}

.bh-crow .ink-beak-low {
  fill: var(--bh-ink);
  opacity: 0.55;
}

.bh-crow .ink-c-stroke {
  fill: none;
  stroke: var(--bh-ink-line);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.bh-crow .iris {
  fill: var(--bh-amber);
}

.bh-crow .pupil {
  fill: var(--bh-pupil);
}

.bh-crow .catch {
  fill: #ffffff;
  opacity: 0.92;
}

.bh-crow .ink-branch {
  fill: none;
  stroke: var(--bh-ink-soft);
  stroke-width: 6.5;
  stroke-linecap: round;
}

.bh-crow-body {
  transform-box: view-box;
  transform-origin: 205px 230px;
  animation: bh-breathe 5.5s ease-in-out infinite;
}

@keyframes bh-breathe {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.012, 1.02);
  }
}

.bh-crow-head {
  transform-box: view-box;
  transform-origin: 150px 146px;
  will-change: transform;
}

.bh-eye {
  transform-box: view-box;
  transform-origin: 146px 100px;
}

.bh-blink {
  animation: bh-blink 0.13s ease-in;
}

@keyframes bh-blink {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.1);
  }
}

/* ============================================================
   移动端：海报仍占满首屏；鸦居右上，文字左下堆叠，互不重叠
   ============================================================ */
@media (max-width: 768px) {
  .bh-hero {
    padding: 1.2rem 1.15rem 1.05rem;
  }

  .bh-hero-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .bh-hero-crow {
    position: absolute;
    top: clamp(10px, 3vw, 16px);
    right: clamp(10px, 3vw, 16px);
    width: clamp(140px, 40vw, 200px);
    z-index: 1;
  }

  .bh-hero-copy {
    padding-top: calc(clamp(140px, 40vw, 200px) + 28px);
  }

  .bh-site-name {
    font-size: clamp(2.2rem, 9vw, 2.9rem);
  }

  .bh-tagline {
    font-size: 15.5px;
    margin-bottom: 1.25rem;
  }

  .bh-entries {
    gap: 0.4rem 1.1rem;
  }

  .bh-entry {
    font-size: 13px;
  }

  .bh-scroll-cue {
    font-size: 12px;
  }
}

/* ---- 文章列表锚点：避开滚动后固定的导航 ---- */
#recent-posts {
  scroll-margin-top: 72px;
}

/* ---- 无 JS：静态点阵层接管（与 reduced-motion 同构；scripting 媒体查询，Chromium 120+/Safari 17+） ---- */
@media (scripting: none) {
  .bh-dots {
    display: none;
  }

  .bh-dots-static {
    display: block;
    background-image: radial-gradient(circle, var(--bh-dot) 1.3px, transparent 1.3px);
    background-size: 26px 26px;
  }
}

@media (scripting: none) and (max-width: 768px) {
  .bh-dots-static {
    background-size: 22px 22px;
  }
}

/* ---- S6 reduced-motion：全静（静态点阵层接管，间距与 live 一致） ---- */
@media (prefers-reduced-motion: reduce) {
  .bh-dots {
    display: none;
  }

  .bh-dots-static {
    display: block;
    background-image: radial-gradient(circle, var(--bh-dot) 1.3px, transparent 1.3px);
    background-size: 26px 26px;
  }

  .bh-crow-body {
    animation: none;
  }

  .bh-cue-arrow {
    animation: none;
  }

  .bh-entry .bh-arrow {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .bh-dots-static {
    background-size: 22px 22px;
  }
}