/* ====================================
   YUNTO STUDIO - COMPREHENSIVE ANIMATIONS
   ==================================== */

/* Fade & Slide Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

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

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

@keyframes scaleInUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Stagger Text Reveal */
@keyframes textReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Button Pop Animation */
@keyframes buttonPop {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Image Entrance */
@keyframes imageSlideIn {
    from {
        opacity: 0;
        transform: translateX(60px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Gentle Float (for hero image) */
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* Pulse Glow Effect */
@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.95);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* Grid Item Stagger */
@keyframes gridItemFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Smooth Entrance */
@keyframes smoothEntrance {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====================================
   UTILITY ANIMATION CLASSES
   ==================================== */

/* Apply to elements that should animate on scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Specific animation utilities */
.slide-in-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-in-left.animate {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-in-right.animate {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.85);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scale-in.animate {
    opacity: 1;
    transform: scale(1);
}

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

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

.delay-600 {
    transition-delay: 0.6s;
}

.delay-700 {
    transition-delay: 0.7s;
}

.delay-800 {
    transition-delay: 0.8s;
}