@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
}

@keyframes orbitPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(10px, -18px, 0) rotate(8deg);
  }
}

@keyframes scrollDot {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.55;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.hero-logo-art {
  animation: floatY 7s ease-in-out infinite;
}

.hero-orbit {
  animation: orbitPulse 6s ease-in-out infinite;
}

.floating-leaf {
  animation: drift 8s ease-in-out infinite;
}

.leaf-two {
  animation-delay: 1.2s;
}

.leaf-three {
  animation-delay: 2.4s;
}

.scroll-indicator span {
  animation: scrollDot 1.8s ease-in-out infinite;
}

.loader-globe {
  animation: spin 1.1s linear infinite;
}

.ripple-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ripple-btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.7s linear;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}