/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: #000;
    overflow: hidden;
    height: 100vh;
}

.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    /* 深邃宇宙背景 - 增强版 */
    background: 
        radial-gradient(circle at 50% 50%, rgba(20, 20, 35, 1) 0%, rgba(10, 10, 18, 1) 60%, #000000 100%),
        radial-gradient(circle at 85% 15%, rgba(74, 144, 226, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 15% 85%, rgba(80, 227, 194, 0.08) 0%, transparent 50%);
    background-color: #000;
    overflow: hidden;
}

/* Canvas样式 */
#particleCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Logo容器 - 移除突兀的图片显示，仅作为占位 */
.logo-container {
    position: absolute;
    top: 50%; /* 垂直居中，与 Canvas 粒子中心对齐 */
    left: 50%;
    transform: translate(-50%, -50%) scale(1); 
    opacity: 0; 
    z-index: 10;
    /* 分离过渡效果：透明度要快（瞬间显现），位移要慢（优雅飞走） */
    transition: opacity 0.3s ease-out, 
                top 1.5s cubic-bezier(0.25, 1, 0.5, 1), 
                left 1.5s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

.logo-container.visible {
    opacity: 0; /* 禁用图片显示，完全依靠粒子 */
}

/* 头部模式 - Logo 移至左上角并清晰显示 */
.logo-container.header-mode {
    top: 30px;
    left: 30px;
    transform: translate(0, 0) scale(1);
    opacity: 1;
    /* header-mode 下保持同样的 transition 逻辑 */
}

.logo-container.header-mode img {
    width: 60px;
    height: 60px;
    /* 可以在这里加一点发光滤镜，如果需要的话 */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.logo-container img {
    display: block;
    width: 220px;
    height: 220px;
    object-fit: contain;
}

/* 艺术字容器 */
.brand-text-container {
    position: absolute;
    top: 60%; /* Logo下方 */
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
    display: flex;
    gap: 8px; /* 字母间距 */
    perspective: 1000px; /* 3D透视效果 */
}

.brand-letter {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    opacity: 0;
    /* 初始状态：向下偏移且旋转 */
    transform: translateY(30px) rotateX(90deg);
    /* 发光效果 */
    text-shadow: 0 0 10px rgba(126, 211, 33, 0.8),
                 0 0 20px rgba(126, 211, 33, 0.5),
                 0 0 40px rgba(126, 211, 33, 0.3);
    display: inline-block;
    transition: all 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.brand-letter.visible {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* 文字消散效果 */
.brand-letter.dispersing {
    opacity: 0;
    transform: scale(1.5) translateY(-20px);
    filter: blur(10px);
    transition: all 1.5s ease-out;
}

.logo-container.header-mode .brand-text {
    opacity: 0; /* 隐藏原本的文字 */
    pointer-events: none;
}

/* Coming Soon 艺术字体样式 */
.coming-soon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    font-family: 'Courier New', Courier, monospace; /* 使用等宽字体增加科技感，或者换成更艺术的 */
    font-size: 4rem;
    font-weight: 300;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s ease, transform 2s cubic-bezier(0.19, 1, 0.22, 1);
    
    /* 霓虹发光效果 */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.5),
        0 0 40px rgba(0, 255, 255, 0.3),
        0 0 80px rgba(0, 255, 255, 0.1);
    
    /* 背景渐变文字效果 (可选) */
    background: linear-gradient(135deg, #fff 0%, #a0f 50%, #0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    background-clip: text;
    
    z-index: 20;
}

.coming-soon.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}