/* ============================================
   ФОНОВЫЕ ДЕТАЛИ LEGO
   ============================================ */
.lego-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.lego-piece {
  position: absolute;
  opacity: 0.08;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Каждый кусочек LEGO с уникальной анимацией */
.lego-1 {
  top: 10%;
  left: 5%;
  width: 80px;
  height: 40px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><rect x="0" y="10" width="100" height="30" fill="%23FF7700" rx="5"/><rect x="10" y="0" width="20" height="20" fill="%23FF7700" rx="3"/><rect x="40" y="0" width="20" height="20" fill="%23FF7700" rx="3"/><rect x="70" y="0" width="20" height="20" fill="%23FF7700" rx="3"/></svg>')
    center/contain no-repeat;
  animation: float1 25s infinite ease-in-out;
}

.lego-2 {
  top: 20%;
  right: 10%;
  width: 60px;
  height: 60px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="0" y="20" width="100" height="60" fill="%2300AA00" rx="5"/><rect x="15" y="5" width="25" height="25" fill="%2300AA00" rx="3"/><rect x="60" y="5" width="25" height="25" fill="%2300AA00" rx="3"/><rect x="15" y="70" width="25" height="25" fill="%2300AA00" rx="3"/><rect x="60" y="70" width="25" height="25" fill="%2300AA00" rx="3"/></svg>')
    center/contain no-repeat;
  animation: float2 30s infinite ease-in-out;
}

.lego-3 {
  bottom: 15%;
  left: 8%;
  width: 70px;
  height: 50px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70"><rect x="0" y="10" width="100" height="50" fill="%230077FF" rx="5"/><rect x="10" y="0" width="20" height="20" fill="%230077FF" rx="3"/><rect x="40" y="0" width="20" height="20" fill="%230077FF" rx="3"/><rect x="70" y="0" width="20" height="20" fill="%230077FF" rx="3"/><rect x="10" y="50" width="20" height="20" fill="%230077FF" rx="3"/><rect x="40" y="50" width="20" height="20" fill="%230077FF" rx="3"/><rect x="70" y="50" width="20" height="20" fill="%230077FF" rx="3"/></svg>')
    center/contain no-repeat;
  animation: float3 28s infinite ease-in-out;
}

.lego-4 {
  top: 40%;
  right: 7%;
  width: 90px;
  height: 40px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><rect x="0" y="10" width="100" height="30" fill="%23FF0000" rx="5"/><rect x="10" y="0" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="30" y="0" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="50" y="0" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="70" y="0" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="10" y="35" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="30" y="35" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="50" y="35" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="70" y="35" width="15" height="15" fill="%23FF0000" rx="3"/></svg>')
    center/contain no-repeat;
  animation: float4 32s infinite ease-in-out;
}

.lego-5 {
  bottom: 25%;
  right: 15%;
  width: 65px;
  height: 65px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%23FFFF00"/><circle cx="30" cy="30" r="10" fill="%23FFFF00"/><circle cx="70" cy="30" r="10" fill="%23FFFF00"/><circle cx="30" cy="70" r="10" fill="%23FFFF00"/><circle cx="70" cy="70" r="10" fill="%23FFFF00"/></svg>')
    center/contain no-repeat;
  animation: float5 27s infinite ease-in-out;
}

.lego-6 {
  top: 60%;
  left: 12%;
  width: 75px;
  height: 45px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><rect x="0" y="15" width="100" height="30" fill="%23FF00FF" rx="5"/><rect x="15" y="0" width="20" height="20" fill="%23FF00FF" rx="3"/><rect x="40" y="0" width="20" height="20" fill="%23FF00FF" rx="3"/><rect x="65" y="0" width="20" height="20" fill="%23FF00FF" rx="3"/><rect x="15" y="40" width="20" height="20" fill="%23FF00FF" rx="3"/><rect x="40" y="40" width="20" height="20" fill="%23FF00FF" rx="3"/><rect x="65" y="40" width="20" height="20" fill="%23FF00FF" rx="3"/></svg>')
    center/contain no-repeat;
  animation: float6 29s infinite ease-in-out;
}

.lego-7 {
  bottom: 10%;
  right: 25%;
  width: 85px;
  height: 55px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70"><rect x="0" y="10" width="100" height="50" fill="%2300FFFF" rx="5"/><rect x="10" y="0" width="20" height="20" fill="%2300FFFF" rx="3"/><rect x="40" y="0" width="20" height="20" fill="%2300FFFF" rx="3"/><rect x="70" y="0" width="20" height="20" fill="%2300FFFF" rx="3"/><rect x="10" y="50" width="20" height="20" fill="%2300FFFF" rx="3"/><rect x="40" y="50" width="20" height="20" fill="%2300FFFF" rx="3"/><rect x="70" y="50" width="20" height="20" fill="%2300FFFF" rx="3"/></svg>')
    center/contain no-repeat;
  animation: float7 31s infinite ease-in-out;
}

.lego-8 {
  top: 75%;
  left: 20%;
  width: 70px;
  height: 70px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="10" y="10" width="80" height="80" fill="%23FF8800" rx="10"/><rect x="20" y="0" width="20" height="20" fill="%23FF8800" rx="3"/><rect x="60" y="0" width="20" height="20" fill="%23FF8800" rx="3"/><rect x="20" y="80" width="20" height="20" fill="%23FF8800" rx="3"/><rect x="60" y="80" width="20" height="20" fill="%23FF8800" rx="3"/></svg>')
    center/contain no-repeat;
  animation: float8 26s infinite ease-in-out;
}

.lego-9 {
  top: 30%;
  left: 25%;
  width: 65px;
  height: 65px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,10 90,40 75,90 25,90 10,40" fill="%2300AAFF"/><circle cx="50" cy="50" r="15" fill="%2300AAFF"/></svg>')
    center/contain no-repeat;
  animation: float9 33s infinite ease-in-out;
}

.lego-10 {
  top: 50%;
  right: 30%;
  width: 80px;
  height: 50px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><path d="M10,30 Q50,10 90,30 T90,50 Q50,70 10,50 Z" fill="%23FF00AA"/><circle cx="30" cy="35" r="5" fill="%23FF00AA"/><circle cx="70" cy="35" r="5" fill="%23FF00AA"/></svg>')
    center/contain no-repeat;
  animation: float10 24s infinite ease-in-out;
}

/* Анимации плавания */
@keyframes float1 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(30px, -20px) rotate(5deg);
  }
  50% {
    transform: translate(-20px, 30px) rotate(-3deg);
  }
  75% {
    transform: translate(15px, 15px) rotate(2deg);
  }
}

