* {
    margin: 0; padding: 0; box-sizing: border-box;
}

body, html {
    width: 100%; height: 100%; overflow: hidden; background-color: #000;
}

/* 1. 自适应遮罩 */
.safe-mask {
    position: fixed; left: 0; width: 100%; height: 0;
    background-color: #fff; z-index: 100;
    transition: height 0.3s ease;
}

/* 2. 超长屏适配 (如纵横比超过 9:21 的机型) */
@media screen and (max-aspect-ratio: 9/21) {
    .safe-mask { height: 8vh; }
    .mask-top { top: 0; }
    .mask-bottom { bottom: 0; }
    /* 避让逻辑：Logo 下移，信封贴合白框 */
    .top-logo { top: 10vh !important; }
    .envelope { bottom: 7.5vh !important; }
}

.main-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('../img/背景.webp') no-repeat center center;
    background-size: cover; z-index: 1;
}

.music-controller {
    position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; z-index: 110;
}
.music-controller img { width: 100%; height: 100%; }
.rotating { animation: rotateAnim 3s linear infinite; }
@keyframes rotateAnim { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 引导层 */
.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; z-index: 10;
}
.center-gif {
    position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); max-width: 150%;
}
.start-btn {
    position: absolute; bottom: 15%; padding: 12px 30px; color: white;
    border-radius: 20px; background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer;
}

/* 内容层元素 */
.top-logo {
    position: absolute; top: 5px; left: 30px; width: 150px;
    z-index: 90; opacity: 0;
    transition: opacity 1s ease 0.5s;
    pointer-events: none;
}

.invitation-wrapper {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; max-height: 85vh;
    overflow: hidden; pointer-events: none; z-index: 10;
}

.letter {
    position: absolute; width: 85%; left: 50%; top: 100%;
    transform: translateX(-50%); opacity: 0; z-index: 11;
    transition: all 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.envelope {
    position: absolute; width: 105%; left: 49%; bottom: -2%;
    transform: translateX(-50%); opacity: 0; z-index: 20;
    transition: all 0.5s ease; pointer-events: none;
}

/* 状态类 */
.show-logo { opacity: 1 !important; }
.show-envelope { opacity: 1 !important; }
.show-letter { opacity: 1 !important; top: 5% !important; }
.hidden { display: none !important; }