/* =========================================================
   Декоративные ингредиенты по краям страницы
   ========================================================= */

.ingredient-decor {
  position: fixed;
  inset: 0;
  z-index: 15;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .7s ease, visibility .7s ease;
}

.ingredient-decor--hidden {
  opacity: 0;
  visibility: hidden;
}

.ingredient-decor__item {
  --decor-size: 120px;
  --decor-rotate: 0deg;
  --mouse-x: 0px;
  --mouse-y: 0px;

  position: absolute;
  width: var(--decor-size);
  height: var(--decor-size);
  opacity: 0.96;
  transform:
    translate3d(var(--mouse-x), var(--mouse-y), 0)
    rotate(var(--decor-rotate));
  transform-origin: center;
  transition: transform 140ms ease-out;
  will-change: transform;
  pointer-events: none;
}

.ingredient-decor__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 14px 20px rgba(70, 47, 18, 0.13))
    saturate(1.08);
  animation: ingredientDecorFloat 7s ease-in-out infinite;
  will-change: transform;
}

.ingredient-decor__item:nth-child(2n) .ingredient-decor__image {
  animation-duration: 8.5s;
  animation-delay: -2.5s;
}

.ingredient-decor__item:nth-child(3n) .ingredient-decor__image {
  animation-duration: 6.4s;
  animation-delay: -4s;
  animation-direction: reverse;
}

.ingredient-decor__item:nth-child(5n) .ingredient-decor__image {
  animation-duration: 9.2s;
  animation-delay: -1.5s;
}

@keyframes ingredientDecorFloat {
  0%,
  100% {
    transform: translate3d(0, -5px, 0) rotate(-1.5deg);
  }

  50% {
    transform: translate3d(0, 9px, 0) rotate(2deg);
  }
}

@media (max-width: 1300px) {
  .ingredient-decor__item {
    opacity: 0.84;
  }
}

@media (max-width: 980px) {
  .ingredient-decor__item:nth-child(n + 11) {
    display: none;
  }

  .ingredient-decor__item {
    opacity: 0.76;
  }
}

@media (max-width: 700px) {
  .ingredient-decor__item:nth-child(n + 7) {
    display: none;
  }

  .ingredient-decor__item {
    opacity: 0.58;
  }
}

@media (max-width: 480px) {
  .ingredient-decor__item:nth-child(n + 5) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ingredient-decor,
  .ingredient-decor__item {
    transition: none;
  }

  .ingredient-decor__item {
    transform: rotate(var(--decor-rotate));
  }

  .ingredient-decor__image {
    animation: none;
  }
}