/* ============================================
   СЛОВА "РОБОТОТЕХНИКА" НА ФОНЕ
   ============================================ */
.robotics-word {
  position: fixed;
  z-index: -1;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.robotics-word.visible {
  opacity: 0.7;
}

/* Разные шрифты и градиенты для каждого слова */
.robotics-word1 {
  font-family: "Fredoka", cursive;
  font-size: 1.2rem;
  background: linear-gradient(-45deg, #ff6b6b, #ffd166, #4ecdc4, #45b7d1);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    gradientShift 8s ease infinite,
    floatWord1 20s infinite linear;
}

.robotics-word2 {
  font-family: "Baloo 2", cursive;
  font-size: 1.5rem;
  background: linear-gradient(-45deg, #f72585, #b5179e, #7209b7, #560bad);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    gradientShift 10s ease infinite,
    floatWord2 25s infinite linear;
}

.robotics-word3 {
  font-family: "Bubblegum Sans", cursive;
  font-size: 1rem;
  background: linear-gradient(-45deg, #4361ee, #3a0ca3, #3f37c9, #4cc9f0);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    gradientShift 12s ease infinite,
    floatWord3 18s infinite linear;
}

.robotics-word4 {
  font-family: "Kalam", cursive;
  font-size: 1.3rem;
  background: linear-gradient(-45deg, #f94144, #f3722c, #f8961e, #f9844a);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    gradientShift 9s ease infinite,
    floatWord4 22s infinite linear;
}

.robotics-word5 {
  font-family: "Comic Neue", cursive;
  font-size: 0.9rem;
  background: linear-gradient(-45deg, #90be6d, #43aa8b, #277da1, #4d908e);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    gradientShift 11s ease infinite,
    floatWord5 30s infinite linear;
}

.robotics-word6 {
  font-family: "Luckiest Guy", cursive;
  font-size: 1.4rem;
  background: linear-gradient(-45deg, #f9c74f, #f8961e, #f9844a, #f3722c);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    gradientShift 7s ease infinite,
    floatWord6 24s infinite linear;
}

.robotics-word7 {
  font-family: "Quicksand", sans-serif;
  font-size: 1.1rem;
  background: linear-gradient(-45deg, #7209b7, #560bad, #480ca8, #3a0ca3);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    gradientShift 13s ease infinite,
    floatWord7 26s infinite linear;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Анимации плавания слов */
@keyframes floatWord1 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(200px, 100px) rotate(10deg);
  }
  50% {
    transform: translate(400px, 200px) rotate(-5deg);
  }
  75% {
    transform: translate(200px, 300px) rotate(15deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes floatWord2 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-150px, 150px) rotate(-15deg);
  }
  50% {
    transform: translate(-300px, 300px) rotate(5deg);
  }
  75% {
    transform: translate(-150px, 450px) rotate(-10deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes floatWord3 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(250px, -100px) rotate(8deg);
  }
  50% {
    transform: translate(500px, -200px) rotate(-12deg);
  }
  75% {
    transform: translate(250px, -300px) rotate(6deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes floatWord4 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-200px, -150px) rotate(-8deg);
  }
  50% {
    transform: translate(-400px, -300px) rotate(12deg);
  }
  75% {
    transform: translate(-200px, -450px) rotate(-6deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes floatWord5 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(150px, 200px) rotate(12deg);
  }
  50% {
    transform: translate(300px, 400px) rotate(-8deg);
  }
  75% {
    transform: translate(150px, 600px) rotate(15deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes floatWord6 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-100px, -200px) rotate(-12deg);
  }
  50% {
    transform: translate(-200px, -400px) rotate(8deg);
  }
  75% {
    transform: translate(-100px, -600px) rotate(-15deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes floatWord7 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(300px, 50px) rotate(10deg);
  }
  50% {
    transform: translate(600px, 100px) rotate(-10deg);
  }
  75% {
    transform: translate(300px, 150px) rotate(5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}