@font-face {
    font-family: "HanYiShangWei";
    src: url("../字体/汉仪尚巍手书W.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "YuWei";
    src: url("../字体/禹卫书法行书简体.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 背景色稍微调深一点，突出信封 */
    background-image: url("../img/风景照2.jpg") ;
    /* 确保图片铺满屏幕，不重复 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    margin: 0;
    overflow: hidden;
}

/* ================== 核心修改：信封主体 ================== */
.card {
    width: 800px;
    height: 450px;
    
    /* 1. 结构修改：底部改为平整的矩形背景，不再需要 ::after 伪元素 */
    /* 2. 质感修改：加入噪点纹理和细微渐变，模拟粗糙牛皮纸感 */
    background-color: #1a3c5a; /* 深蓝底色 */
    background-image: 
        /* 噪点纹理层 */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
        /* 细微的光影渐变层，增加立体感 */
        linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(0,0,0,0.1));
    
    /* 添加一个很细的边框来定义边缘 */
    border: 1px solid #102a44;
    
    color: #e0c38c;
    /* 调整阴影，使其更柔和自然 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0,0,0,0.2);
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    border-radius: 4px; /*稍微加一点圆角 */
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    
    /* 1. 结构修改：不再用 border 画图，改用宽高+裁剪 */
    width: 100%;
    height: 240px; /* 盖子的高度 */
    
    /* 2. 形状修改：使用 clip-path 剪裁出一个倒三角形 */
    /* 参数意思：左上角(0 0)，右上角(100% 0)，底部中心(50% 100%) */
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); /* 兼容性 */

    /* 3. 质感修改：关键点！现在可以给盖子加同样的噪点纹理了 */
    background-color: #234b6e; /* 比主体稍微亮一点的蓝色，区分层次 */
    background-image: 
        /* 复制 .card 里的噪点代码 */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
        /* 加一点光泽渐变 */
        linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.05));
    
    z-index: 1; 
    transform-origin: top;
    
    /* 4. 投影修改：clip-path 切割后 box-shadow 会失效，必须用 drop-shadow */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));

    /* 新增：添加 transform 过渡时间 */
    transition: transform 2.5s ease-in-out, z-index 2.5s;
    transform-origin: top; /* 确保沿着顶部边缘旋转 */
}

/* ================== 文字样式 "Best wishes" ================== */
.text.envelope-msg {
    z-index: 10; 
    position: absolute;
    /* 调整文字位置，使其位于信封盖子上方 */
    top: 80px;
    
    font-family: 'Brush Script MT', cursive; 
    font-size: 3.8em;
    /* 质感修改：金色文字，带有一点点磨砂和发光效果 */
    color: #f1dfa8; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4), 0 0 10px rgba(241, 223, 168, 0.3);
    
    transform: rotate(-4deg); 
    letter-spacing: 2px;
}

/* ================== 爱心/火漆印章 ================== */
.heart {
    position: absolute;
    /* 结构修改：将印章移到盖子的尖端位置 */
    top: 210px; /* 240px(盖子高度) - 30px(印章半径) */
    
    width: 60px;
    height: 60px;
    /* 质感修改：火漆颜色更深，边缘更明显 */
    background: radial-gradient(circle at 30% 30%, #d35400, #a93226);
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
    
    z-index: 20; 
    cursor: pointer;
    /* 增加一个外圈，模拟火漆边缘 */
    border: 3px solid #922b21;
    
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: serif;
    font-weight: bold;
}

/* 可选：在印章中心加一个字母或图案 */
.heart::after {
    content: '✉';
    color: #e6b0aa;
    font-size: 28px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* ------------------------------------------------ */
/* 以下是信封打开后的内容样式，保持不变或根据需要微调 */
/* ------------------------------------------------ */
.img{
    height: 100vh;
    width: 100vw;
    position: absolute;
    background-image: url(../img/3.jpg);
    background-size: cover;
    z-index: -1;
}
.txt{
    display: flex;
    justify-content: center;
    line-height: 50px;
    flex-direction: column;
    letter-spacing: 5px;
    color: rgb(246, 236, 236);
    position: relative;
    top: -20px;
    left: -180px;
    font-family: "HanYiShangWei";
}
.txt p{
    margin-left: 100px;
}
.txt p:nth-child(1){
    font-size: 35px;
}
.txt p:nth-child(2){
    font-size: 25px;
}
.txt p:nth-child(3){
    font-size: 25px;
}
.txt p:nth-child(4){
    font-size: 35px;
}

/* ================== 第二屏：信纸/内容区域 ================== */
#box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; 
    opacity: 0; 
    transition: opacity 2s ease-in-out; 

    display: flex;
    flex-direction: column;
    justify-content: flex-start;   
    text-align: left;            
    padding: 15vh 15vw 5vh 15vw; 
    box-sizing: border-box;

    /* 背景设置 */
    background-image: 
        /* 第1层：噪点纹理 (模拟老电影/胶片颗粒感) */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E"),
        
        /* 第2层：径向渐变 (模拟暗角/暗室效果，中间亮四周黑，非常有氛围) */
        radial-gradient(circle at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%),
        
        /* 第3层：你的背景图 (请确保路径和文件名正确) */
        url(../img/咖啡店.png); 
    background-size: auto, cover, cover; /* 噪点平铺，遮罩和原图拉伸 */
    background-position: 0 0, center, center;
    background-repeat: repeat, no-repeat, no-repeat;
    
    /* 混合模式：让噪点叠加在画面上，让遮罩压暗背景 */
    background-blend-mode: overlay, normal, normal;
    
    /* 备用背景色 */
    background-color: #1a1a1a;

/* ============ 字体优化：复古白 ============ */
    /* 纯白太刺眼，稍微降一点透明度，更有质感 */
    color: rgba(255, 255, 255, 0.95);
    
    /* 阴影优化：用柔和的弥散阴影代替生硬的黑边，让字像浮在空气中 */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);

    font-size: 34px;  
    font-weight: normal;
    font-family: 'HanYiShangWei', 'YuWei', "楷体", cursive;
    line-height: 2.1; 
    word-wrap: break-word;
    overflow-y: auto; 
    letter-spacing: 2px;
}
/* 优化滚动条 (Webkit浏览器)，让它不破坏复古感 */
#box::-webkit-scrollbar {
    width: 6px;
}
#box::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
#box::-webkit-scrollbar-track {
    background: transparent;
}

