html {
  scroll-behavior: smooth;
}

@keyframes float-up {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes float-down {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

[data-float="up"] {
  animation: float-up 3s ease-in-out infinite;
}

[data-float="down"] {
  animation: float-down 3s ease-in-out infinite;
  animation-delay: 1s;
}

[data-bob] {
  animation: bob 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-float],
  [data-bob] {
    animation: none;
  }
}