/**
 * Animate.css - Micro-Animations, Transitions & Dynamic Motion
 */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
  }

  50% {
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.7);
  }
}

@keyframes floatSubtle {

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

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

@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* abstract image in hero section animation */
/* Subtle organic floating animations for spaghetti paths and geometric accents */
@keyframes spaghetti-drift-1 {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-7px) rotate(0.8deg);
  }
}

@keyframes spaghetti-drift-2 {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(8px) rotate(-1deg);
  }
}

@keyframes shape-gentle-pulse {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }

  50% {
    transform: scale(1.05) rotate(2deg);
  }
}

.spaghetti-drift-1 {
  transform-origin: 50% 50%;
  animation: spaghetti-drift-1 14s ease-in-out infinite;
}

.spaghetti-drift-2 {
  transform-origin: 50% 50%;
  animation: spaghetti-drift-2 18s ease-in-out infinite;
}

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

/* Animation Utility Classes */
.animate-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-up {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-down {
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-in-left,
.animate-slide-in-left {
  animation: slideInLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-in-right,
.animate-slide-in-right {
  animation: slideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-out-left,
.animate-slide-out-left {
  animation: slideOutLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-out-right,
.animate-slide-out-right {
  animation: slideOutRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.animate-float {
  animation: floatSubtle 4s ease-in-out infinite;
}

.animate-spin-slow {
  animation: spinSlow 12s linear infinite;
}

/* HTMX Transition Support */
.htmx-swapping {
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

.htmx-settling {
  opacity: 1;
  transition: opacity 0.25s ease-in;
}

.htmx-request.spinner-loader {
  display: inline-block;
}