/* ==================== 首页滚动动画效果 ==================== */

/* 从下方弹跳进入 - 夸张版 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(80px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 从左快速滑入 - 夸张版 */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px) rotate(-5deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

/* 从右快速滑入 - 夸张版 */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px) rotate(5deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

/* 缩放弹跳进入 - 夸张版 */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* 当元素进入视口时，添加animated类启动动画 */
.animate-fade-in-up.animated {
    animation: fadeInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-slide-in-left.animated {
    animation: slideInLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-slide-in-right.animated {
    animation: slideInRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-scale-in.animated {
    animation: scaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}