/* ====== ПАДАЮЩИЕ ЭЛЕМЕНТЫ: МЕШКИ С ДЕНЬГАМИ, ПОДАРКИ, БАНКНОТЫ ====== */
.floating-elements-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; /* Под контентом (z-index: 2), но выше фона */
  overflow: hidden;
}

.floating-element {
  position: absolute;
  pointer-events: none;
  transform: translateZ(0); /* GPU ускорение */
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fallDown 8s linear infinite;
  top: -150px; /* Начальная позиция выше экрана */
  opacity: 0; /* Скрыты до начала анимации */
  /* Оптимизация производительности */
  backface-visibility: hidden;
  perspective: 1000px;
  /* will-change только когда элемент виден */
  will-change: transform;
}

/* Убираем will-change когда элемент не виден для экономии ресурсов */
.floating-element:not(:hover) {
  will-change: auto;
}

/* Мешки с деньгами */
.floating-money-bag::before {
  content: '💰';
  font-size: 40px;
}

/* Подарки */
.floating-gift::before {
  content: '🎁';
  font-size: 40px;
}

/* Банкноты */
.floating-bill::before {
  content: '💵';
  font-size: 40px;
}

/* Анимация падения сверху вниз */
@keyframes fallDown {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0; /* Невидимы в начале */
  }
  2% {
    opacity: 1; /* Появляются сразу при начале падения */
  }
  98% {
    opacity: 1; /* Видимы во время падения */
  }
  100% {
    transform: translateY(calc(100vh + 150px)) translateX(50px) rotate(360deg);
    opacity: 0; /* Исчезают внизу */
  }
}

/* Разные задержки - элементы появляются постепенно, не все сразу */
.floating-element:nth-child(1) { 
  animation-delay: 0s; 
  animation-duration: 8s;
  left: 10%;
}
.floating-element:nth-child(2) { 
  animation-delay: 2s; 
  animation-duration: 9s;
  left: 25%;
}
.floating-element:nth-child(3) { 
  animation-delay: 4s; 
  animation-duration: 8.5s;
  left: 40%;
}
.floating-element:nth-child(4) { 
  animation-delay: 6s; 
  animation-duration: 9.5s;
  left: 55%;
}
.floating-element:nth-child(5) { 
  animation-delay: 8s; 
  animation-duration: 8s;
  left: 70%;
}
.floating-element:nth-child(6) { 
  animation-delay: 10s; 
  animation-duration: 9s;
  left: 85%;
}
.floating-element:nth-child(7) { 
  animation-delay: 12s; 
  animation-duration: 8.5s;
  left: 15%;
}
.floating-element:nth-child(8) { 
  animation-delay: 14s; 
  animation-duration: 9s;
  left: 30%;
}
.floating-element:nth-child(9) { 
  animation-delay: 16s; 
  animation-duration: 8s;
  left: 45%;
}
.floating-element:nth-child(10) { 
  animation-delay: 18s; 
  animation-duration: 9.5s;
  left: 60%;
}

/* Отключение на мобильных для производительности */
@media (max-width: 768px) {
  .floating-elements-container {
    display: none;
  }
}

/* Отключение при предпочтении уменьшенной анимации */
@media (prefers-reduced-motion: reduce) {
  .floating-element {
    animation: none;
  }
}