/* style.css */

/* --- 1. 基础重置 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- 2. 页面整体布局与背景 --- */
body {
    /* 确保 body 占据整个屏幕的高度 */
    min-height: 100vh; 
    
    /* 使用 Flexbox 让内容在屏幕正中央完美居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 科技感的深邃背景色（深蓝黑） */
    background-color: #0b0f19; 
    
    /* 现代无衬线字体 */
    font-family: 'Segoe UI', system-ui, sans-serif;
    
    /* 防止出现滚动条 */
    overflow: hidden; 
}

/* --- 3. AR 主题文字特效 --- */
h1 {
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: 2px;
    
    /* 文字颜色设为近乎白色 */
    color: #e2e8f0; 
    
    /* 核心：添加青蓝色的多重发光投影，模拟 AR 设备的视觉效果 */
    text-shadow: 
        0 0 10px rgba(56, 189, 248, 0.6),
        0 0 20px rgba(56, 189, 248, 0.4),
        0 0 40px rgba(56, 189, 248, 0.2);
        
    /* 可选：给文字入场加个简单的淡入动画 */
    animation: fadeIn 2s ease-in-out;
}

/* --- 4. 动画关键帧 --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}