/* Transiciones suaves entre páginas */

/* Contenedor principal con transición de entrada */
body {
  opacity: 0;
  animation: pageFadeIn 0.6s ease-out forwards;
}

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

/* El navbar no debe tener transición para que se vea inmediatamente */
.navbar {
  opacity: 1 !important;
  animation: none !important;
}

/* Contenido principal con transición más suave */
main,
.page-content,
.about-page,
.contact-page,
.blog-page,
.proyectos-page,
.servicios-page {
  opacity: 0;
  animation: contentFadeIn 0.8s ease-out 0.2s forwards;
}

/* Excluir sección de tecnologías de la transición de páginas */
.tech-section {
  opacity: 1 !important;
  animation: none !important;
}

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

/* Transición suave para elementos específicos */
.hero-section,
.about-hero,
.proyectos-hero,
.servicios-hero {
  opacity: 0;
  animation: heroFadeIn 1s ease-out 0.3s forwards;
}

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

/* Evitar parpadeo en carga inicial */
body.loaded {
  opacity: 1;
}

/* Transición al hacer clic en enlaces (fade out antes de navegar) */
body.page-transitioning {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

/* Asegurar que el navbar siempre sea visible */
.navbar,
.nav-container,
.nav-links {
  opacity: 1 !important;
  transition: none !important;
}