/* 蓝白背景，带渐变过渡，蓝色占据底部三分之一 */
.reveal-viewport {
    background: linear-gradient(to bottom, 
        white 0%, 
        white 60%, 
        rgb(178, 218, 248) 74%, 
        rgb(178, 218, 248) 100%
    );
}

/* 确保所有容器占满浏览器页面宽度 */
.reveal-viewport,
.reveal,
.reveal .slides {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 幻灯片样式，16:9 宽高比（宽度:高度 = 16:9） */
.reveal .slides section {
    /* 盒模型：border-box确保内边距和边框包含在总宽度内 */
    box-sizing: border-box;
    /* 背景：半透明白色，透明度95% */
    background: rgba(255, 255, 255, 0.95);
    /* 内边距：四周10像素，进一步减少内边距使模态框范围更大 */
    padding: 10px;
    /* 圆角：20像素，稍微增大圆角使视觉效果更柔和 */
    border-radius: 20px;
    /* 阴影：10像素垂直偏移，40像素模糊，黑色20%透明度，增强立体感 */
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    /* 宽度和高度：占外容器90%，相对于.reveal容器 */
    width: 70%;
    height: 90%;
    /* 宽高比：16:9（宽度:高度），现代宽屏比例 */
    aspect-ratio: 16/9;
    /* 使用Flexbox布局 */
    display: flex;
    /* 主轴方向：垂直排列（从上到下） */
    flex-direction: column;
    /* 主轴对齐：垂直居中 */
    justify-content: center;
    /* 交叉轴对齐：水平居中 */
    align-items: center;
    /* 文本对齐：居中对齐 */
    text-align: center;
}

/* 为 16:9 宽高比调整字体大小 */
.reveal .slides section h1 {
    font-size: 2.8em;
    margin-bottom: 0.4em;
}

.reveal .slides section h3 {
    font-size: 1.6em;
    margin-bottom: 0.8em;
}

.reveal .slides section p {
    font-size: 1.1em;
    line-height: 1.5;
}

/* 字体设置：全部使用衬线字体（serif），浏览器默认字体 */
.reveal {
    font-family: serif; /* 衬线字体，类似宋体 */
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
    font-family: serif; /* 衬线字体，类似宋体 */
    font-weight: bold;
    color: #333;
}
.reveal p, .reveal li, .reveal a {
    font-family: serif; /* 衬线字体，类似宋体 */
    color: #555;
}

/* 幻灯片头部样式：左上角和右上角定位
   用途：用于第二张及后续幻灯片，显示章节标题和课程名称
   定位：绝对定位在幻灯片顶部，距离顶部20像素
   布局：Flexbox左右两端对齐，顶部对齐，左右内边距30像素
   层级：z-index: 10确保在内容上方显示
   装饰：底部有浅蓝色横线分隔头部和内容 */
.slide-header {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 顶部对齐，使margin-top生效 */
    padding: 0 30px;
    z-index: 10;
}

/* 幻灯片头部下方的浅蓝色横线（带阴影效果） */
.slide-header::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgb(178, 218, 248);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(178, 218, 248, 0.4);
}

/* 左上角标题样式
   用途：显示章节编号和标题，如"1.运动无处不在"
   字体：1.2em相对大小，加粗，深灰色(#333)
   对齐：左对齐 */
.top-left {
    font-size: 0.8em;
    font-weight: bold;
    color: #333;
    text-align: left;
}

/* 右上角标题样式
   用途：显示课程名称，如"高中物理必修第一册课件"
   字体：0.5em相对大小，加粗，深灰色(#333)
   对齐：右对齐
   垂直位置：可通过margin-top调整距离顶部的距离 */
.top-right {
    font-size: 0.5em;
    font-weight: bold;
    color: #333;
    text-align: right;
    margin-top: -10px; /* 可调整：增加正值向下移动，负值向上移动 */
}

/* 幻灯片内容区域
   用途：包含幻灯片的主要内容，位于头部下方
   间距：顶部留出80像素空间，避免内容被头部遮挡
   内边距：20像素内容内边距
   对齐：内容左对齐（与标题幻灯片居中不同） */
.slide-content {
    margin-top: 60px; /* 为头部留出空间 */
    padding: 20px;
    text-align: left;
}

/* 内容区域二级标题样式
   用途：用于内容主标题，如"运动的基本概念"
   字体：1.5em字体大小，深灰色(#333)
   装饰：蓝色下边框(rgb(178, 218, 248))，底部内边距10像素
   间距：底部外边距-0.5em（负值使标题更紧凑） */
.slide-content h2 {
    font-size: 1.5em;
    margin-bottom: -0.5em;
    color: #333;
    padding-bottom: 10px;
}

/* 内容区域段落样式
   用途：用于正文段落
   字体：1em相对大小，行高1（紧凑布局）
   间距：底部外边距0em，段落间距取消 */
.slide-content p {
    font-size: 1em;
    line-height: 1;
    margin-bottom: 0em;
}

/* 内容区域无序列表样式
   用途：用于项目列表
   字体：0.8em相对大小（较小字体），行高1.5
   缩进：左缩进20像素 */
.slide-content ul {
    font-size: 0.8em;
    line-height: 1.5;
    margin-left: 20px;
}

/* 内容区域列表项样式
   用途：用于列表中的每一项
   间距：底部外边距0.1em（非常紧凑的间距） */
.slide-content li {
    margin-bottom: 0.1em;
}

/* 自定义缩放动画：1.5倍放大 */
.fragment.custom-zoom-in {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s ease;
}

.fragment.custom-zoom-in.visible {
    opacity: 1;
    transform: scale(1.5);
}