/* ============================================================================
 * wind.css · 全局统一「强风」背景（C02 视觉实验）
 *
 * 目标：P1–P5（含 P5 RED）共用**同一套**风，风向、风速、密度完全一致。
 * 做法：CSS + SVG，一个全局元素，三层风线，纯 transform/opacity 动画。
 *
 * 三条硬约束：
 *   1. 必须在主 UI 之后方 —— z-index:0（.screen 是 z-index:1），且 pointer-events:none
 *   2. 手机上铺满整屏（与 app 背景图同一处理）；PC 上**只允许出现在 H5 stage 内部**
 *   3. 切屏不能重启动画 —— 这个元素在 .screen 之外，路由永远不碰它
 * ========================================================================== */

.wind {
  position: absolute;
  inset: 0;                       /* 手机：整屏铺满 */
  z-index: 0;                     /* 在主 UI（.screen = 1）之后方 */
  overflow: hidden;
  pointer-events: none;           /* 绝不挡按钮 / 输入框 / 图片 / 海报 */
  /* 线本身是画出来的，不参与命中测试；这里再兜一层用户选择 */
  user-select: none;
  -webkit-user-select: none;
}

.wind__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* slice：等比铺满、不拉伸。风向角度在任何视口下都保持真实。
     设计画板本身就是 390 : 844.5，与手机视口比例几乎一致，裁切量极小。 */
}

/* ---------------------------------------------------------------------------
 * 三层风线：远处细密快、中景更快更粗、前景偶尔长扫
 * 每根线的时长 / 延迟 / 长度 / 透明度 / 行程都在 JS 里按种子随机，
 * 所以不会出现「一排线整齐划一」的机械感。
 * ------------------------------------------------------------------------- */
.wind__line {
  will-change: transform, opacity;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.42, 0.02, 0.86, 0.52);  /* 起步慢 → 加速掠过 */
}

/* 出现 → 加速掠过 → 淡出。首尾都是 opacity:0，所以循环回卷时看不见接缝。 */
@keyframes windSweep {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: var(--wo); }
  66%  { opacity: var(--wo); }
  100% { transform: translate(var(--wx), var(--wy)); opacity: 0; }
}

/* 前景的长扫：一整个周期里只有开头一小段是「在场上」，其余时间完全透明 ——
   于是它是「偶尔快速扫过」，而不是持续不断的线。 */
@keyframes windGust {
  0%   { transform: translate(0, 0); opacity: 0; }
  1.5% { opacity: var(--wo); }
  9%   { opacity: var(--wo); }
  13%  { transform: translate(var(--wx), var(--wy)); opacity: 0; }
  100% { transform: translate(var(--wx), var(--wy)); opacity: 0; }
}

/* ★ 层名必须和 wind.js 里的 LAYERS[].name 一字不差。
   早先这里还写着 --far/--mid/--near，而 JS 已经改成 --mist/--wisp/--gleam，
   结果 `animation-name` 落空 → 风丝全部**静止**（看着像贴图，且毫无破绽）。
   这类「样式选择器和 JS 类名脱钩」的静默失效，只能靠 getAnimations() 兜住。 */
.wind__line--mist  { animation-name: windSweep; }
.wind__line--wisp  { animation-name: windSweep; }
.wind__line--gleam { animation-name: windGust; }   /* 细亮快的那些：一闪而过 */

/* ---------------------------------------------------------------------------
 * PC / 宽屏：风**只存在于 H5 stage 内部**，不扩散到整个浏览器背景。
 * 舞台矩形由 layout.js 算好写进 CSS 变量，与内容共用同一份算式。
 * ------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .wind {
    inset: auto;
    left: var(--stage-left, 0);
    top: var(--stage-top, 0);
    width: var(--stage-w-px, 100%);
    height: var(--stage-h-px, 100%);
    /* ★ 手机舞台上那张背景图**改由风层来画**。
       否则：`.stage__inner` 自带不透明背景图、而 `.screen` 是 z-index:1、
       风是 z-index:0 —— 风整个被舞台背景盖住，PC 上一点都看不见
       （矩形完全重合、量几何一切正常，唯独看不见东西）。
       现在风层的绘制顺序是：自己的背景图 → 风墨迹 → (.screen 里的内容)，
       三层天然有序，不需要动 z-index。 */
    background-image: url("../img/bg-app.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    box-shadow: 0 24px 70px rgba(24, 40, 80, 0.16);
  }
}

/* ---------------------------------------------------------------------------
 * 无障碍：系统开启「减弱动态效果」时停住风。
 * 只停动画，不影响任何功能，页面仍然完整可用。
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wind__line {
    animation: none !important;
    transform: translate(calc(var(--wx) * 0.35), calc(var(--wy) * 0.35));
    opacity: calc(var(--wo) * 0.55);
  }
}