/* --- 基础页面和字体设置 --- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    font-family: "Segoe UI", Arial, sans-serif;
}

/* --- 主要媒体容器 --- */
/* 用于容纳视频、图片和文字，并使其居中 */
#media-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

/* --- 媒体元素通用样式 (视频, 图片, 文字) --- */
/* 默认隐藏，居中，并设置过渡动画 */
.media-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

/* --- 视频播放器特定样式 --- */
#video-player {
    object-fit: cover; /* 视频铺满整个容器 */
    z-index: 2; /* 确保视频在文字上方 */
}

/* --- 图片播放器特定样式 --- */
#image-player {
    object-fit: contain; /* 图片完整显示，不裁剪 */
    z-index: 2; /* 确保图片在文字上方 */
}

/* --- 媒体元素可见状态 --- */
/* 当媒体元素有 .visible 类时，使其显示 */
.media-element.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- 控制按钮 ("开启声音") --- */
.control-button {
    position: absolute;
    z-index: 10; /* 设置一个较高的层级，确保按钮在最上层 */
    bottom: 32px; /* 距离底部 */
    right: 32px; /* 距离右侧 */
    padding: 16px 20px; /* 内边距 */
    border: 1px solid rgba(255, 255, 255, 0.7); /* 边框 */
    border-radius: 6px; /* 圆角 */
    background: rgba(0, 0, 0, 0.55); /* 背景色 */
    color: #fff; /* 文字颜色 */
    font-size: 16px; /* 字体大小 */
    line-height: 1.2; /* 行高，用于双行文字 */
    text-align: center; /* 文字居中 */
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* --- 按钮悬停效果 --- */
.control-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.9);
}

/* --- 按钮隐藏状态 --- */
.control-button.hidden {
    display: none;
}

/* --- "排演中" 文字样式 --- */
#rehearsing-text {
    color: white;
    font-size: 1.5em; /* 字体大小 */
    text-align: center;
    line-height: 1.5;
    z-index: 1; /* 确保文字在最底层 */
}

/* --- "加载中" 文字样式 --- */
#loading-text {
    color: rgba(255, 255, 255, 0.7); /* 稍微暗一点的白色 */
    font-size: 0.9em; /* 小字 */
    text-align: center;
    line-height: 1.5;
    z-index: 3; /* 确保在视频/图片上方可见（如果需要）或者下方 */
    /* 修改位置到底部 */
    top: auto !important; /* 覆盖 .media-element 的 top: 50% */
    bottom: 10%; /* 距离底部的位置 */
    transform: translate(-50%, 0) !important; /* 覆盖 .media-element 的 translateY */
}

/* --- 用于精确定位打字机效果的容器 --- */
.line {
    position: relative; /* 为绝对定位的省略号提供参照 */
    display: inline-block; /* 使容器宽度贴合文字内容 */
}

/* --- "排演中" 文字动画 --- */
/* 当文字可见时，应用呼吸动画 */
#rehearsing-text.visible {
    animation: breathing 10s ease-in-out infinite;
}

/* --- 呼吸动画定义 --- */
@keyframes breathing {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* --- 打字机省略号动画 --- */
.typewriter-dots {
    display: inline-flex;
    position: absolute; /* 将省略号从文档流中移除，避免影响文字居中 */
    left: 100%; /* 定位到文字的右侧 */
    bottom: 0.1em; /* 微调垂直位置，使其与文字基线对齐 */
}

.typewriter-dots span {
    display: inline-block;
    width: 0.4em;
    text-align: center;
    opacity: 0;
}

.typewriter-dots span:nth-child(1) {
    animation: dot1 2.4s steps(1, end) infinite;
}

.typewriter-dots span:nth-child(2) {
    animation: dot2 2.4s steps(1, end) infinite;
}

.typewriter-dots span:nth-child(3) {
    animation: dot3 2.4s steps(1, end) infinite;
}

/* --- 省略号动画关键帧 --- */
@keyframes dot1 {
    0%, 19% { opacity: 0; }
    20%, 79% { opacity: 1; }
    80%, 100% { opacity: 0; }
}

@keyframes dot2 {
    0%, 39% { opacity: 0; }
    40%, 79% { opacity: 1; }
    80%, 100% { opacity: 0; }
}

@keyframes dot3 {
    0%, 59% { opacity: 0; }
    60%, 79% { opacity: 1; }
    80%, 100% { opacity: 0; }
}