/**
 * Wind Triangle Animations
 * Subtle floating triangle animations for hero and CTA sections
 * Extracted from Lovable React app for SSR compatibility
 */

/* ============================================
   LEFT-TO-RIGHT ANIMATIONS (Slow)
   ============================================ */

@keyframes windFloatSlow {
  0% {
    transform: translateX(-60px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0;
  }
  7% {
    opacity: 0.18;
  }
  93% {
    opacity: 0.18;
  }
  100% {
    transform: translateX(200px) translateY(6px) rotate(-2deg) scale(1);
    opacity: 0;
  }
}

@keyframes windFloatSlowMid {
  0% {
    transform: translateX(40px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0;
  }
  7% {
    opacity: 0.18;
  }
  93% {
    opacity: 0.18;
  }
  100% {
    transform: translateX(200px) translateY(6px) rotate(-2deg) scale(1);
    opacity: 0;
  }
}

@keyframes windFloat {
  0% {
    transform: translateX(-20px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.22;
  }
  90% {
    opacity: 0.22;
  }
  100% {
    transform: translateX(220px) translateY(5px) rotate(-3deg) scale(1);
    opacity: 0;
  }
}

/* ============================================
   RIGHT-TO-LEFT ANIMATIONS (Reverse)
   ============================================ */

@keyframes windFloatReverseMid {
  0% {
    transform: translateX(-30px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 0.20;
  }
  95% {
    opacity: 0.20;
  }
  100% {
    transform: translateX(-220px) translateY(3px) rotate(2deg) scale(1);
    opacity: 0;
  }
}

@keyframes windFloatReverseFar {
  0% {
    transform: translateX(-120px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0;
  }
  5% {
    opacity: 0.20;
  }
  95% {
    opacity: 0.20;
  }
  100% {
    transform: translateX(-220px) translateY(3px) rotate(2deg) scale(1);
    opacity: 0;
  }
}

@keyframes windFloatReverseFastMid {
  0% {
    transform: translateX(-50px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0;
  }
  8% {
    opacity: 0.23;
  }
  92% {
    opacity: 0.23;
  }
  100% {
    transform: translateX(-240px) translateY(1px) rotate(2deg) scale(1);
    opacity: 0;
  }
}

@keyframes windFloatReverseSlowMid {
  0% {
    transform: translateX(-40px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0;
  }
  7% {
    opacity: 0.18;
  }
  93% {
    opacity: 0.18;
  }
  100% {
    transform: translateX(-200px) translateY(8px) rotate(1deg) scale(1);
    opacity: 0;
  }
}

/* ============================================
   ADDITIONAL ANIMATION VARIANTS
   ============================================ */

@keyframes windFloatFast {
  0% {
    transform: translateX(-30px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0;
  }
  12% {
    opacity: 0.25;
  }
  88% {
    opacity: 0.25;
  }
  100% {
    transform: translateX(230px) translateY(4px) rotate(-4deg) scale(1);
    opacity: 0;
  }
}

@keyframes windFloatReverseSlow {
  0% {
    transform: translateX(-70px) translateY(0px) rotate(0deg) scale(1);
    opacity: 0;
  }
  6% {
    opacity: 0.17;
  }
  94% {
    opacity: 0.17;
  }
  100% {
    transform: translateX(-210px) translateY(7px) rotate(3deg) scale(1);
    opacity: 0;
  }
}