/* 首页材质层：静态画布纹理、雾面玻璃；不参与布局与滚动计算。 */
.story-home {
  --canvas-grain: url('/workflow-assets/canvas-grain.svg');
  background-color: #090909;
  background-image:
    var(--canvas-grain),
    radial-gradient(circle, rgb(255 255 255 / 5%) .7px, transparent .9px);
  background-size: 160px 160px, 32px 32px;
  background-position: 0 0, 16px 16px;
}

/* 功能卡共用一张点阵画布；背景不参与卡片位置与连线测量。 */
.story-home .overview-board {
  --board-pad: clamp(18px, .9vw, 32px);
  --board-grid: clamp(22px, 1.05vw, 40px);
  --board-dot: clamp(.85px, .035vw, 1.35px);
}

.story-home .overview-board::before {
  content: '';
  position: absolute;
  top: calc(var(--board-card-top, 0px) - var(--board-pad));
  right: calc(var(--board-card-right, 0px) - var(--board-pad));
  bottom: calc(var(--board-card-bottom, 0px) - var(--board-pad));
  left: calc(var(--board-card-left, 0px) - var(--board-pad));
  z-index: 0;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: clamp(18px, 1vw, 34px);
  background-color: #111111;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 21%) var(--board-dot), transparent calc(var(--board-dot) + .45px)),
    linear-gradient(135deg, #171717, #101010 70%);
  background-size: var(--board-grid) var(--board-grid), 100% 100%;
  background-position: center;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%), 0 18px 60px rgb(0 0 0 / 22%);
  pointer-events: none;
}

@media (max-width: 760px) {
  .story-home .overview-board {
    --board-pad: 10px;
    --board-grid: 18px;
    --board-dot: .8px;
  }
  .story-home .overview-board::before { border-radius: 14px; }
}

/* The full-width sticky bar must cover every card passing behind it. */
.story-home .site-header {
  background-color: #080808;
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 颗粒绘制在容器背景上方、媒体下方，照片与视频保留原色和清晰度。 */
.story-home :is(.mini-card, .glass-card) {
  isolation: isolate;
  background:
    linear-gradient(132deg,
      rgb(66 66 66 / 57%) 0%,
      rgb(38 38 38 / 65%) 38%,
      rgb(23 23 23 / 70%) 74%,
      rgb(42 42 42 / 53%) 100%);
  border-color: rgb(255 255 255 / 16%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 11%),
    inset 0 -1px 0 rgb(255 255 255 / 3%),
    0 12px 28px rgb(0 0 0 / 24%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.story-home :is(.mini-card, .glass-card)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--canvas-grain);
  background-size: 128px 128px;
  background-clip: padding-box;
  opacity: .58;
  filter: none;
  clip-path: none;
  pointer-events: none;
}

/* 外溢的发光会冲淡磨砂边缘；不裁切容器，以保留连接圆环。 */
.story-home .glass-card::after {
  display: none;
}

.story-home .mini-card:hover {
  border-color: rgb(255 255 255 / 35%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    inset 0 -1px 0 rgb(255 255 255 / 4%),
    0 12px 28px rgb(0 0 0 / 28%);
}

.story-home .quiet-pill {
  background: rgb(255 255 255 / 3%);
  border-color: rgb(255 255 255 / 13%);
}

/* 过渡中的卡片及其标签使用静态磨砂，禁止移动背景采样产生矩形残影。 */
.story-home .travelling-reference,
.story-home .card-flight,
.story-home .card-flight .flight-copy,
.story-home .travelling-reference :is(.reference-overlay span, .drawing-tools),
.story-home .card-flight :is(.reference-overlay span, .drawing-tools) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 只有纹理图层有圆角裁切，卡片上的连接端点仍完整可见。 */
.story-home :is(.travelling-reference, .card-flight .flight-copy)::before {
  border-radius: inherit;
  clip-path: none;
}

@media (prefers-reduced-transparency: reduce) {
  .story-home :is(.mini-card, .glass-card) {
    background: linear-gradient(132deg, #292929, #1b1b1b 74%, #242424);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}