/* Section transition effects for single-page website */

/* Base transition for all sections */
section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  position: relative;
}

/* When section becomes visible */
section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Active section highlight */
section.active-section {
  position: relative;
}

section.active-section::before {
  content: '';
  position: absolute;
  left: 0;
  top: 80px;
  width: 5px;
  height: 50px;
  background-color: var(--primary-color);
  animation: pulseHighlight 1.5s infinite alternate;
}

@keyframes pulseHighlight {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}

/* Different animations for different section types */
#home.visible {
  animation: fadeIn 1s ease forwards;
}

#about.visible,
#team.visible {
  animation: slideInFromLeft 0.8s ease forwards;
}

#services.visible {
  animation: slideInFromRight 0.8s ease forwards;
}

#events.visible {
  animation: scaleIn 0.8s ease forwards;
}

#contact.visible {
  animation: fadeInUp 0.8s ease forwards;
}

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

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section transition animation for items within sections */
.section-animated-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--item-index, 0) * 0.1s);
}

.section-animated-item.visible {
  opacity: 1;
  transform: translateY(0);
}