/* ==================== KEYFRAMES ANIMATIONS ==================== */

/* Fade In - Fade Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Slide In From Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In From Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Float Animation - para blobs decorativos */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(30px);
    }
}

/* Glow Pulse */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(196, 181, 232, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(196, 181, 232, 0.4);
    }
}

/* Scale In */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Rotate */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Bounce */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Shimmer - para efecto brillante en tarjetas */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* ==================== SCROLL REVEAL ANIMATIONS ==================== */

/* Aplicadas con IntersectionObserver en main.js */
.reveal {
    opacity: 0;
    transform: translateY(30px);
}

.reveal.active {
    animation: fadeInUp 0.8s ease forwards;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
}

.reveal-left.active {
    animation: slideInLeft 0.8s ease forwards;
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
}

.reveal-right.active {
    animation: slideInRight 0.8s ease forwards;
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
}

.reveal-scale.active {
    animation: scaleIn 0.8s ease forwards;
}

/* ==================== STAGGER ANIMATION ==================== */

.stagger-item {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0s; }
.stagger-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-item:nth-child(3) { animation-delay: 0.2s; }
.stagger-item:nth-child(4) { animation-delay: 0.3s; }
.stagger-item:nth-child(5) { animation-delay: 0.4s; }
.stagger-item:nth-child(6) { animation-delay: 0.5s; }

/* ==================== HOVER ANIMATIONS ==================== */

/* Lift Effect */
.lift-on-hover {
    transition: all 0.3s ease;
}

.lift-on-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Glow on Hover */
.glow-on-hover {
    transition: all 0.3s ease;
}

.glow-on-hover:hover {
    box-shadow: 0 0 30px rgba(196, 181, 232, 0.4);
}

/* Grow on Hover */
.grow-on-hover {
    transition: transform 0.3s ease;
}

.grow-on-hover:hover {
    transform: scale(1.05);
}

/* ==================== TEXT ANIMATIONS ==================== */

/* Typing Effect - si se necesita en el future */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    0%, 50%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* ==================== LOADING ANIMATIONS ==================== */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ==================== TRANSITION UTILITIES ==================== */

.transition-all {
    transition: all 0.3s ease;
}

.transition-smooth {
    transition: all 0.5s ease;
}

.transition-fast {
    transition: all 0.15s ease;
}

/* ==================== SPECIFIC ELEMENT ANIMATIONS ==================== */

/* Navbar animations */
.navbar.scrolled {
    animation: fadeIn 0.3s ease;
}

/* Hero animations handled by .anim-blur-up in style.css */

/* Button hover animations */
.btn {
    transition: all 0.3s ease;
}

.btn:active {
    transform: scale(0.98);
}

/* Service cards stagger */
.servicio-card {
    animation: fadeInUp 0.8s ease forwards;
}

.servicio-card:nth-child(1) { animation-delay: 0s; }
.servicio-card:nth-child(2) { animation-delay: 0.1s; }
.servicio-card:nth-child(3) { animation-delay: 0.2s; }
.servicio-card:nth-child(4) { animation-delay: 0.3s; }

/* Portfolio items animation */
.portfolio-item {
    animation: scaleIn 0.6s ease forwards;
}

.portfolio-item.hidden {
    animation: fadeIn 0.3s ease forwards;
}

.portfolio-item:nth-child(1) { animation-delay: 0s; }
.portfolio-item:nth-child(2) { animation-delay: 0.1s; }
.portfolio-item:nth-child(3) { animation-delay: 0.2s; }
.portfolio-item:nth-child(4) { animation-delay: 0.3s; }
.portfolio-item:nth-child(5) { animation-delay: 0.4s; }
.portfolio-item:nth-child(6) { animation-delay: 0.5s; }

/* Filter button animation */
.filtro-btn {
    transition: all 0.3s ease;
}

.filtro-btn:active {
    transform: scale(0.95);
}

/* ==================== SMOOTH SCROLLING ==================== */

html {
    scroll-behavior: smooth;
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */

/* Use will-change sparingly for elements that will animate */
.navbar {
    will-change: background-color, backdrop-filter;
}

.servicio-card {
    will-change: transform, box-shadow;
}

.portfolio-item {
    will-change: opacity, transform;
}

/* ==================== DARK MODE & LIGHT TRANSITIONS ==================== */

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==================== MEDIA QUERY ANIMATIONS ==================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}