/* Animation initial states */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in {
    opacity: 0;
    transition: opacity 1.2s ease-out;
}

.slide-up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Class added via JS */
.appear {
    opacity: 1;
    transform: translate(0);
}

/* Specific infinite animations */
@keyframes float {
    0% {
        transform: translateY(0px) rotateY(-15deg) rotateX(10deg);
    }

    50% {
        transform: translateY(-15px) rotateY(-15deg) rotateX(10deg);
    }

    100% {
        transform: translateY(0px) rotateY(-15deg) rotateX(10deg);
    }
}

.mockup-card.appear {
    animation: float 6s ease-in-out infinite;
}

.mockup-card:hover {
    animation: none;
    /* Let the hover transform take over from style.css */
}

@keyframes pulse-glow {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }

    100% {
        opacity: 0.3;
        transform: scale(1);
    }
}

.glow-orb {
    animation: pulse-glow 8s ease-in-out infinite;
}