@keyframes float2 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-25px, 15px) rotate(-4deg);
  }
  50% {
    transform: translate(20px, -25px) rotate(3deg);
  }
  75% {
    transform: translate(-15px, -10px) rotate(-2deg);
  }
}

@keyframes float3 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(20px, 25px) rotate(3deg);
  }
  50% {
    transform: translate(-30px, -15px) rotate(-5deg);
  }
  75% {
    transform: translate(10px, -20px) rotate(2deg);
  }
}

@keyframes float4 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-15px, -25px) rotate(-3deg);
  }
  50% {
    transform: translate(25px, 20px) rotate(4deg);
  }
  75% {
    transform: translate(-20px, 10px) rotate(-2deg);
  }
}

@keyframes float5 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(25px, 10px) rotate(2deg);
  }
  50% {
    transform: translate(-15px, -20px) rotate(-4deg);
  }
  75% {
    transform: translate(20px, 15px) rotate(3deg);
  }
}

@keyframes float6 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-20px, -15px) rotate(-2deg);
  }
  50% {
    transform: translate(15px, 25px) rotate(4deg);
  }
  75% {
    transform: translate(-25px, 5px) rotate(-3deg);
  }
}

@keyframes float7 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(15px, 20px) rotate(3deg);
  }
  50% {
    transform: translate(-25px, -10px) rotate(-5deg);
  }
  75% {
    transform: translate(10px, -15px) rotate(2deg);
  }
}

@keyframes float8 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-10px, -25px) rotate(-4deg);
  }
  50% {
    transform: translate(20px, 15px) rotate(3deg);
  }
  75% {
    transform: translate(-15px, 20px) rotate(-2deg);
  }
}

@keyframes float9 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(25px, -10px) rotate(2deg);
  }
  50% {
    transform: translate(-20px, 25px) rotate(-3deg);
  }
  75% {
    transform: translate(15px, -20px) rotate(4deg);
  }
}

@keyframes float10 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-30px, 20px) rotate(-3deg);
  }
  50% {
    transform: translate(25px, -30px) rotate(5deg);
  }
  75% {
    transform: translate(-20px, -15px) rotate(-2deg);
  }
}

/* Адаптив для мобильных */
@media (max-width: 480px) {
  .lego-piece {
    opacity: 0.04;
  }
  .lego-1,
  .lego-2,
  .lego-3,
  .lego-4,
  .lego-5,
  .lego-6,
  .lego-7,
  .lego-8,
  .lego-9,
  .lego-10 {
    width: 40px;
    height: 40px;
  }
}