/**
 * Cube Generator Styles 动画效果
 * 3D立方体生成器专用样式 - 原封不动移植Demo动画
 * 
 * @author EchoScan Team
 * @version 1.0.0
 */

/* ========================================
   🎲 3D立方体容器 
   ======================================== */

.tech-cube-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    margin: 4rem auto;
    perspective: 1000px;
    position: relative;
    overflow: visible;
    z-index: 5;
}

.cube-scene {
    width: 300px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    cursor: pointer;
    /* Demo中没有默认的transition，旋转是通过JS控制的 */
}

/* ========================================
   🎨 立方体面样式 
   ======================================== */

.cube-face {
    position: absolute;
    width: 250px;
    height: 250px;
    background: transparent;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: none;
    font-family: 'VT323', 'Fusion Pixel Font', monospace;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    transform-origin: center center;
    z-index: 1;
}

/* 渐变边框特效  */
/* 渐变边框特效  */
/* 渐变边框特效 - 使用outline方案 */
.cube-face::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #21f3a3, #2196F3);
    border-radius: 17px;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    padding: 2px;

}
.cube-face::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8); 
    border-radius: 15px;
    z-index: -1;
}

/* 悬浮时的边框效果  */
/* 悬浮时的边框效果 - 顺序点亮动画 */
/* 移除全局的hover效果，改为单独控制每个面 */

/* 为每个面设置不同的延迟时间 - 顺序点亮 */
.cube-scene:hover .face-front::before {
    opacity: 0.8;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0s; /* 第1个面立即点亮 */
}

.cube-scene:hover .face-right::before {
    opacity: 0.8;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.1s; /* 第2个面延迟150ms */
}

.cube-scene:hover .face-back::before {
    opacity: 0.8;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.15s; /* 第3个面延迟300ms */
}

.cube-scene:hover .face-left::before {
    opacity: 0.8;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.2s; /* 第4个面延迟450ms */
}

/* 鼠标离开时的反向消失动画 */
.cube-face::before {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.face-front::before {
    transition-delay: 0.35s; /* 最后一个消失 */
}

.face-right::before {
    transition-delay: 0.25s; /* 第三个消失 */
}

.face-back::before {
    transition-delay: 0.15s; /* 第二个消失 */
}

.face-left::before {
    transition-delay: 0s; /* 第一个消失 */
}
/* ========================================
   📐 立方体面位置定义 
   ======================================== */

.face-front { 
    transform: translateZ(125px); 
}

.face-back { 
    transform: translateZ(-125px) rotateY(180deg); 
}

.face-right { 
    transform: rotateY(90deg) translateZ(125px); 
}

.face-left { 
    transform: rotateY(-90deg) translateZ(125px); 
}

/* ========================================
   🎭 立方体面内容样式 
   ======================================== */

.face-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px currentColor;
    animation: iconPulse 8s ease-in-out infinite;
}

/* ========================================
   🌐 多语言字体大小调整
   ======================================== */

/* 中文和日语字体调整 - 标准屏幕 */
:lang(zh-CN) .face-icon,
:lang(ja-JP) .face-icon {
    font-size: 2.2rem; /* 比英文小20% */
    letter-spacing: 0.05em; /* 增加字符间距 */
}

/* 英文保持原大小 */
:lang(en-US) .face-icon {
    font-size: 2.6rem;
    letter-spacing: normal;
}


/* 正方体检测结果 */
.face-data {
    font-size: 1.5rem;
    color: #7dea00;
    margin-top: 4rem;
    text-align: center;
    opacity: 0.9;
}

.face-data .detected {
    color: #7dea00;
    text-shadow: 0 0 12px rgba(125, 234, 0, 0.6);
}

.face-data .os-risk {
    color: #ff4d4f;
    text-shadow: 0 0 12px rgba(255, 77, 79, 0.6);
}

.face-icon.os-risk {
    color: #ff4d4f;
    text-shadow: 0 0 15px rgba(255, 77, 79, 0.75);
}

