/* ==========================================================================
   CSS ANIMATIONS - Manuel Zacarias
   ========================================================================== */

/* Entrance animations for hero elements */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes floatGlow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }
}

/* Shimmer pulse for elements */
@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.5;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.4);
  }
}

/* Rotation for border gradient */
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* Standard animation helper classes */
.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
  animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Scroll-driven animations (Progressive Enhancement) */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    
    @keyframes revealUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .reveal-on-scroll {
      animation: revealUp auto linear backwards;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    /* Staggered entry elements list */
    .stagger-item-scroll {
      animation: revealUp auto linear backwards;
      animation-timeline: view();
      animation-range: entry 5% cover 25%;
    }
  }
}

/* Reduced motion preference configuration */
@property --animation-reduced {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: var(--animation-reduced) !important;
    transition: none !important;
  }
  .reveal-on-scroll,
  .stagger-item-scroll,
  .animate-fade-in-up,
  .animate-fade-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}