/* ================================================
   SIMPLE ANIMATION SYSTEM
   ================================================ */

/* Base state - hidden before animation */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
}

/* Animated state - visible with animation */
[data-animate].animated {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s ease-out;
}

/* ================================================
   ANIMATION TYPES
   ================================================ */

/* Fade In Up (default) */
[data-animate="fadeInUp"].animated {
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
[data-animate="fadeInDown"].animated {
    animation: fadeInDown 0.8s ease-out forwards;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left */
[data-animate="fadeInLeft"].animated {
    animation: fadeInLeft 0.8s ease-out forwards;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right */
[data-animate="fadeInRight"].animated {
    animation: fadeInRight 0.8s ease-out forwards;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In (simple) */
[data-animate="fadeIn"].animated {
    animation: fadeIn 0.8s ease-out forwards;
}

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

/* Scale In */
[data-animate="scaleIn"].animated {
    animation: scaleIn 0.6s ease-out forwards;
}

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

/* Bounce In */
[data-animate="bounceIn"].animated {
    animation: bounceIn 0.8s ease-out forwards;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ================================================
   ANIMATION DELAYS
   ================================================ */

[data-delay="100"].animated { animation-delay: 0.1s; }
[data-delay="200"].animated { animation-delay: 0.2s; }
[data-delay="300"].animated { animation-delay: 0.3s; }
[data-delay="400"].animated { animation-delay: 0.4s; }
[data-delay="500"].animated { animation-delay: 0.5s; }
[data-delay="600"].animated { animation-delay: 0.6s; }
[data-delay="700"].animated { animation-delay: 0.7s; }

/* ================================================
   HOVER EFFECTS
   ================================================ */

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

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Pulse on hover */
.hover-pulse:hover {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Zoom image on hover */
.hover-zoom {
    overflow: hidden;
}

.hover-zoom img {
    transition: transform 0.5s ease;
}

.hover-zoom:hover img {
    transform: scale(1.1);
}

/* Button hover effect */
.hover-button {
    transition: all 0.3s ease;
}

.hover-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* ================================================
   STAGGER ANIMATION (for lists)
   ================================================ */

/* Use data-stagger on parent, children animate in sequence */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
}

[data-stagger] > *.animated {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease-out;
}

[data-stagger] > *:nth-child(1).animated { transition-delay: 0.1s; }
[data-stagger] > *:nth-child(2).animated { transition-delay: 0.2s; }
[data-stagger] > *:nth-child(3).animated { transition-delay: 0.3s; }
[data-stagger] > *:nth-child(4).animated { transition-delay: 0.4s; }
[data-stagger] > *:nth-child(5).animated { transition-delay: 0.5s; }
[data-stagger] > *:nth-child(6).animated { transition-delay: 0.6s; }

/* ================================================
   MOBILE - REDUCE ANIMATIONS
   ================================================ */

@media (max-width: 768px) {
    /* Faster animations on mobile */
    [data-animate].animated {
        animation-duration: 0.5s !important;
        transition-duration: 0.5s !important;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    [data-animate],
    [data-animate].animated,
    .hover-lift,
    .hover-pulse,
    .hover-zoom img {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}