/* 内容区域使用flex-grow填充剩余空间 */
.content {
    background-color: #b51c1c;
    background-image: url('./img/bg-4.png');
    background-size: cover;
    background-position: center;
    overflow: hidden;
    /* 如果页面有输入框，建议改用`position: fixed`布局*/
}

.collage-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 85.7333vw;
    background-image: url('./img/binxi.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.gold-line {
    position: absolute;
    top: 70vw;
    left: -5.3333vw;
    width: 40vw;
    height: 20vw;
    z-index: 10;
}

.gold-line-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gold-horse {
    position: absolute;
    top: 140vw;
    left: 74vw;
    transform: translate(-50%, -50%);
    width: 100vw;
    z-index: 2;
}

.gold-horse-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-cloud {
    position: absolute;
    bottom: -13.8667vw;
    left: 0;
    width: 100vw;
    height: 13.8667vw;
    background-image: url('./img/footer-cloud-bg.png');
    background-size: cover;
    background-position: center;
    z-index: 8000;
}

.letter {
    position: absolute;
    display: flex;
    left: 7vw;
    bottom: 6.0vw;
    /* 调整位置，比信封高60px */
    margin-left: auto;
    margin-right: auto;
    width: 86.9vw;
    /* 初始高度为0 */
    background-image: url('./img/letter.png');
    background-size: cover;
    background-position: center;
    z-index: 8;
    opacity: 0;
    /* 初始透明度为0 */
    visibility: hidden;
    /* 初始隐藏 */
    transform-origin: bottom;
    /* 从底部开始展开 */
    overflow: hidden;
    transition: all 0.3s ease-out;
    /* 添加平滑过渡效果 */
}


.envelope {
    position: absolute;
    bottom: 0;
    left: 0vw;
    width: 100vw;
    height: 62.5vw;
    z-index: 8;
    opacity: 0;
    /* 初始透明度为0 */
    visibility: hidden;
    /* 初始隐藏 */
    transform: translateY(100%);
    /* 初始位置在屏幕外 */
}

.envelope img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.logo {
    position: absolute;
    bottom: 7vw;
    left: 50%;
    transform: translateX(-50%);
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    /* 图像阴影 */
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}



/* 动画关键帧定义 */
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes envelopeEnter {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes letterUnfold {
    0% {
        height: 0;
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        height: 139.3237vw;
        opacity: 0.95;
        transform: translateY(0);

    }
}

@keyframes logoFadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes logoMoveToEnvelope {
    0% {
        top: 72vw;
        left: 13.333vw;
        width: 16vw;
        height: 16vw;
        opacity: 1;
        transform: none;
        /* 从第一屏的原始位置开始 */
    }

    100% {
        bottom: 5.333vw;
        left: 50%;
        transform: translateX(-50%);
        width: 16vw;
        height: 16vw;
        opacity: 1;
        /* 直接移动到第二屏的目标位置 */
    }
}

.logo-move {
    animation: logoMoveToEnvelope 0.8s ease-out forwards;
    /* 简化动画，使用更快的缓动函数 */
}


/* 初始状态 - 第一屏显示 */
.initial-screen .collage-container,
.initial-screen .gold-line,
.initial-screen .gold-horse,
.initial-screen .footer-cloud {
    opacity: 1;
}

.initial-screen .letter,
.initial-screen .envelope {
    opacity: 0;
    visibility: hidden;
}

.initial-screen .logo {
    top: 72vw;
    left: 13.333vw;
}

/* 第二屏状态 - 动画结束后 */
.second-screen .collage-container {
    opacity: 1;
}

.second-screen .gold-horse,
.second-screen .footer-cloud {
    opacity: 0;
    visibility: hidden;
}

.second-screen .letter {
    opacity: 0.95;
    /* animation-delay: 1.5s; */
    /* 延迟开始，与信封同步 */
}

.second-screen .letter-content {
    opacity: 0.9;
    transition: opacity 0.5s ease-in-out;
}

.second-screen .envelope {
    opacity: 1;
}

/* 转场动画类 */
.fade-out {
    animation: fadeOut 0.8s ease-in-out forwards;
}

.envelope-enter {
    animation: envelopeEnter 1.2s ease-out forwards;
}

.letter-unfold {
    animation: letterUnfold 1.5s ease-out forwards;
}

.logo-fade-out {
    animation: logoFadeOut 0.8s ease-in-out forwards;
}

.logo-fade-in {
    animation: logoFadeIn 0.8s ease-in-out forwards;
    z-index: 10;
}

.letter-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    margin-top: 16vw;
    padding: 0 4vw;
    font-size: 5.8667vw;
    color: #333;
}