/* === 修改重点 2：段落样式 === */
/* 让每一段（p标签）都首行缩进两个字 */
#box p {
    text-indent: 2em; 
    margin: 0;         /* 去掉默认间距，由JS控制空行 */
    padding-bottom: 20px; /* 每段之间留一点空隙 */
}

/* === 修改重点 3：署名样式 === */
/* 右对齐的类 */
#box .right-align {
    text-align: right;
    text-indent: 0; /* 署名不需要缩进 */
}
/* 2. 给文字和印章也添加过渡，翻开时让它们淡出 */
.card .text,
.card .heart {
    transition: opacity 0.5s ease;
}

/* 3. 定义 .open 状态：盖子翻转 180 度 */
.card.open::before {
    /* 沿着 X 轴旋转 180 度，实现向上翻开 */
    transform: rotateX(180deg);
    z-index: 0; /* 翻开后层级降低，防止遮挡内部（如果有的话） */
}

/* 4. 定义 .open 状态：附着在盖子上的文字和印章消失 */
/* 因为用 CSS 模拟它们跟随伪元素旋转比较复杂，直接淡出视觉上也很自然 */
.card.open .text,
.card.open .heart {
    opacity: 0;
}
/* --- 新增：封蜡点击提示样式 --- */
.click-hint {
    position: absolute;
    /* 位置：放在封蜡正下方 */
    top: 285px; /* 封蜡top(210) + 高度(60) + 间距(15) */
    
    font-size: 14px;
    font-family: 'HanYiShangWei', 'YuWei', serif; /* 使用你的手写字体 */
    color: rgba(224, 195, 140, 0.8); /* 金色，与 Best wishes 呼应 */
    letter-spacing: 2px;
    
    z-index: 25; /* 确保在最上层 */
    pointer-events: none; /* 让它不阻挡鼠标点击 */
    
    /* 动画：呼吸 + 上下浮动 */
    animation: hintFloat 2s ease-in-out infinite;
}

/* 定义浮动动画 */
@keyframes hintFloat {
    0%, 100% {
        opacity: 0.5;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(3px); /* 轻微下沉 */
    }
}

/* 当信封翻开时，提示文字也要消失 */
.card.open .click-hint {
    opacity: 0;
    transition: opacity 0.5s ease;
}
/* ================== 通用图片插入样式 ================== */

/* 1. 单张图片容器 (保持不变) */
.inserted-img-box {
    width: 100%;
    display: flex;
    justify-content: center; 
    margin: 15px 0;
}

/* 2. 新增：双张图片容器 (左右并排) */
.double-img-box {
    width: 100%;
    display: flex;
    justify-content: space-between; /* 左右两端对齐，中间留空 */
    align-items: center;
    margin: 15px 0;
    gap: 10px; /* 两张图之间的间隙 */
}

/* 单张图片样式 (保持不变) */
.inserted-img {
    max-width: 90%; 
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    /*opacity: 0;
    animation: fadeInImg 1.5s forwards;*/
    transition: all 0.5s ease;
}

/* 新增：双图模式下的图片样式 (宽度设为48%以放得下两张) */
.double-img-item {
    width: 48%; /* 两个加起来 < 100% */
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    /*opacity: 0;
    animation: fadeInImg 1.5s forwards;*/
    object-fit: cover;
    transition: all 0.5s ease;
}

@keyframes fadeInImg {
    to { opacity: 1; }
}