/* Animations */

/* Keyframes */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(1deg);
  }
  50% {
    transform: translateY(-20px) rotate(0deg);
  }
  75% {
    transform: translateY(-15px) rotate(-1deg);
  }
}

@keyframes float-delayed {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(-5deg);
  }
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(140px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(140px) rotate(-360deg);
  }
}

@keyframes orbitReverse {
  from {
    transform: rotate(0deg) translateX(180px) rotate(0deg);
  }
  to {
    transform: rotate(-360deg) translateX(180px) rotate(360deg);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25%);
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.6);
  }
}

/* Responsive Orbit */
@media (max-width: 1024px) {
  @keyframes orbit {
    from {
      transform: rotate(0deg) translateX(160px) rotate(0deg);
    }
    to {
      transform: rotate(360deg) translateX(160px) rotate(-360deg);
    }
  }
  @keyframes orbitReverse {
    from {
      transform: rotate(0deg) translateX(190px) rotate(0deg);
    }
    to {
      transform: rotate(-360deg) translateX(190px) rotate(360deg);
    }
  }
}

@media (max-width: 768px) {
  @keyframes orbit {
    from {
      transform: rotate(0deg) translateX(140px) rotate(0deg);
    }
    to {
      transform: rotate(360deg) translateX(140px) rotate(-360deg);
    }
  }
  @keyframes orbitReverse {
    from {
      transform: rotate(0deg) translateX(165px) rotate(0deg);
    }
    to {
      transform: rotate(-360deg) translateX(165px) rotate(360deg);
    }
  }
}

@media (max-width: 640px) {
  @keyframes orbit {
    from {
      transform: rotate(0deg) translateX(120px) rotate(0deg);
    }
    to {
      transform: rotate(360deg) translateX(120px) rotate(-360deg);
    }
  }
  @keyframes orbitReverse {
    from {
      transform: rotate(0deg) translateX(145px) rotate(0deg);
    }
    to {
      transform: rotate(-360deg) translateX(145px) rotate(360deg);
    }
  }
}

/* Animation Classes */
.animate-float {
  animation: float 5s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 6s ease-in-out infinite 3s;
}

.animate-orbit {
  animation: orbit 20s linear infinite;
}

.animate-orbit-reverse {
  animation: orbitReverse 15s linear infinite;
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-up {
  animation: slideInUp 0.5s ease-out;
}

.animate-shimmer {
  animation: shimmer 3s infinite;
}

.animate-pulse {
  animation: pulse 3s ease-in-out infinite;
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-bounce {
  animation: bounce 2s ease-in-out infinite;
}

.animate-spin {
  animation: spin 20s linear infinite;
}

.animate-spin-reverse {
  animation: spin 15s linear infinite reverse;
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out;
}

.animate-glow {
  animation: glow 3s ease-in-out infinite;
}

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

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.from-left {
  transform: translateX(-50px);
}

.animate-on-scroll.from-left.visible {
  transform: translateX(0);
}

.animate-on-scroll.from-right {
  transform: translateX(50px);
}

.animate-on-scroll.from-right.visible {
  transform: translateX(0);
}

/* Staggered Animation Delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }

/* Transition Utilities */
.transition-all {
  transition: all var(--transition-base);
}

.transition-transform {
  transition: transform var(--transition-base);
}

.transition-opacity {
  transition: opacity var(--transition-base);
}

.transition-colors {
  transition: color var(--transition-base), background-color var(--transition-base);
}

.duration-150 { transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }

/* Transform Utilities */
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }

.-translate-y-full { transform: translateY(-100%); }
.translate-y-0 { transform: translateY(0); }
.-translate-x-full { transform: translateX(-100%); }
.translate-x-0 { transform: translateX(0); }

.-translate-y-2 { transform: translateY(-0.5rem); }
.-translate-y-3 { transform: translateY(-0.75rem); }

/* Hover States */
@media (hover: hover) {
  .group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
  }

  .group:hover .group-hover\:opacity-100 {
    opacity: 1;
  }

  .group:hover .group-hover\:translate-x-full {
    transform: translateX(100%);
  }
}

/* Will Change */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}