/* 输入框样式 */
.input-text-you {
    display: flex;
    align-items: center;
    width: 52.2667vw;
    height: 9.2667vw;
    background: transparent;
    border: none;
    outline: none;
    overflow: hidden;
    z-index: 1000;
    text-align: left;
}

.input-text-you input {
    display: inline-block;
    max-width: 25.3333vw;
    font-size: 6.3333vw;
    font-family: 'STXINGKA', 'Microsoft YaHei', Arial, sans-serif;
    outline: none;
    background: transparent;
    border: none;
    outline: none;
    /* letter-spacing: -0.1em; */
    text-align: center;
    color: #333;
    border-bottom: 2px double rgba(220, 100, 100, 0.5);

}

.input-text-you span {
    display: block;
    font-family: 'STXINGKA', 'Microsoft YaHei', Arial, sans-serif;
}

.letter-content p {
    font-family: 'STXINGKA', 'Microsoft YaHei', Arial, sans-serif;
    line-height: 1.8;
    border-bottom: 2px dotted rgba(220, 100, 100, 0.5);
}


.letter-content p:nth-child(1) {
    font-weight: 500;
    margin-bottom: 2.1333vw;
    text-align: left;
}

.letter-content p .leader-name {
    margin-right: 2.667vw;
    font-size: 5.3333vw;
    color: #333;

    border-bottom: 2px dotted rgba(225, 6, 6, 0.8);
}

/* 红色文字特殊动画 */
.letter-content p.txt-red {
    color: #F5051B;
}

/* 右下角红马元素 */
.red-horse-r {
    position: fixed;
    bottom: -21.333vw;
    right: -42.667vw;
    width: 80vw;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-out;
}

.red-horse-r-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 红马缓缓入场动画 */
.red-horse-r-enter {
    animation: redHorseEnter 1.5s ease-out forwards;
    visibility: visible;
}

@keyframes redHorseEnter {
    0% {
        opacity: 0;
        bottom: -21.333vw;
        right: -42.667vw;

    }

    100% {
        opacity: 1;
        bottom: -80vw;
        right: -180vw;

    }
}

/* 音乐控制按钮样式 */
.music-control {
    position: absolute;
    top: 5.3333vw;
    right: 5.3333vw;
    width: 11.7333vw;
    height: 11.7333vw;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    color: white;
    font-size: 5.3333vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9999;
    user-select: none;
    transition: all 0.3s ease;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.music-control:hover {
    background-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.1);
}

.music-control.paused {
    background-color: rgba(255, 255, 255, 0.3);
}


/* 返回重选按钮样式 */
.back-button {
    position: absolute;
    bottom: 10.8667vw;
    left: 25%;
    transform: translateX(-50%);
    padding: 2vw 5vw;
    background-color: rgba(255, 255, 255, 0.8);
    color: #c40f18;
    font-size: 4vw;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    border-radius: 25px;
    cursor: pointer;
    z-index: 200;
    transition: all 0.3s ease;
    user-select: none;
    text-decoration: none;
    display: inline-block;
    /* 延迟4秒显示 */
    animation: button-show 1s 4s ease-in-out forwards;
    opacity: 0;
}

.back-button:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 分享按钮样式 */
.share-button {
    position: absolute;
    bottom: 10.8667vw;
    right: 25%;
    transform: translateX(50%);
    padding: 2vw 5vw;
    background-color: rgba(255, 255, 255, 0.8);
    color: #c40f18;
    font-size: 4vw;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    border-radius: 25px;
    cursor: pointer;
    z-index: 200;
    transition: all 0.3s ease;
    user-select: none;
    animation: button-show 1s 4s ease-in-out forwards;
    opacity: 0;
}

.share-button:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: translateX(50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@keyframes button-show {
    0% {

        opacity: 0;
    }

    80% {

        opacity: .5;
    }

    100% {

        opacity: 1;
    }
}