/**
 * About Page - Animation Styles
 * Contains all animations, keyframes, and transition effects
 */

/* Animation Classes */
.modern-fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  transform: translateY(40px);
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.modern-fade-in-delay {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
  transform: translateY(40px);
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.2s;
}

.modern-fade-in-delay-2 {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
  transform: translateY(40px);
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.4s;
}

[data-animation="fade-up"] {
  opacity: 0;
  transform: translateY(30px);
  transition: var(--transition-slow);
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-animation="fade-up"].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Keyframe Animations */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% { transform: translate(-10%, -10%) rotate(0deg); }
  33% { transform: translate(-5%, -15%) rotate(120deg); }
  66% { transform: translate(-15%, -5%) rotate(240deg); }
}

@keyframes pulse {
  0%, 100% { transform: scaleX(1); opacity: 0.8; }
  50% { transform: scaleX(1.2); opacity: 1; }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float-reverse {
  0%, 100% { transform: translate(10%, 10%) rotate(0deg); }
  33% { transform: translate(5%, 15%) rotate(-120deg); }
  66% { transform: translate(15%, 5%) rotate(-240deg); }
}

/* Override animations for banner image */
.about-page-wrapper .about-hero-section * {
  animation: none !important;
  transition: none !important;
}

/* Ensure sparkles icon is visible */
.fa-sparkles {
  display: inline-block !important;
}