/* Ambient Floating Animations for Complex 3D SVG Scenes */

@keyframes float-icon {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-6px);
  }
}

@keyframes pulse-shadow {
  0% {
    box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.08);
  }
}

@keyframes float-1 {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(-2deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes float-2 {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(3deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes float-3 {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(-1deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes float-shield {
  0% {
    transform: translateY(0px) scale(1) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) scale(1.05) rotate(5deg);
  }
  100% {
    transform: translateY(0px) scale(1) rotate(0deg);
  }
}

@keyframes pulse-blob {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .anim-float,
  .anim-shape,
  .float-1,
  .float-2,
  .float-3,
  .float-shield,
  .shape-blob,
  .shape-circle,
  .shape-triangle,
  .shape-small-circle {
    animation: none !important;
    transform: none !important;
  }
}

.float-1 {
  animation: float-1 4s ease-in-out infinite;
  transform-origin: center;
}

.float-2 {
  animation: float-2 5s ease-in-out infinite;
  transform-origin: center;
  animation-delay: 1s;
}

.float-3 {
  animation: float-3 4.5s ease-in-out infinite;
  transform-origin: center;
  animation-delay: 0.5s;
}

.float-shield {
  animation: float-shield 6s ease-in-out infinite;
  transform-origin: center;
  animation-delay: 0.2s;
}

.shape-blob {
  animation: pulse-blob 6s ease-in-out infinite;
  transform-origin: center;
}

.shape-circle,
.shape-triangle {
  animation: float-2 7s ease-in-out infinite alternate;
  transform-origin: center;
}

.shape-small-circle {
  animation: float-3 3s ease-in-out infinite alternate;
}

/* Scroll Reveal Animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Fade In Up Animations */
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up-1,
.fade-in-up-2,
.fade-in-up-3,
.fade-in-up-4 {
  opacity: 0; /* Keep hidden before animation starts */
  animation: fade-in-up 0.5s ease-out forwards;
}

.fade-in-up-1 {
  animation-delay: 0s;
}

.fade-in-up-2 {
  animation-delay: 0.1s;
}

.fade-in-up-3 {
  animation-delay: 0.2s;
}

.fade-in-up-4 {
  animation-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-up-1,
  .fade-in-up-2,
  .fade-in-up-3,
  .fade-in-up-4 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Marquee Scroll Animation */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-pills-row {
    animation: none !important;
    transform: none !important;
  }
}