/* СНЕЖИНКИ ❄ вместо листьев 777777777 */

  .falling-leaves {
    position: fixed;
    inset: 0;
    pointer-events: none; /* не блокирует клики по сайту */
    z-index: 2147483647;  /* поверх всего */
    overflow: hidden;
  }

  .leaf {
    position: absolute;
    top: -10vh;
    will-change: transform, opacity;
    opacity: 0.9;
    /* базовый размер снежинок */
    --size: clamp(12px, 1vw + 8px, 26px);
  }

  /* Прячем исходные картинки/иконки листьев */
  .leaf img,
  .leaf svg {
    display: none !important;
  }

  /* Рисуем снежинку текстовым символом — выглядит гораздо «реальнее» */
  .leaf::before {
    content: "❄";
    display: block;
    font-size: var(--size);
    line-height: 1;
    color: rgba(255,255,255,0.98);
    text-shadow:
      0 0 4px rgba(255,255,255,0.9),
      0 0 10px rgba(255,255,255,0.7);
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.25));
  }

  /* Немного разнообразия форм снежинок */
  .falling-leaves .leaf:nth-child(3n)::before {
    content: "✻";
  }
  .falling-leaves .leaf:nth-child(3n + 1)::before {
    content: "❄";
  }
  .falling-leaves .leaf:nth-child(3n + 2)::before {
    content: "✦";
  }

  /* Чуть-чуть рандома по размерам (если элементов много, будет красиво) */
  .falling-leaves .leaf:nth-child(4n) {
    --size: 14px;
    opacity: 0.8;
  }
  .falling-leaves .leaf:nth-child(4n + 1) {
    --size: 18px;
  }
  .falling-leaves .leaf:nth-child(4n + 2) {
    --size: 22px;
  }
  .falling-leaves .leaf:nth-child(4n + 3) {
    --size: 26px;
    opacity: 1;
  }

  /* Анимации — имена оставляем те же, чтобы js-скрипт не сломать */
  @keyframes leaf-fall {
    0% {
      transform: translate3d(var(--x-start, 50vw), -12vh, 0) rotate(0deg);
      opacity: 0.0;
    }
    5% { opacity: 0.95; }
    100% {
      transform: translate3d(var(--x-end, 55vw), 112vh, 0) rotate(var(--spin, 360deg));
      opacity: 0.9;
    }
  }

  @keyframes leaf-sway {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(var(--sway, 14px)); }
    100% { transform: translateX(0); }
  }

  /* Уменьшаем анимации для людей с "reduce motion" */
  @media (prefers-reduced-motion: reduce) {
    .falling-leaves .leaf { animation: none !important; }
  }

  /* (опционально) отключить на очень маленьких экранах
  @media (max-width: 360px) {
    .falling-leaves { display: none; }
  } */