/* ============================================================
   风的意象 · wind-v1.css   (2026-11-02)
   ------------------------------------------------------------
   品牌「大风 365」的视觉母题：风看不见，只留下痕迹。
   · 左侧文案区：极淡的斜向风纹 —— 是纸面的纹理，不是装饰
   · 右侧宇宙区：数道气流自西向东掠过，慢速、错峰、渐隐
   全部装饰性内容 aria-hidden；尊重 prefers-reduced-motion。
   只新增，不覆盖既有主题变量（颜色全部走 var(--brand)）。
   ============================================================ */

/* ---------- 1. 左侧：风纹（纸面的纹理） ---------- */
.nova-hero { position: relative; }

.nova-hero::before {
  content: "";
  position: absolute;
  inset: -40px -30px -40px -70px;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    112deg,
    transparent 0 26px,
    var(--brand-line, rgba(24, 124, 87, .35)) 26px 27px,
    transparent 27px 52px
  );
  opacity: .46;
  -webkit-mask-image: radial-gradient(ellipse 68% 60% at 28% 44%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 68% 60% at 28% 44%, #000 0%, transparent 78%);
}

/* 内容层抬到风纹之上 */
.nova-hero > * { position: relative; z-index: 1; }

/* ---------- 2. 右侧：气流线 ---------- */
.wind-field {
  position: absolute;
  inset: -8% -10%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--brand, #187c57);
}

.wind-field svg {
  display: block;
  width: 100%;
  height: 100%;
  /* 两端渐隐：风从画面外吹来，又吹向画面外——没有起点也没有终点 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}

.wl {
  stroke-dasharray: 170 250;
  opacity: 0;
  animation: wind-sweep 11s cubic-bezier(.42, 0, .58, 1) infinite;
}

/* 每条线错开，形成"一阵一阵"而不是整齐划一 */
.wl-1 { animation-duration: 9.5s;  animation-delay: -1.2s; }
.wl-2 { animation-duration: 13s;   animation-delay: -4.6s; }
.wl-3 { animation-duration: 11s;   animation-delay: -7.1s; }
.wl-4 { animation-duration: 15.5s; animation-delay: -2.4s; }
.wl-5 { animation-duration: 10.5s; animation-delay: -9.3s; }
.wl-6 { animation-duration: 17s;   animation-delay: -12.5s; }

@keyframes wind-sweep {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  14%  { opacity: .86; }
  52%  { opacity: .66; }
  88%  { opacity: .18; }
  100% { stroke-dashoffset: -940; opacity: 0; }
}

/* ---------- 3. 风中飘过的微尘 ---------- */
.wind-grain {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  filter: blur(.4px);
  opacity: 0;
  animation: wind-drift 14s linear infinite;
}

.wind-grain.g1 { left: 6%;  top: 62%; animation-delay: -2s;   animation-duration: 13s; }
.wind-grain.g2 { left: 18%; top: 34%; animation-delay: -6.5s; animation-duration: 16s; width: 2px; height: 2px; }
.wind-grain.g3 { left: 34%; top: 76%; animation-delay: -10s;  animation-duration: 12s; width: 2.5px; height: 2.5px; }
.wind-grain.g4 { left: 52%; top: 22%; animation-delay: -4s;   animation-duration: 18s; width: 2px; height: 2px; }
.wind-grain.g5 { left: 72%; top: 58%; animation-delay: -8s;   animation-duration: 15s; }

@keyframes wind-drift {
  0%   { transform: translate3d(0, 0, 0) scale(.8);      opacity: 0; }
  18%  { opacity: .55; }
  70%  { opacity: .35; }
  100% { transform: translate3d(150px, -46px, 0) scale(1); opacity: 0; }
}

/* ---------- 4. 品牌核外的风环（极缓慢的呼吸，暗示"气"在其外流动） ---------- */
.nova-ai-universe .nova-core::after {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: inherit;
  border: 1px solid var(--brand-line, rgba(24, 124, 87, .3));
  opacity: 0;
  animation: wind-ring 7s ease-out infinite;
}

@keyframes wind-ring {
  0%   { transform: scale(.92); opacity: 0; }
  30%  { opacity: .38; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* ---------- 6. 移动端：收敛 ---------- */
@media (max-width: 1000px) {
  .wind-field { display: none; }
  .nova-hero::before { inset: -24px -16px; opacity: .40; }
  .nova-ai-universe .nova-core::after { display: none; }
}

/* ---------- 7. 尊重系统的减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .wl, .wind-grain, .nova-ai-universe .nova-core::after { animation: none; }
  .wl { opacity: .22; stroke-dashoffset: -120; }
  .wind-grain { opacity: .12; }
  .nova-ai-universe .nova-core::after { opacity: .18; transform: scale(1.06); }
}