/* ================================================
   DELIBERATE PM - ANIMATIONS
   Organic morphing blobs, floating effects, transitions
   ================================================ */

/* ------------------------------------------------
   BLOB MORPHING ANIMATIONS
   ------------------------------------------------ */

/* Primary blob morph - continuous organic shape transformation */
@keyframes blob-morph {
  0%, 100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
  }
  75% {
    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
  }
}

/* Alternate blob morph - different pattern for variety */
@keyframes blob-morph-alt {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
  50% {
    border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
  }
  75% {
    border-radius: 50% 50% 40% 60% / 70% 40% 60% 30%;
  }
}

/* Slow rotation for background decorative blobs */
@keyframes blob-rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.05);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* ------------------------------------------------
   FLOATING ANIMATIONS
   ------------------------------------------------ */

/* Primary float - subtle vertical drift with rotation */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-15px) rotate(2deg);
  }
  66% {
    transform: translateY(-8px) rotate(-1deg);
  }
}

/* Gentle float - less movement for subtle elements */
@keyframes float-gentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Drift float - horizontal and vertical movement */
@keyframes float-drift {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(10px, -15px) rotate(3deg);
  }
  50% {
    transform: translate(-5px, -10px) rotate(-2deg);
  }
  75% {
    transform: translate(5px, -20px) rotate(1deg);
  }
}

/* ------------------------------------------------
   ENTRANCE ANIMATIONS
   ------------------------------------------------ */

/* Fade in from below */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from left */
@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in from right */
@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale in with fade */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ------------------------------------------------
   GRADIENT & COLOR ANIMATIONS
   ------------------------------------------------ */

/* Gradient position shift */
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Pulse glow effect */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(43, 107, 106, 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(43, 107, 106, 0.4);
  }
}

/* ------------------------------------------------
   INTERACTION ANIMATIONS
   ------------------------------------------------ */

/* Button press effect */
@keyframes button-press {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.97);
  }
}

/* Icon wiggle on hover */
@keyframes wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

/* ------------------------------------------------
   UTILITY CLASSES
   ------------------------------------------------ */

/* Apply morphing blob animation */
.animate-blob-morph {
  animation: blob-morph 8s ease-in-out infinite;
}

.animate-blob-morph-alt {
  animation: blob-morph-alt 10s ease-in-out infinite;
}

.animate-blob-morph-slow {
  animation: blob-morph 12s ease-in-out infinite;
}

.animate-blob-morph-fast {
  animation: blob-morph 4s ease-in-out infinite;
}

/* Apply floating animation */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-gentle {
  animation: float-gentle 5s ease-in-out infinite;
}

.animate-float-drift {
  animation: float-drift 8s ease-in-out infinite;
}

/* Stagger delays for multiple elements */
.delay-0 { animation-delay: 0s; }
.delay-1 { animation-delay: -1s; }
.delay-2 { animation-delay: -2s; }
.delay-3 { animation-delay: -3s; }
.delay-4 { animation-delay: -4s; }
.delay-5 { animation-delay: -5s; }

/* Entrance animations */
.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-fade-in-left {
  animation: fade-in-left 0.6s ease-out forwards;
}

.animate-fade-in-right {
  animation: fade-in-right 0.6s ease-out forwards;
}

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

/* Background blob rotation */
.animate-blob-rotate {
  animation: blob-rotate 30s linear infinite;
}

/* ------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}