/* Animation Framework with Intersection Observer */

/* Base animation classes */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.animate-fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

.animate-fade-in.animate-in {
  opacity: 1;
}

.animate-slide-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-slide-up.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.animate-slide-right {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-slide-right.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.animate-scale-up {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out,
              transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animate-scale-up.animate-in {
  opacity: 1;
  transform: scale(1);
}

.animate-stagger {
  opacity: 0;
  transform: translateY(20px);
}

.animate-stagger.animate-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Profile image hover animation */
.profile-image {
  transition: var(--theme-transition), transform 0.3s ease;
}

.profile-image:hover {
  transform: scale(1.05);
}

/* Card hover animations */
.publications-card,
.contact-card,
.research-card,
.publication-item {
  transition: var(--theme-transition), transform 0.2s ease, box-shadow 0.2s ease;
}

.publications-card:hover,
.contact-card:hover,
.research-card:hover,
.publication-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Button micro-interactions */
.theme-toggle,
.mobile-menu-button,
.nav-link,
.contact-link,
.maps-link-overlay,
.filter-btn,
.action-btn {
  transition: var(--theme-transition), transform 0.2s ease;
}

.theme-toggle:hover,
.mobile-menu-button:hover,
.filter-btn:hover,
.action-btn:hover {
  transform: scale(1.05);
}

.nav-link:hover {
  transform: translateY(-1px);
}

/* Mobile navigation animations */
.mobile-nav-item {
  transition: var(--theme-transition), transform 0.2s ease;
}

.mobile-nav-item:hover {
  transform: scale(1.1);
}

/* Research card filtering animations */
.research-card.hidden {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.research-card.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Loading animations */
.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--border-primary);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.image-loading {
  position: relative;
  overflow: hidden;
}

.image-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shimmer-sweep 1.5s infinite;
}

@keyframes shimmer-sweep {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Scroll progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--primary-color);
  z-index: 1001;
  transition: width 0.1s ease;
  width: 0%;
}

/* Bounce animation for active navigation */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0,-15px,0);
  }
  70% {
    transform: translate3d(0,-7px,0);
  }
  90% {
    transform: translate3d(0,-3px,0);
  }
}

/* Responsive image improvements */
img {
  max-width: 100%;
  height: auto;
}

.profile-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}