/* ================================================================
 * 雪花飘落效果（Hero 区域专用）
 *
 * 设计目标
 *   - 不影响现有 hero-bg 渐变 / 光晕 / 装饰元素
 *   - 干净显示雪花本体（不加光晕，用户明确要求）
 *   - SVG 形状由 snow.js 直接内联，避免 background-image 缓存/外链问题
 *   - 自适应容器大小（监听 resize）
 *   - 性能友好（will-change + GPU 加速）
 *   - 可访问性：尊重 prefers-reduced-motion
 * ================================================================ */

/* ============== 容器：仅作用于 hero 区域 ============== */
.hero-snow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

/* 让 hero 内已有内容保持在雪花之上 */
.hero .container { position: relative; z-index: 2; }

/* ============== 单个雪花 =============*
 * 约束：.snowflake 只能有一个 transform 通道
 *   translate 来自 snow-fall，rotate 也在 snow-fall 内合并写入。
 *   不再加任何 drop-shadow / box-shadow，只显示雪花本身。
 */
.snowflake {
  position: absolute;
  top: -10vh;
  left: 0;
  width: var(--size, 24px);
  height: var(--size, 24px);
  opacity: 0;
  will-change: transform, opacity;
  animation: snow-fall var(--dur, 14s) linear var(--delay, 0s) infinite;
  transform: translate3d(0, 0, 0) rotate(0deg);
  display: block;
}

/* ============== 内联 SVG 内的路径 ============== */
.snowflake svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.snowflake svg .stroke-path {
  fill: none;
  stroke: #80bae4;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.snowflake svg .fill-path {
  fill: #0075c9;
}

/* ============== 动画：下落 + 水平飘移 + 自转 ============= */
@keyframes snow-fall {
  0% {
    transform: translate3d(var(--start-x, 0), -12vh, 0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: var(--max-opacity, 0.85);
  }
  92% {
    opacity: var(--max-opacity, 0.85);
  }
  100% {
    transform: translate3d(var(--end-x, 40px), 112vh, 0) rotate(360deg);
    opacity: 0;
  }
}

/* ============== 重点雪花（特大） ============== */
.snowflake.is-hero {
  --size: 56px;
  --max-opacity: 1;
}

/* ============== 移动端适配 ============== */
@media (max-width: 768px) {
  .snowflake.is-hero { --size: 40px; }
}

/* ============== 可访问性：减少动画 ============== */
@media (prefers-reduced-motion: reduce) {
  .snowflake {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}