/* Animación de zoom lento */
@keyframes slow-zoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

/* Animación de deslizamiento hacia arriba */
@keyframes slide-up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Animación de fade in */
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Clases de animación */
.animate-slow-zoom {
    animation: slow-zoom 15s ease-out forwards;
}

.animate-slide-up {
    animation: slide-up 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-up-delayed {
    animation: slide-up 1s ease-out 0.8s forwards;
}

.animate-fade-in {
    animation: fade-in 2s ease-out forwards;
} 

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
    }
    
    .animate-fade-in {
    animation: fade-in 1.2s ease-out forwards;
    animation-delay: 0.4s;
    }
      
    .animate-slide-left-on-scroll {
        opacity: 0;
        transform: translateX(-50px);
      }
      
      @keyframes fade-in-up {
        0% {
          opacity: 0;
          transform: translateY(30px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      .animate-fade-in-up-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: all 1s ease-out;
      }
      .animate-fade-in-up-on-scroll.visible {
        opacity: 1;
        transform: translateY(0);
      }

/* Base animation classes */
.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.translate-y-0 {
    transform: translateY(0);
}

.translate-y-10 {
    transform: translateY(2.5rem);
}

/* Animated text section */
#animated-text h2 {
    opacity: 0;
    transform: translateY(2.5rem);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

#animated-text h2.line-1 {
    transition-delay: 0.2s;
}

#animated-text h2.line-2 {
    transition-delay: 0.4s;
}

#animated-text h2.line-3 {
    transition-delay: 0.6s;
}

#animated-text h2.line-4 {
    transition-delay: 0.8s;
}

#animated-text h2.line-5 {
    transition-delay: 1s;
}

/* Transition classes */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 1000ms;
}

@keyframes reveal-zoom-blur {
    0% {
      opacity: 0;
      transform: scale(0.9);
      filter: blur(6px);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      filter: blur(0);
    }
  }
  
  .animate-statement {
    animation: reveal-zoom-blur 1.2s ease-out 0.3s forwards;
  }
  
.statement-line {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(6px);
    transition: all 0.8s ease-out;
}

.statement-line.animate-statement {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

#statement-container .statement-line:nth-child(1) {
    transition-delay: 0.2s;
}

#statement-container .statement-line:nth-child(2) {
    transition-delay: 0.4s;
}

#statement-container .statement-line:nth-child(3) {
    transition-delay: 0.6s;
}
  
.animate-gallery-fade img {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  
  .animate-gallery-fade.visible img {
    opacity: 1;
    transform: translateY(0);
  }

/* Animaciones para la galería */
.gallery-animate {
    opacity: 0;
    transform: translateY(100%);
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-animate.active {
    opacity: 1;
    transform: translateY(0);
}

.gallery-line-animate {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.8s;
}

.gallery-line-animate.active {
    transform: scaleX(1);
}

.gallery-item-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item-animate.active {
    opacity: 1;
    transform: translateY(0);
}

/* Delays para los elementos de la galería */
.delay-100 { transition-delay: 0.2s; }
.delay-200 { transition-delay: 0.4s; }
.delay-300 { transition-delay: 0.6s; }
.delay-400 { transition-delay: 0.8s; }
.delay-500 { transition-delay: 1s; }
.delay-600 { transition-delay: 1.2s; }

/* Keyframes personalizados */
@keyframes slideLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* Aplicación */
  .animate-slide-left {
    opacity: 0;
    animation: slideLeft 1s ease-out forwards;
  }
  
  .animate-slide-right {
    opacity: 0;
    animation: slideRight 1s ease-out forwards;
  }
  
  .delay-100 {
    animation-delay: 0.1s;
  }
  .delay-200 {
    animation-delay: 0.2s;
  }
  
/* Animaciones para estadísticas */
.stats-animate {
    opacity: 0;
    transform: translateY(100%);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.stats-animate.active {
    opacity: 1;
    transform: translateY(0);
}

/* Delays para las estadísticas */
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* Animaciones para estadísticas */
.stats-item.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Delays */
.delay-200 {
    transition-delay: 0.2s !important;
}
.delay-300 {
    transition-delay: 0.3s !important;
}
.delay-400 {
    transition-delay: 0.4s !important;
}
.delay-500 {
    transition-delay: 0.5s !important;
}

/* Image Loading Animation */
@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Map Path Drawing Animation */
@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* Hero Section Animations */
.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-image-container {
  position: absolute;
  inset: 0;
  background-color: #4c5473;
  overflow: hidden;
}

.hero-image-blur {
  position: absolute;
  inset: 0;
  background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDABQODxIPDRQSEBIXFRQdHx4eHRoaHSQtJSEkLzYvLy02LjY2OjY2Njo2NjY2NjY2NjY2NjY2NjY2NjY2NjY2Njb/2wBDAR0XFx8aHx4fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k=');
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  transform: scale(1.1);
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: all 1.5s ease-out;
  will-change: transform;
  animation: hero-zoom 15s ease-out forwards;
}

.hero-image.loaded {
  opacity: 1;
}

.hero-image-blur.fade {
  opacity: 0;
}

@keyframes hero-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

/* Delay utilities for animations */
.animate-delay-100 {
  animation-delay: 0.1s;
}

.animate-delay-200 {
  animation-delay: 0.2s;
}

.animate-delay-300 {
  animation-delay: 0.3s;
}

.animate-delay-400 {
  animation-delay: 0.4s;
}

.animate-delay-500 {
  animation-delay: 0.5s;
}

/* Animaciones del Hero */
@keyframes hero-text-reveal {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    opacity: 0;
    transform: translateY(-2.5rem);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-title-delay-1 {
    animation-delay: 0.3s;
}

.hero-title-delay-2 {
    animation-delay: 0.6s;
}

.hero-title-delay-3 {
    animation-delay: 0.9s;
}

/* Statement section animations */
.statement-enter {
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.7s ease-out;
}

.statement-enter.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gallery animations */
.gallery-img {
    opacity: 0;
    transform: translateY(2rem);
    transition: all 1s ease-out;
}

/* Map animation */
.map-svg {
    opacity: 0;
    transform: scale(0.98);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.map-svg.loaded {
    opacity: 1;
    transform: scale(1);
}

/* Delay utilities */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* Animación de flotación para imágenes de estadísticas */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.hover-float:hover {
    animation-play-state: paused;
}

/* Animación de fade in para imágenes de estadísticas */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}