@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1.242vw);
    }

    100% {
        transform: translateY(0);
    }
}

/* 为每个浮动元素添加动画，使用不同的动画延迟营造错落感 */
.float-item.item1 {
    animation: float 4s ease-in-out infinite;
}

.float-item.item2 {
    animation: float 4s ease-in-out infinite;
    animation-delay: -1s;
}

.float-item.item3 {
    animation: float 4s ease-in-out infinite;
    animation-delay: -2s;
}

.float-item.item4 {
    animation: float 4s ease-in-out infinite;
    animation-delay: -3s;
}

.float-item.item5 {
    animation: float 4s ease-in-out infinite;
    animation-delay: -4s;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-60px);
    }

    60% {
        transform: translateY(-30px);
    }
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fadeInTopLeft {
    from {
        opacity: 0;
        transform: translate(-100px, -100px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes fadeInTopRight {
    from {
        opacity: 0;
        transform: translate(100px, -100px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes fadeInBottomLeft {
    from {
        opacity: 0;
        transform: translate(-100px, 100px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes fadeInBottomRight {
    from {
        opacity: 0;
        transform: translate(100px, 100px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

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

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        transform: scale(0.3) translateX(-100px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 动画类 */
.animate-fade-down.active {
    animation: fadeDown 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.animate-fade-up.active {
    animation: fadeUp 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.animate-zoom-in.active {
    animation: zoomIn 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.animate-fade-in.active {
    animation: fadeIn 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

/* 基础动画类 */
.animate-bounce,
.animate-fade-left,
.animate-fade-right,
.animate-zoom-left,
.animate-fade-down,
.animate-fade-up,
.animate-zoom-in,
.animate-fade-in {
    opacity: 0;
    will-change: transform, opacity;
}

/* 性能优化 */
.app-preview-content,
.app-preview-img {
    will-change: transform, opacity;
    transition: opacity 0.3s;
}

/* 激活状态动画 */
.animate-bounce.active {
    opacity: 1;
    animation: bounce 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.animate-fade-left.active {
    animation: fadeInLeft 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.animate-fade-right.active {
    animation: fadeInRight 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.animate-zoom-left.active {
    animation: zoomInLeft 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

/* 浮动元素动画 */
.float-item {
    opacity: 0;
    will-change: transform, opacity;
}

.float-item.active {
    opacity: 1;
}

.float-item.item1.active {
    animation: fadeInTopLeft 1.2s forwards, float 3s ease-in-out infinite;
}

.float-item.item2.active {
    animation: fadeInBottomLeft 1.2s forwards, float 3s ease-in-out infinite;
    animation-delay: 0.2s;
}

.float-item.item3.active {
    animation: fadeInBottomRight 1.2s forwards, float 3s ease-in-out infinite;
    animation-delay: 0.4s;
}

.float-item.item4.active {
    animation: fadeInTopRight 1.2s forwards, float 3s ease-in-out infinite;
    animation-delay: 0.6s;
}

/* 非激活状态 */
.animate-bounce.inactive,
.animate-fade-left.inactive,
.animate-fade-right.inactive,
.animate-zoom-left.inactive,
.float-item.inactive {
    opacity: 0;
    animation: none;
    transition: opacity 0.3s;
}