/* =========================
   本地字体
========================= */

@font-face {
    font-family: "TitleFont";
    src: url("../assets/fonts/title.woff2") format("woff2");
}

@font-face {
    font-family: "BodyFont";
    src: url("../assets/fonts/body.woff2") format("woff2");
}

/* =========================
   全局
========================= */

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

body{
    font-family:'ZCOOL KuaiLe',cursive;
    overflow:hidden;
    background:#fdfaf7;
}

/* =========================
   场景
========================= */

.scene{
 width:100vw;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;

    min-height:100dvh;

    position:absolute;
    inset:0;

    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:24px 32px;

    overflow:hidden;

    margin-top:0;

    background-size:100% 100%;
    background-position:center center;
    background-repeat:no-repeat;

    animation:fade .8s ease;

    position:relative;
}

/* 显示控制 */
.active{
    display:flex;
}

/* =========================
   背景（原结构保留）
========================= */

#scene1{
    background: linear-gradient(
        rgba(255,255,255,.18),
        rgba(255,255,255,.18)
    ),
    url("../assets/backgrounds/intro.webp");
}

#scene2{
    background: linear-gradient(
        rgba(255,255,255,.12),
        rgba(255,255,255,.12)
    ),
    url("../assets/backgrounds/scenery.webp");
}

#scene3{
    background: linear-gradient(
        rgba(255,255,255,.12),
        rgba(255,255,255,.12)
    ),
    url("../assets/backgrounds/food.png");
}

#scene4{
    background: linear-gradient(
        rgba(255,255,255,.18),
        rgba(255,255,255,.18)
    ),
    url("../assets/backgrounds/cloud.webp");
}

#scene5,
#scene6{
    background: linear-gradient(
        rgba(20,20,40,.28),
        rgba(20,20,40,.42)
    ),
    url("../assets/backgrounds/night.webp");
line-height:1.6;
}

/* =========================
   ❗冲突清理（关键修复）
========================= */

#scene1,
#scene2,
#scene3,
#scene4,
#scene5,
#scene6{
    background: none !important;
}

/* =========================
   背景呼吸层（保留）
========================= */

.scene::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;

    background-size:cover;   /* 可调 */
    background-position:center;
    background-repeat:no-repeat;

    animation:breatheBg 12s ease-in-out infinite;
}

/* 背景资源重新挂载（关键） */

#scene1::before{
    background-image:url("../assets/backgrounds/intro.webp");
}

#scene2::before{
    background-image:url("../assets/backgrounds/scenery.webp");
}

#scene3::before{
    background-image:url("../assets/backgrounds/food.png");
}

#scene4::before{
    background-image:url("../assets/backgrounds/cloud.webp");
}

#scene5::before,
#scene6::before{
    background-image:url("../assets/backgrounds/night.webp");
}

/* 呼吸动画 */
@keyframes breatheBg{
    0%{
        filter: brightness(1) saturate(1);
        transform: scale(1);
    }
    50%{
        filter: brightness(1.08) saturate(1.05);
        transform: scale(1.02);
    }
    100%{
        filter: brightness(1) saturate(1);
        transform: scale(1);
    }
}

/* =========================
   字体（只优化大小 + 可读性）
========================= */

.scene h1{

    font-family:"TitleFont";

    font-size:3.05rem;

    font-weight:normal;

    margin-bottom:28px;

    color:#6D5BB3;

    letter-spacing:2px;

    text-shadow:
        0 2px 4px rgba(0,0,0,.35),
        0 6px 18px rgba(0,0,0,.45);
}

.scene p{

    font-family:"BodyFont";

    font-size:1.42rem;

    font-weight:normal;

    line-height:2.0;

    max-width:360px;

    color:#FF8EE;

    text-shadow:
        0 2px 4px rgba(0,0,0,.30),
        0 4px 12px rgba(0,0,0,.35);
}



/* =========================
   图片元素
========================= */

.rabbit img{
    width:150px;
    height:auto;

    margin-top:70px;
    margin-bottom:8px;

    opacity:.96;

    user-select:none;

    filter:drop-shadow(0 6px 16px rgba(0,0,0,.10));
}
.rabbit{

    transform-origin:center bottom;

    animation:rabbitBreath 4s ease-in-out infinite;
}

@keyframes rabbitBreath{

    0%{

        transform:
            translateY(0)
            scale(1);
    }

    30%{

        transform:
            translateY(-2px)
            scale(1.01);
    }

    60%{

        transform:
            translateY(-6px)
            scale(1.025);
    }

    100%{

        transform:
            translateY(0)
            scale(1);
    }
}
.icon img{
    width:110px;
    height:auto;
    margin-bottom:24px;
}

.cloud img{
    width:130px;
    height:auto;
}

.emoji-icon{
    width:1em;
    height:1em;
    vertical-align:-0.15em;
}

/* =========================
   按钮
========================= */

button{
    margin-top:40px;

    padding:14px 32px;

    border:none;
    border-radius:999px;

    background:rgba(255,255,255,.85);

    color:#6d5bb3;

    font-size:1.08rem;

    font-family:inherit;

    cursor:pointer;

    backdrop-filter:blur(8px);

    transition: transform .2s, box-shadow .2s;
}

button:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}

button:active{
    transform:scale(.97);
}

/* =========================
   乌云
========================= */

.cloud{
    cursor:pointer;
    transition: opacity .8s, transform .8s;
}

.cloud:hover{
    transform:scale(1.05);
}

.cloud.hide{
    opacity:0;
    transform:translateY(-120px) scale(.8);
}

/* =========================
   好运签
========================= */

.lucky{
    display:none;
    margin-top:24px;

    padding:18px 24px;

    border-radius:24px;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(10px);

    color:#555;

    max-width:320px;

    line-height:1.8;
}

/* =========================
   飘落元素
========================= */

.floating{
    position:fixed;
    width:28px;
    height:28px;

    pointer-events:none;
    z-index:1;

    animation:floatDown linear forwards;
}

@keyframes floatDown{
    from{
        transform:translateY(0) rotate(0deg);
        opacity:0;
    }
    15%{
        opacity:1;
    }
    to{
        transform:translateY(120vh) rotate(360deg);
        opacity:0;
    }
}

/* =========================
   场景切换
========================= */

@keyframes fade{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================
   手机适配
========================= */

@media (max-width:480px){

    .scene{
        padding:24px;
    }

    .scene h1{
        font-size:2.25rem;
    }

    .scene p{
         font-size:1.15rem;
        max-width:320px;
    }

    .rabbit img{
        width:150px;
    }

    .icon img{
        width:90px;
    }

    .cloud img{
        width:110px;
    }

    button{
        font-size:1rem;
        padding:13px 28px;
    }
}

/* =========================
   最终祝福飘落动画
========================= */

.final-floating{
    position:fixed;
    z-index:9999;
    pointer-events:none;

    opacity:0;

    filter:drop-shadow(0 4px 10px rgba(0,0,0,.12));

    animation:blessingFloat 4s ease-out forwards;
}

@keyframes blessingFloat{
    0%{
        opacity:0;
        transform:translateY(0) scale(.8) rotate(0deg);
    }
    15%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:translateY(-90vh) scale(1.2) rotate(360deg);
    }
}
/* 最后一页文字微调 */

#scene6 h1{
    margin-bottom:15px;
}

#scene6 p{
    line-height:1.6;
    margin-bottom:-10px;
    color: #F6EEDC;
}

#scene6 button{
    margin-top:20px;
}
/* 最后一页内容整体上移 */
#scene6{
    justify-content:center;
    padding-bottom:80px;
}