/* 特效和动画样式 */

/* Ciallo 点击特效 */
.ciallo-effect {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    animation: cialloSimpleFloat 2s ease-out forwards;
    user-select: none;
}

@keyframes cialloSimpleFloat {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px);
    }
}

/* 通用淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 下滑动画 */
@keyframes slideDown {
    from { 
        opacity: 0; 
        transform: translateX(-50%) translateY(-30px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(-50%) translateY(0); 
    }
}

/* 脉冲动画 */
@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* 滑入动画 */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 背景淡入动画 */
@keyframes bgFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* 设置面板相关动画 */
@keyframes settingsSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes settingsSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* 设置面板内容项的逐个动画 */
@keyframes settingsItemSlide {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 躲避动画的弹性效果 - 直接飞出屏幕 */
@keyframes avoidanceElastic {
    0% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(-520%);
    }
    100% {
        transform: translateX(-500%);
    }
}

/* 视频播放器的躲避动画（带缩放） - 直接飞出屏幕 */
@keyframes avoidanceElasticVideo {
    0% {
        transform: translateX(0) scale(1);
    }
    30% {
        transform: translateX(-520%) scale(0.8);
    }
    100% {
        transform: translateX(-500%) scale(0.9);
    }
}

/* 小幅度躲避动画 - 直接飞出屏幕 */
@keyframes avoidanceElasticSmall {
    0% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(-510%);
    }
    100% {
        transform: translateX(-490%);
    }
}

/* 视频项目躲避动画 - 直接飞出屏幕 */
@keyframes avoidanceElasticItem {
    0% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(-530%);
    }
    100% {
        transform: translateX(-510%);
    }
}

/* 视频项目小幅躲避动画 - 直接飞出屏幕 */
@keyframes avoidanceElasticItemSmall {
    0% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(-520%);
    }
    100% {
        transform: translateX(-500%);
    }
}

/* 分类卡片躲避动画 - 卡片1，直接飞出屏幕 */
@keyframes avoidanceElasticCard1 {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    30% {
        transform: translateX(-530%) rotate(-5deg);
    }
    100% {
        transform: translateX(-510%) rotate(-3deg);
    }
}

/* 分类卡片躲避动画 - 卡片2，直接飞出屏幕 */
@keyframes avoidanceElasticCard2 {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    30% {
        transform: translateX(-520%) rotate(4deg);
    }
    100% {
        transform: translateX(-500%) rotate(2deg);
    }
}

/* 分类卡片躲避动画 - 卡片3，直接飞出屏幕 */
@keyframes avoidanceElasticCard3 {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    30% {
        transform: translateX(-520%) rotate(-4deg);
    }
    100% {
        transform: translateX(-500%) rotate(-2deg);
    }
}

@keyframes returnElastic {
    0% {
        transform: translateX(-500%);
    }
    70% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(0);
    }
}

/* 视频播放器返回动画 - 从屏幕外飞回 */
@keyframes returnElasticVideo {
    0% {
        transform: translateX(-500%) scale(0.9);
    }
    70% {
        transform: translateX(60px) scale(1.1);
    }
    100% {
        transform: translateX(0) scale(1);
    }
}

/* 小幅度返回动画 - 从屏幕外飞回 */
@keyframes returnElasticSmall {
    0% {
        transform: translateX(-490%);
    }
    70% {
        transform: translateX(30px);
    }
    100% {
        transform: translateX(0);
    }
}

/* 遮罩层动画 */
@keyframes overlayFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.3;
    }
}

@keyframes overlayFadeOut {
    from {
        opacity: 0.3;
    }
    to {
        opacity: 0;
    }
}

/* 模式切换动画 */
/* 从全部视频切换到分类浏览 - 向右移动并旋转 */
@keyframes switchToCategory {
    0% {
        transform: translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(150%) rotate(5deg) scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: translateX(300%) rotate(10deg) scale(0.6);
        opacity: 0;
    }
}

/* 从分类浏览切换到全部视频 - 向左移动并旋转 */
@keyframes switchToOld {
    0% {
        transform: translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(-150%) rotate(-5deg) scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: translateX(-300%) rotate(-10deg) scale(0.6);
        opacity: 0;
    }
}

/* 分类浏览内容从右侧飞入 */
@keyframes switchFadeIn {
    0% {
        transform: translateX(-100px) rotate(-3deg) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* 全部视频内容从左侧飞入 */
@keyframes switchFadeInFromRight {
    0% {
        transform: translateX(100px) rotate(3deg) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}
