/* ===========================================================================
   云梭下载器 — motion.css
   ---------------------------------------------------------------------------
   本文件只定义自己的三个块：
     .texture         整页静态点阵底纹（纯 CSS，多层 radial-gradient）
     .texture__canvas hero 内“解码”画布（绘制逻辑在 assets/js/main.js）
     .reveal / .is-visible  入场动效（隐藏态只能由 html.js 打开）
   加载顺序在最后（theme→fonts→base→layout→sections→motion），因此这里只
   补自己的块，不覆盖任何他人样式。断点只用 640px / 900px / 1180px。
   约束：不使用强制优先级标记、不使用 id 选择器、无外部 URL、无关键帧动画
   （契约要求 .texture 为“静态”底纹；全部动态表现由 canvas 承担）。
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1) 整页静态点阵底纹 —— 无 JS 也成立，pointer-events: none 不拦截交互
   --------------------------------------------------------------------------- */
.texture {
  position: fixed;
  inset: 0;
  z-index: var(--z-texture);
  pointer-events: none;
  opacity: 0.5; /* 契约上限 <= .5，实际点位更淡，不影响正文对比度 */
  background-color: transparent;
  background-image:
    /* 主点阵：24px 网格上的一枚 1px 圆点 */
    radial-gradient(circle at 1px 1px, rgba(16, 26, 61, 0.2) 1px, transparent 1.3px),
    /* 细网点：8px 网格，制造“纸面颗粒” */
    radial-gradient(circle at 1px 1px, rgba(16, 26, 61, 0.08) 1px, transparent 1px),
    /* 极淡的品牌蓝光晕，只在页首偏左出现 */
    radial-gradient(900px 520px at 18% -10%, rgba(43, 92, 230, 0.05), transparent 72%);
  background-size: 24px 24px, 8px 8px, 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
  background-position: 0 0, 4px 4px, 0 0;
}

/* ---------------------------------------------------------------------------
   2) hero 解码画布：铺满父容器（.hero__texture 由 sections.css 定位）
   --------------------------------------------------------------------------- */
.texture__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------------
   3) 入场动效
   --------------------------------------------------------------------------- */
/* 无 JS 时 .reveal 不带任何样式 —— 内容默认完全可见 */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ---------------------------------------------------------------------------
   4) 窄屏降级：减少底纹层数，降低绘制成本
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .texture {
    background-image:
      radial-gradient(circle at 1px 1px, rgba(16, 26, 61, 0.2) 1px, transparent 1.3px),
      radial-gradient(700px 420px at 25% -5%, rgba(43, 92, 230, 0.05), transparent 70%);
    background-size: 20px 20px, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: 0 0, 0 0;
  }
}

@media (max-width: 1180px) {
  .texture {
    opacity: 0.45;
  }
}

/* ---------------------------------------------------------------------------
   4b) 打印 / 导出：不滚动、IntersectionObserver 不触发，必须直接给终态；
       底纹与解码画布不参与打印（省墨、更接近正式文档）
   --------------------------------------------------------------------------- */
@media print {
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .texture,
  .texture__canvas {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   5) 无障碍降级：reduced-motion 下本文件内不存在任何持续动画 / 过渡
   （canvas 的“只画一帧”分支由 main.js 处理）
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .texture {
    opacity: 0.42;
  }
}