/* ======================================================= */
/* 弹窗核心样式：实现平滑过渡 */
/* ======================================================= */

/* 弹窗背景遮罩 */
.modal-overlay {
    /* 核心修改：使用 opacity 和 visibility 实现平滑淡入淡出 */
    display: block; /* 保持为 block 或 flex，让其参与布局流 */
    visibility: hidden; /* 默认隐藏 */
    opacity: 0;         /* 默认透明 */
    /* 过渡：只对 opacity 和 visibility 启用过渡 */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; 

    /* 保持您原有的其他样式 */
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    overflow: auto; /* 当内容超出时允许滚动 */
}

/* 遮罩激活类名：弹窗打开时 */
.modal-overlay.open {
    visibility: visible;
    opacity: 1;
}

/* 弹窗内容框 */
.modal-content {
    /* 核心修改：内容框滑入效果 */
    /* 默认状态：稍微向上偏移并透明，隐藏在视口上方 */
    transform: translateY(-50px); 
    opacity: 0;                   
    /* 过渡：对 opacity 和 transform 启用过渡，实现滑入 */
    transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s; /* 延迟 0.1s 执行，让遮罩先出现 */

    /* 保持您原有的其他样式 */
    background-color: #ed9364;
    position: fixed;
    width: 85%; /* 宽度固定 */
    height: 85%;
    top: 10%;
    left: 7.5%;
    border-top-left-radius: 8%;
    border-bottom-right-radius: 8%;
}

/* 激活类名：弹窗打开时，内容框归位并显示 */
.modal-overlay.open .modal-content {
    transform: translateY(0); /* 归位 */
    opacity: 1;               /* 完全显示 */
}

/* ======================================================= */
/* 原始代码部分：其他弹窗元素样式 */
/* ======================================================= */

/* 弹窗内容区，用于内部滚动 */
.modal-body {
    position: absolute;
    overflow-y: auto; /* 垂直滚动条 */
    width: 76%;
    left: 18%;
    height: 100%;
    background-color: #ffd9a1;
    z-index: 200;
    top: 0;
}

/* 关闭按钮样式 */
.close-btn {
    color: #aaa;
    position: absolute;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    top: 3%;
    right: 2%;
    z-index: 1000;
}

.close-btn:hover,
.close-btn:focus {
    color: #000;
    text-decoration: none;
}

.modal-background-color1{
    position: absolute;
    height: 100%;
    width: 8%;
    left: 15%;
    z-index: 100;
    background-color: #f2b379;
    top: 0;
}
.modal-background-color2{
    position: absolute;
    height: 100%;
    width: 8%;
    left: 12%;
    z-index: 80;
    background-color: #f2a479;
    top: 0;
}

#hp-modal-decorate-pic1{
    width: 8%;
    position: absolute;
    top: 12%;
    left: 6%;
    transform:rotate(20deg);
    z-index: 2000;
}
#hp-modal-decorate-pic2{
    width: 13%;
    position: absolute;
    top: 65%;
    left: 4.5%;
    z-index: 2000;
}
/*弹窗侧边图片控制2*/
#hp-modal-decorate-pic3{
    width: 8%;
    position: absolute;
    top: 12%;
    left: 6%;
    transform:rotate(20deg);
    z-index: 2000;
}
#hp-modal-decorate-pic4{
    width: 13%;
    position: absolute;
    top: 65%;
    left: 4.5%;
    z-index: 2000;
}