/* 快手页面动画效果 */

/* 淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 自下向上淡入 */
@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(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 自右向左淡入 */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 缩放淡入 */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 旋转淡入 */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-15deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* 脉冲动画 */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.005);
    }
    100% {
        transform: scale(1);
    }
}

/* 闪光效果 */
@keyframes shine {
    from {
        background-position: -200% 0;
    }
    to {
        background-position: 200% 0;
    }
}

/* 浮动效果 */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* 左右摇摆 */
@keyframes swing {
    0%, 100% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

/* 波浪动画 */
@keyframes wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1);
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.8);
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1);
    }
}

/* 快手特色"流动"动画 - 类似短视频滑动 */
@keyframes flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 快手logo旋转缩放 */
@keyframes logoSpin {
    0% {
        transform: rotate(0) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.2);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* 打字机效果 */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink {
    50% { border-color: transparent }
}

/* 快手炫彩闪烁 */
@keyframes colorShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 应用动画的通用类 */
.ks-animate {
    opacity: 0;
}

.ks-animate.show {
    opacity: 1;
}

/* 淡入动画类 */
.ks-fade-in {
    animation: fadeIn 1s ease forwards;
}

.ks-fade-in-up {
    animation: fadeInUp 1s ease forwards;
}

.ks-fade-in-down {
    animation: fadeInDown 1s ease forwards;
}

.ks-fade-in-left {
    animation: fadeInLeft 1s ease forwards;
}

.ks-fade-in-right {
    animation: fadeInRight 1s ease forwards;
}

.ks-zoom-in {
    animation: zoomIn 1s ease forwards;
}

.ks-rotate-in {
    animation: rotateIn 1s ease forwards;
}

/* 应用脉冲动画的类 */
.ks-pulse {
    animation: pulse 3s ease-in-out infinite;
    transform-origin: center;
    transform: scale(1);
    display: inline-block;
}

.ks-float {
    animation: float 6s ease-in-out infinite;
}

.ks-swing {
    animation: swing 5s ease-in-out infinite;
}

.ks-shine {
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: shine 2s infinite;
}

/* 快手特色动画类 */
.ks-flow {
    background: linear-gradient(to right, var(--ks-primary), var(--ks-secondary), var(--ks-primary));
    background-size: 200% 100%;
    animation: flow 5s linear infinite;
}

.ks-logo-spin {
    animation: logoSpin 8s ease infinite;
    transform-origin: center;
}

.ks-color-shift {
    background: linear-gradient(90deg, #FF2E4D, #FFDC00, #FF2E4D);
    background-size: 300% 100%;
    animation: colorShift 5s ease infinite;
}

/* 延迟类 */
.ks-delay-100 { animation-delay: 0.1s; }
.ks-delay-200 { animation-delay: 0.2s; }
.ks-delay-300 { animation-delay: 0.3s; }
.ks-delay-400 { animation-delay: 0.4s; }
.ks-delay-500 { animation-delay: 0.5s; }
.ks-delay-600 { animation-delay: 0.6s; }
.ks-delay-700 { animation-delay: 0.7s; }
.ks-delay-800 { animation-delay: 0.8s; }
.ks-delay-900 { animation-delay: 0.9s; }
.ks-delay-1000 { animation-delay: 1s; }

/* 打字机效果 */
.ks-typing {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--ks-primary);
    animation: typing 2s steps(30, end), blink 0.75s step-end infinite;
}

/* 滚动触发动画 */
.ks-scroll-fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease;
}

.ks-scroll-fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

.ks-scroll-fade-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease;
}

.ks-scroll-fade-left.active {
    opacity: 1;
    transform: translateX(0);
}

.ks-scroll-fade-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 1s ease;
}

.ks-scroll-fade-right.active {
    opacity: 1;
    transform: translateX(0);
}