/* ============================================
   boot.css — 蛋薯机 DanShu Pro 开机动画 v3
   直接用图片铺满，叠加动态效果
   ============================================ */

/* ===== 全屏遮罩 ===== */
.boot-screen {
    position: absolute;
    inset: 0;
    z-index: 99999;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: all;
    opacity: 1;
    transition: opacity .8s cubic-bezier(.4, 0, .2, 1),
        transform .8s cubic-bezier(.4, 0, .2, 1);
}

.boot-screen.boot-fade-out {
    opacity: 0;
    transform: scale(1.05);
    pointer-events: none;
}

/* ===== 全屏图片 ===== */
.boot-fullimg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    animation: imgFadeIn 1.2s .1s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes imgFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.08);
        filter: blur(6px) brightness(1.15);
    }

    60% {
        opacity: 1;
        filter: blur(0) brightness(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
}

/* 图片持续微呼吸 */
.boot-fullimg {
    animation: imgFadeIn 1.2s .1s cubic-bezier(.4, 0, .2, 1) forwards,
        imgBreath 4s 1.3s ease-in-out infinite;
}

@keyframes imgBreath {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.015);
        filter: brightness(1.04);
    }
}

/* ===== 粒子层 ===== */
.boot-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* --- 微光光点 --- */
.boot-spark {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
    background: radial-gradient(circle, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 70%);
}

.boot-spark.s-1 {
    width: 5px;
    height: 5px;
    left: 15%;
    top: 22%;
    animation: sparkle1 4s 1s ease-in-out infinite;
}

.boot-spark.s-2 {
    width: 3px;
    height: 3px;
    left: 72%;
    top: 18%;
    animation: sparkle2 3.5s 1.5s ease-in-out infinite;
}

.boot-spark.s-3 {
    width: 4px;
    height: 4px;
    left: 80%;
    top: 55%;
    animation: sparkle1 5s 0.8s ease-in-out infinite;
}

.boot-spark.s-4 {
    width: 3px;
    height: 3px;
    left: 25%;
    top: 68%;
    animation: sparkle2 4.5s 2s ease-in-out infinite;
}

.boot-spark.s-5 {
    width: 4px;
    height: 4px;
    left: 55%;
    top: 40%;
    animation: sparkle3 3.8s 1.2s ease-in-out infinite;
}

@keyframes sparkle1 {

    0%,
    100% {
        opacity: 0;
        transform: scale(.3) translateY(0);
    }

    20% {
        opacity: .9;
        transform: scale(1);
    }

    50% {
        opacity: .6;
        transform: scale(.8) translateY(-12px);
    }

    80% {
        opacity: .3;
        transform: scale(.5) translateY(-20px);
    }
}

@keyframes sparkle2 {

    0%,
    100% {
        opacity: 0;
        transform: scale(.4) translate(0, 0);
    }

    30% {
        opacity: .8;
        transform: scale(1.1) translate(5px, -8px);
    }

    70% {
        opacity: .4;
        transform: scale(.6) translate(-3px, -18px);
    }
}

@keyframes sparkle3 {

    0%,
    100% {
        opacity: 0;
        transform: scale(.2);
    }

    15% {
        opacity: 0;
    }

    35% {
        opacity: 1;
        transform: scale(1.3);
    }

    65% {
        opacity: .5;
        transform: scale(.7);
    }

    85% {
        opacity: 0;
    }
}

/* --- 漂浮爱心 --- */
.boot-heart {
    position: absolute;
    will-change: transform, opacity;
}

.boot-heart::before {
    content: '♡';
    display: block;
    font-size: inherit;
    color: inherit;
    line-height: 1;
}

.boot-heart.h-1 {
    left: 18%;
    bottom: 30%;
    font-size: 10px;
    color: rgba(255, 255, 255, .25);
    animation: heartUp1 6s 1.5s ease-in-out infinite;
}

.boot-heart.h-2 {
    left: 68%;
    bottom: 25%;
    font-size: 7px;
    color: rgba(255, 255, 255, .2);
    animation: heartUp2 7s 2s ease-in-out infinite;
}

.boot-heart.h-3 {
    left: 45%;
    bottom: 20%;
    font-size: 8px;
    color: rgba(255, 255, 255, .18);
    animation: heartUp3 5.5s 2.5s ease-in-out infinite;
}

@keyframes heartUp1 {
    0% {
        transform: translateY(0) scale(.5) rotate(-5deg);
        opacity: 0;
    }

    15% {
        opacity: .5;
    }

    50% {
        transform: translateY(-60px) scale(1) rotate(8deg);
        opacity: .6;
    }

    85% {
        opacity: .15;
    }

    100% {
        transform: translateY(-110px) scale(.4) rotate(-3deg);
        opacity: 0;
    }
}

@keyframes heartUp2 {
    0% {
        transform: translateY(0) scale(.6) rotate(3deg);
        opacity: 0;
    }

    20% {
        opacity: .4;
    }

    55% {
        transform: translateY(-50px) scale(1.1) rotate(-6deg);
        opacity: .5;
    }

    90% {
        opacity: .1;
    }

    100% {
        transform: translateY(-95px) scale(.3) rotate(5deg);
        opacity: 0;
    }
}

@keyframes heartUp3 {
    0% {
        transform: translateY(0) scale(.4) rotate(-8deg);
        opacity: 0;
    }

    10% {
        opacity: .45;
    }

    45% {
        transform: translateY(-55px) scale(.9) rotate(4deg);
        opacity: .55;
    }

    80% {
        opacity: .1;
    }

    100% {
        transform: translateY(-100px) scale(.35) rotate(-2deg);
        opacity: 0;
    }
}

/* ===== 底部微光扫描线 ===== */
.boot-shimmer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(0deg,
            rgba(255, 255, 255, .08) 0%,
            transparent 100%);
    opacity: 0;
    animation: shimmerPulse 3s 1s ease-in-out infinite;
}

@keyframes shimmerPulse {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* ===== 淡出时额外光效 ===== */
.boot-screen.boot-fade-out .boot-fullimg {
    filter: brightness(1.2) blur(2px);
    transform: scale(1.04);
    transition: all .8s ease;
}

.boot-screen.boot-fade-out .boot-particles {
    opacity: 0;
    transition: opacity .4s ease;
}

.boot-screen.boot-fade-out .boot-shimmer {
    opacity: 0 !important;
    transition: opacity .3s ease;
}