/* Base animation durations and timing functions */
:root {
    --animate-duration: 0.8s;
    --animate-delay: 0s;
    --animate-timing: cubic-bezier(0.5, 0, 0.3, 1);
}

/* Animation base class */
[class*="animate-"] {
    animation-duration: var(--animate-duration);
    animation-fill-mode: both;
    animation-timing-function: var(--animate-timing);
    will-change: transform, opacity;
}

/* Fade In animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.animate-fade-in {
    animation-name: fadeIn;
}

/* Fade Out animation */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.animate-fade-out {
    animation-name: fadeOut;
}

/* Slide Up animation */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-slide-up {
    animation-name: slideUp;
}

/* Slide Down animation */
@keyframes slideDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(30px);
    }
}
.animate-slide-down {
    animation-name: slideDown;
}

/* Slide in from right */
@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.animate-slide-right {
    animation-name: slideRight;
}

/* Slide in from left */
@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.animate-slide-left {
    animation-name: slideLeft;
}

/* Zoom in animation */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.animate-zoom-in {
    animation-name: zoomIn;
}

/* Zoom out animation */
@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}
.animate-zoom-out {
    animation-name: zoomOut;
}

/* Bounce animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}
.animate-bounce {
    animation-name: bounce;
}

/* For reveal elements */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Delay classes for sequenced animations */
.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; }
.delay-600 { animation-delay: 600ms; }
.delay-800 { animation-delay: 800ms; }
.delay-1000 { animation-delay: 1s; }

/* Efecto para el header al hacer scroll */
header {
    transition: all 0.3s ease;
}

header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 10px 0;
}

/**
 * .animate-on-scroll
 * 
 * Base class for elements that should animate when they enter the viewport.
 * Use with data attributes to control animation behavior:
 * - data-animate-enter: Animation to apply when element enters viewport (e.g. "fade-in", "slide-up")
 * - data-animate-exit: Optional animation to apply when element exits viewport (e.g. "fade-out")
 * - data-delay: Optional delay in milliseconds before animation starts
 * 
 * Example usage:
 * <div class="animate-on-scroll" data-animate-enter="fade-in" data-animate-exit="fade-out" data-delay="200">
 *   Content to animate
 * </div>
 */
 
 /*
.animate-on-scroll {
    visibility: hidden;
    will-change: transform, opacity;
    transition-property: transform, opacity;
    transition-duration: var(--animate-duration, 0.8s);
    transition-timing-function: var(--animate-timing, cubic-bezier(0.5, 0, 0.3, 1));
}

.animate-on-scroll[data-delay] {
    transition-delay: attr(data-delay ms, 0ms);
}

.animate-on-scroll.animate-fade-in {
    visibility: visible;
    animation-name: fadeIn;
    animation-duration: var(--animate-duration, 0.8s);
    animation-timing-function: var(--animate-timing, cubic-bezier(0.5, 0, 0.3, 1));
    animation-fill-mode: both;
}

.animate-on-scroll.animate-slide-up {
    visibility: visible;
    animation-name: slideUp;
    animation-duration: var(--animate-duration, 0.8s);
    animation-timing-function: var(--animate-timing, cubic-bezier(0.5, 0, 0.3, 1));
    animation-fill-mode: both;
}

.animate-on-scroll.animate-slide-right {
    visibility: visible;
    animation-name: slideRight;
    animation-duration: var(--animate-duration, 0.8s);
    animation-timing-function: var(--animate-timing, cubic-bezier(0.5, 0, 0.3, 1));
    animation-fill-mode: both;
}

.animate-on-scroll.animate-slide-left {
    visibility: visible;
    animation-name: slideLeft;
    animation-duration: var(--animate-duration, 0.8s);
    animation-timing-function: var(--animate-timing, cubic-bezier(0.5, 0, 0.3, 1));
    animation-fill-mode: both;
}

.animate-on-scroll.animate-zoom-in {
    visibility: visible;
    animation-name: zoomIn;
    animation-duration: var(--animate-duration, 0.8s);
    animation-timing-function: var(--animate-timing, cubic-bezier(0.5, 0, 0.3, 1));
    animation-fill-mode: both;
}
*/