/* ==========================================================================
   Animation Definitions & Utility Classes
   ========================================================================== */

/* --- Keyframe Definitions --- */

/* Background Gradient Animation */
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Slower, alternating version for elements like CTA sections */
@keyframes gradientAnimationAlternate {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
  /* Removed 50% keyframe to make it a simple A-B alternate for smoother loop with 'alternate' direction */
}


/* Sparkle Glimmer Animation (for buttons, applied via JS) */
@keyframes glimmerSparkle {
  0% {
    opacity: 0;
    transform: scale(0.3) translate(var(--tx, 0px), var(--ty, 0px));
  }
  30%, 70% { /* Hold opacity for a bit longer for better visibility */
    opacity: 1;
    transform: scale(1) translate(var(--tx, 0px), var(--ty, 0px));
  }
  100% {
    opacity: 0;
    transform: scale(0.3) translate(var(--tx, 0px), var(--ty, 0px));
  }
}


/* Loading Spinner Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Simple Fade-In Animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Simple Fade-Out Animation */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Fade-In and Scale-Up (for modals, cards entry) */
@keyframes fadeInScaleUp {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Bounce-In entrance animation */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(20px); /* Added slight Y transform */
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
  }
  70% {
    transform: scale(0.97) translateY(2px);
  }
  100% {
    opacity: 1; /* Ensure opacity is 1 at the end */
    transform: scale(1) translateY(0);
  }
}

/* Slide in from Bottom */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(25px); /* Slightly less distance */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide in from Top */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-25px); /* Slightly less distance */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulse animation for attention (e.g., on a notification badge) */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness), 0.5);
  }
  70% {
    transform: scale(1.05); /* Slight scale for subtlety */
    box-shadow: 0 0 0 10px hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness), 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness), 0);
  }
}

/* Animation for form panel fade-in (used in auth forms) */
@keyframes formFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Animation for tab panel fade-in (used with tab components) */
@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* --- Animation Application Utility Classes (Optional) --- */
/* These classes can be added to elements to trigger animations */

.animate-fadeIn {
  animation: fadeIn 0.5s var(--transition-timing) forwards;
}

.animate-fadeOut {
  animation: fadeOut 0.5s var(--transition-timing) forwards;
}

.animate-fadeInScaleUp {
  animation: fadeInScaleUp 0.4s var(--transition-timing) forwards;
}

.animate-slideInUp {
  animation: slideInUp 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; /* Example timing function */
}

.animate-slideInDown {
  animation: slideInDown 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.animate-bounceIn {
  animation: bounceIn 0.6s var(--transition-timing) forwards;
}

.animate-pulse {
  animation: pulse 1.5s infinite var(--transition-timing);
}

/* Example: Apply with delay or different duration */
/*
.animate-fadeIn-delay-1s {
  animation: fadeIn 0.5s var(--transition-timing) 1s forwards;
}
.animate-slideInUp-fast {
  animation: slideInUp 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
*/

/*
  Notes on Usage:
  - The '.animated-gradient' class (often on headers or CTA sections) will use 'gradientAnimation' or 'gradientAnimationAlternate'.
    The animation itself is typically applied directly in the CSS for those components (e.g., in components.css or section-specific CSS).
  - Sparkle effects for buttons (using 'glimmerSparkle') are usually triggered by JavaScript.
  - The '.loading-spinner' component (styled in components.css) uses the 'spin' animation.
  - Rive animations often have their own 'fadeIn' logic handled by JS or iframe onload events.
*/