/* Простая фоновая сетка с hover эффектом */
.interactive-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(47, 70, 19, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 70, 19, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  transition: background-image 0.3s ease;
}

/* При наведении курсора на весь фон - сетка становится черной */
body:hover .interactive-background {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

/* Полупрозрачный бэкдроп между фоном и контентом */
.content-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background: #ffffffb5;
    /* backdrop-filter: blur(1.8px);
    -webkit-backdrop-filter: blur(0.8px); */
}

/* Стили для плавающих элементов */
.floating-icon {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  will-change: transform;
  backface-visibility: hidden;
}

.floating-icon:hover {
  opacity: 0.9;
}

.floating-particle {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  will-change: transform;
  backface-visibility: hidden;
  filter: blur(0.5px);
}

.floating-particle:hover {
  opacity: 0.8;
}

/* Анимации для плавного движения */
@keyframes float-gentle {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(1deg);
  }
  50% {
    transform: translateY(-10px) rotate(0deg);
  }
  75% {
    transform: translateY(-5px) rotate(-1deg);
  }
}

@keyframes float-energetic {
  0%, 100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) translateX(3px) rotate(2deg);
  }
  50% {
    transform: translateY(-15px) translateX(-2px) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) translateX(1px) rotate(-2deg);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.6;
    filter: blur(0.5px);
  }
  50% {
    opacity: 0.8;
    filter: blur(1px);
  }
}

/* Применяем анимации к разным типам элементов */
.floating-icon:nth-child(odd) {
  animation: float-gentle 6s ease-in-out infinite;
}

.floating-icon:nth-child(even) {
  animation: float-energetic 4s ease-in-out infinite;
  animation-delay: -2s;
}

.floating-particle {
  animation: pulse-glow 3s ease-in-out infinite;
  animation-delay: calc(var(--delay, 0) * 0.5s);
}