/* Animations */

/* Fade In Animation */
.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide Up Animation */
.slide-up {
  opacity: 0;
  transform: translateY(30px);
}

/* Slide Left Animation */
.slide-left {
  opacity: 0;
  transform: translateX(30px);
}

/* Slide Right Animation */
.slide-right {
  opacity: 0;
  transform: translateX(-30px);
}

/* Header Scroll Animation */
header {
  transition: background-color 0.3s, box-shadow 0.3s, padding 0.3s;
}

header.scrolled {
  background-color: var(--card-bg);
  box-shadow: var(--shadow-md);
  padding: 0.5rem 0;
}

/* Skill Bar Animation */
.skill-level {
  width: 0;
}

/* Card Hover Effects */
.timeline-content, 
.education-item, 
.skill-item {
  transition: transform 0.3s, box-shadow 0.3s;
}

.timeline-content:hover, 
.education-item:hover, 
.skill-item:hover {
  transform: translateY(0px);
  box-shadow: var(--shadow-lg);
}

/* Menu Toggle Animation */
.menu-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Theme Toggle Animation */
#theme-toggle i {
  transition: transform 0.3s, opacity 0.3s;
}

#theme-toggle:hover i {
  transform: rotate(30deg);
}

/* Loading Animation for Images */
.image-container {
  position: relative;
}

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

.image-container.loading::before {
  display: block;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Animated Background for Hero Section */
.animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  overflow: hidden;
  z-index: -1;
}

.animated-bg .shape {
  position: absolute;
  background-color: var(--primary-color);
  border-radius: 50%;
  opacity: 0.2;
  transform-origin: center;
  animation: float 20s infinite ease-in-out;
}

.animated-bg .shape:nth-child(1) {
  width: 300px;
  height: 300px;
  top: -150px;
  left: -100px;
  animation-delay: 0s;
}

.animated-bg .shape:nth-child(2) {
  width: 200px;
  height: 200px;
  top: 50%;
  right: -100px;
  animation-delay: 5s;
}

.animated-bg .shape:nth-child(3) {
  width: 150px;
  height: 150px;
  bottom: -50px;
  left: 30%;
  animation-delay: 10s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  25% {
    transform: translateY(-20px) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  75% {
    transform: translateY(20px) rotate(-5deg);
  }
}

/* Animating elements when they come into view */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.6s, transform 0.6s;
}

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