.cube-face.os-risk-frame::before {
    background: linear-gradient(135deg, #ff4d4f, #ff7875);
}

.cube-scene:hover .cube-face.os-risk-frame {
    box-shadow: 0 0 14px rgba(255, 77, 79, 0.7), inset 0 0 12px rgba(255, 77, 79, 0.25);
}

/* ========================================
   🌈 各面的特殊配色 
   ======================================== */

.face-browser .face-icon { 
    color: #4facfe;
    /* Demo中没有text-shadow */
}

.face-version .face-icon { 
    color: #4facfe;
    /* Demo中没有text-shadow */
}

.face-engine .face-icon { 
    color: #4facfe;
    /* Demo中没有text-shadow */
}

.face-os .face-icon { 
    color: #4facfe;
    /* Demo中没有text-shadow */
}

.face-browser .face-icon.os-risk,
.face-version .face-icon.os-risk,
.face-os .face-icon.os-risk {
    color: #ff4d4f;
    text-shadow: 0 0 15px rgba(255, 77, 79, 0.75);
}

/* ========================================
   ✨ 悬浮和交互效果 
   ======================================== */

.cube-scene:hover .cube-face {
    box-shadow: 
        0 0 10px #38f9d7, 
        inset 0 0 10px rgba(19, 131, 133, 0.1);
}

/* 展开状态  */
.cube-scene.expanded .cube-face {
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   🔄 动画定义 
   ======================================== */

/* 图标大小*/
@keyframes iconPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.8; 
    }
    50% { 
        transform: scale(1.1); 
        opacity: 1; 
    }
}
/* 渐进显示动画 */
@keyframes fadeInSlide {
    0% { 
        opacity: 0; 
        transform: translateY(20px) scale(0.9);
        filter: blur(2px);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* 渐进消失动画 */
@keyframes fadeOutSlide {
    0% { 
        opacity: 1; 
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    100% { 
        opacity: 0; 
        transform: translateY(-20px) scale(0.9);
        filter: blur(2px);
    }
}

/* 展开状态的面动画类 */
.cube-face.face-appear {
    animation: fadeInSlide 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.cube-face.face-disappear {
    animation: fadeOutSlide 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 边框渐进效果 */
.cube-face.face-appear::before {
    animation: borderGlow 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes borderGlow {
    0% { 
        opacity: 0;
        transform: scale(0.95);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.02);
    }
    100% { 
        opacity: 0.9;
        transform: scale(1);
    }
}

/* 加载数据动画  */
.loading-dots {
    display: inline-block;
}

.loading-dots::after {
    content: '...';
    animation: loadingDots 1s steps(3, end) infinite;
}

@keyframes loadingDots {
    0%, 33% { content: '.'; }
    34%, 66% { content: '..'; }
    67%, 100% { content: '...'; }
}


/* 数据更新动画  */
.data-updating {
    animation: dataUpdate 1s ease-in-out;
}

@keyframes dataUpdate {
    0% { 
        color: #fff; 
    }
    50% { 
        color: #4facfe; 
        text-shadow: 0 0 10px #4facfe;
    }
    100% { 
        color: #8BC34A;
    }
}


/* ========================================
   📱 响应式设计 
   ======================================== */

@media (max-width: 768px) {
    .tech-cube-container {
        height: 300px;
        margin: 2rem auto; /* Demo中没有指定margin */
        overflow: visible;
    }

    .cube-scene {
        width: 200px;
        height: 200px;
    }

    .cube-face {
        width: 180px;
        height: 180px;
    }

    /* 移动端立方体面位置  */
    .face-front { 
        transform: translateZ(90px); /* Demo中所有面都是90px */
    }
    
    .face-back { 
        transform: translateZ(-90px) rotateY(180deg); 
    }
    
    .face-right { 
        transform: rotateY(90deg) translateZ(90px); 
    }
    
    .face-left { 
        transform: rotateY(-90deg) translateZ(90px); 
    }

    .face-icon {
        font-size: 1rem;
        margin-bottom: 0.5rem; 
    }

    /* 移动端多语言字体调整 */
    :lang(zh-CN) .face-icon,
    :lang(ja-JP) .face-icon {
        font-size: 1.6rem; /* 移动端中日文更小 */
        letter-spacing: 0.04em;
        line-height: 1.2; /* 调整行高避免文字重叠 */
    }

    :lang(en-US) .face-icon {
        font-size: 2rem;
        letter-spacing: normal;
        line-height: normal;
    }



/* ========================================
   🎨 高端设备优化 - Demo中没有，但保留
   ======================================== */

@media (min-width: 1200px) {
    .tech-cube-container {
        height: 500px;
        margin: 5rem auto;
    }

    .cube-scene {
        width: 350px;
        height: 350px;
    }

    .cube-face {
        width: 300px;
        height: 300px;
    }

    /* 大屏幕立方体面位置 */
    .face-front { 
        transform: translateZ(150px); 
    }
    
    .face-back { 
        transform: translateZ(-150px) rotateY(180deg); 
    }
    
    .face-right { 
        transform: rotateY(90deg) translateZ(150px); 
    }
    
    .face-left { 
        transform: rotateY(-90deg) translateZ(150px); 
    }

    .face-icon {
        font-size: 2.5rem;
    }
        /* 大屏幕多语言字体调整 */
    :lang(zh-CN) .face-icon,
    :lang(ja-JP) .face-icon {
        font-size: 2.8rem; /* 大屏幕中日文调整 */
        letter-spacing: 0.06em;
    }

    :lang(en-US) .face-icon {
        font-size: 3.5rem;
        letter-spacing: normal;
    }
}

/* ========================================
   🌙 深色模式优化 - Demo中没有，但保留
   ======================================== */

@media (prefers-color-scheme: dark) {
    .cube-face::after {
        background: rgba(0, 0, 0, 0.9);
    }
}

/* ========================================
   🔥 性能优化 - Demo中没有，但保留
   ======================================== */

.cube-scene,
.cube-face {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.tech-particles {
    contain: layout style paint;
}

/* 减少动画在低性能设备上的影响 */
@media (prefers-reduced-motion: reduce) {
    .cube-scene,
    .cube-face,
    .face-icon,
    .loading-dots,
    .particle {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   🎯 Demo中特有的样式补充
   ======================================== */

/* 确保粒子颜色和Demo一致 */
.particle:nth-child(3n) {
    background: #4facfe; /* Demo中没有不同颜色 */
    /* 移除box-shadow */
}

.particle:nth-child(3n+1) {
    background: #4facfe; /* Demo中没有不同颜色 */
    /* 移除box-shadow */
}

.particle:nth-child(3n+2) {
    background: #4facfe; /* Demo中没有不同颜色 */
    /* 移除box-shadow */
}
}