/* Осенний листопад в стиле Minecraft — только первый экран */
.hero {
  position: relative;
  overflow: hidden;
}

.hero .hero-grid {
  position: relative;
  z-index: 3;
}

.autumn-leaves-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.autumn-leaf {
  position: absolute;
  top: -14vh;
  left: var(--x, 50%);
  width: var(--size, 34px);
  height: var(--size, 34px);
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  animation:
    autumn-leaf-fall var(--duration, 10s) linear var(--delay, 0s) infinite;
  filter: drop-shadow(0 5px 7px rgba(16, 26, 37, .22));
}

.autumn-leaf svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  image-rendering: pixelated;
}

.autumn-leaf.is-soft {
  filter:
    blur(.65px)
    drop-shadow(0 6px 9px rgba(16, 26, 37, .18));
  opacity: .72;
}

.autumn-leaf.is-crisp {
  filter: drop-shadow(0 4px 6px rgba(16, 26, 37, .24));
}

/* Небольшая "крона" сверху, как в макете */
.autumn-crown {
  position: absolute;
  top: -4px;
  left: 48%;
  width: 25%;
  min-width: 250px;
  height: 120px;
  pointer-events: none;
  opacity: .98;
  transform-origin: 50% 0;
  animation: autumn-crown-sway 4.8s ease-in-out infinite alternate;
}

.autumn-crown .autumn-leaf {
  top: var(--top, 0);
  left: var(--left, 50%);
  opacity: .98;
  animation: none;
  transform: rotate(var(--rotate, 0deg));
}

@keyframes autumn-leaf-fall {
  0% {
    transform:
      translate3d(0, -14vh, 0)
      rotate(var(--rot-start, -20deg))
      scale(var(--scale, 1));
    opacity: 0;
  }

  8% {
    opacity: var(--opacity, .95);
  }

  42% {
    transform:
      translate3d(calc(var(--drift, 50px) * .35), 42vh, 0)
      rotate(calc(var(--rot-end, 280deg) * .45))
      scale(var(--scale, 1));
  }

  72% {
    transform:
      translate3d(calc(var(--drift, 50px) * -.18), 78vh, 0)
      rotate(calc(var(--rot-end, 280deg) * .77))
      scale(var(--scale, 1));
  }

  100% {
    transform:
      translate3d(var(--drift, 50px), 116vh, 0)
      rotate(var(--rot-end, 280deg))
      scale(var(--scale, 1));
    opacity: .08;
  }
}

@keyframes autumn-crown-sway {
  from { transform: translate3d(-4px, 0, 0) rotate(-1deg); }
  to   { transform: translate3d(7px, 2px, 0) rotate(1.2deg); }
}

/* ПК: листья концентрируются в свободной зоне между текстом и формой */
@media (min-width: 981px) {
  .autumn-leaves-layer {
    clip-path: inset(0 0 0 0);
  }
}

/* Планшеты */
@media (max-width: 980px) {
  .autumn-crown {
    left: 54%;
    width: 36%;
    min-width: 220px;
  }
}

/* Телефон: крона справа, листьев чуть меньше и мельче */
@media (max-width: 640px) {
  .autumn-crown {
    top: 0;
    left: 56%;
    width: 46%;
    min-width: 180px;
    height: 96px;
  }

  .autumn-leaf {
    filter: drop-shadow(0 3px 5px rgba(16, 26, 37, .19));
  }
}

@media (prefers-reduced-motion: reduce) {
  .autumn-leaf:not(.autumn-crown .autumn-leaf) {
    animation: none !important;
    display: none;
  }

  .autumn-crown {
    animation: none !important;
  }
}