/* ============================================================
   VR风格 · 沉浸式虚拟现实界面（白底适配版）
   只替换CSS，HTML结构不变
   设计方向：紫蓝全息 / 深色面板 / 白底对比
   ============================================================ */

/* 卡片容器 —— VR头显里的深色悬浮面板 */
.topic_wrap {
    position: relative;
    /* 深邃的紫黑渐变，比之前更深，在白底上形成强对比 */
	background-image:
		/* 顶部紫色光斑 */
		radial-gradient(ellipse at 50% 0%, #3d2080 0%, transparent 60%),
		/* 底部蓝色光斑 */
		radial-gradient(ellipse at 50% 100%, #102868 0%, transparent 60%),
		/* 主渐变（深紫，再浅两档） */
		linear-gradient(180deg, #1a0e35 0%, #241548 50%, #12082a 100%),
		/* 氛围光斑 */
		radial-gradient(circle at 20% 30%, rgba(160, 120, 255, 0.18) 0%, transparent 30%),
		radial-gradient(circle at 80% 70%, rgba(80, 180, 255, 0.15) 0%, transparent 30%),
		radial-gradient(circle at 50% 50%, rgba(200, 100, 255, 0.1) 0%, transparent 45%);

	/* 兜底纯色也提亮 */
	background-color: #12082a;
    
    /* 为了保险，用 background-color 兜底纯色 */
    background-color: #030108;
    /* 紫蓝双色霓虹边框，在白底上非常醒目 */
    border: 1px solid rgba(160, 120, 255, 0.6);
    box-shadow:

        inset 0 0 40px rgba(160, 120, 255, 0.08),
        inset 0 0 100px rgba(0, 0, 0, 0.6);
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* 3D透视感 */
    perspective: 1000px;
}

/* 标题 —— VR界面标题 */
.topic_wrap .title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    /* 未来感无衬线字体 */
    font-family: 'Orbitron', 'Rajdhani', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    /* 紫蓝渐变文字，像全息投影 */
    background: linear-gradient(135deg, #d0b0ff 0%, #90d8ff 50%, #d0b0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    /* 文字发光 */
    filter: drop-shadow(0 0 8px rgba(180, 140, 255, 0.7))
            drop-shadow(0 0 20px rgba(100, 180, 255, 0.4));
    /* 缓慢的色相流动 */
    animation: vr-title-flow 4s ease-in-out infinite;
}

@keyframes vr-title-flow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(180, 140, 255, 0.7))
                drop-shadow(0 0 20px rgba(100, 180, 255, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(200, 160, 255, 0.9))
                drop-shadow(0 0 30px rgba(100, 200, 255, 0.6));
    }
}

/* 打字机容器 —— 保持居中 */
.typewriter-container {
    width: fit-content;
    margin: 0 auto;
    position: relative;
}

/* 打字机容器顶部装饰 —— 全息能量条 */
.typewriter-container::before {
    content: '';
    display: block;
    height: 3px;
    /* 紫蓝渐变能量条 */
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(160, 120, 255, 0.5) 20%,
        #a078ff 40%,
        #80d0ff 60%,
        rgba(128, 208, 255, 0.5) 80%,
        transparent 100%);
    margin-bottom: 10px;
    border-radius: 3px;
    opacity: 0.9;
    box-shadow:
        0 0 10px rgba(160, 120, 255, 0.7),
        0 0 20px rgba(128, 208, 255, 0.5),
        0 0 40px rgba(100, 100, 255, 0.25);
    /* 能量流动效果 */
    background-size: 200% 100%;
    animation: vr-energy-flow 3s linear infinite;
}

@keyframes vr-energy-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 打字机核心 —— VR全息文字 */
.typewriter {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    /* 未来感无衬线字体 */
    font-family: 'Orbitron', 'Rajdhani', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: #f0e8ff;                    /* 更亮的淡紫白，在深底上清晰 */
    text-shadow:
        0 0 5px rgba(200, 160, 255, 0.9),
        0 0 10px rgba(160, 120, 255, 0.7),
        0 0 20px rgba(128, 208, 255, 0.5),
        0 0 40px rgba(100, 100, 255, 0.25),
        0 0 80px rgba(80, 60, 200, 0.12);
    white-space: nowrap;               /* 保持单行，防止换行破坏打字动画 */
    overflow: hidden;                  /* 隐藏未打出的部分 */
    border-right: 0.12em solid #c8a0ff; /* 紫罗兰光标 */
    width: 0;

    /* 打字动画 + 光标闪烁 + 全息浮动 */
    animation:
        typing 2.5s steps(10, end) forwards,
        blink-caret 0.7s step-end infinite,
        vr-float 4s ease-in-out infinite;
}

/* 打字动画：从宽度0到100% */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* 光标闪烁动画：border-right 颜色透明/紫罗兰交替 */
@keyframes blink-caret {
    from, to { border-right-color: transparent; }
    50% { border-right-color: #c8a0ff; }
}

/* 全息浮动动画：文字轻微上下漂浮 + 光晕呼吸 */
@keyframes vr-float {
    0%, 100% {
        transform: translateY(0);
        text-shadow:
            0 0 5px rgba(200, 160, 255, 0.9),
            0 0 10px rgba(160, 120, 255, 0.7),
            0 0 20px rgba(128, 208, 255, 0.5),
            0 0 40px rgba(100, 100, 255, 0.25),
            0 0 80px rgba(80, 60, 200, 0.12);
    }
    50% {
        transform: translateY(-2px);
        text-shadow:
            0 0 8px rgba(200, 160, 255, 1),
            0 0 16px rgba(160, 120, 255, 0.9),
            0 0 30px rgba(128, 208, 255, 0.7),
            0 0 60px rgba(100, 100, 255, 0.35),
            0 0 120px rgba(80, 60, 200, 0.18);
    }
}

/* 伪元素添加数字空间纹理 —— 增加沉浸感 */
.topic_wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(160, 120, 255, 0.025) 2px,
            rgba(160, 120, 255, 0.025) 4px
        );
    pointer-events: none;
    z-index: 0;
}

/* 确保内容在伪元素之上 */
.topic_wrap > * {
    position: relative;
    z-index: 1;
}