/* boot-animation.css — love咪开机过渡页（由 style.css 拆出；index.html 须先于 style.css 引用以保证首帧样式） */
/* ========== love咪 开机过渡页 ========== */
.love-mi-boot-screen {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.24) 0, rgba(255, 255, 255, 0.02) 34%, transparent 54%),
        radial-gradient(circle at 80% 14%, rgba(224, 234, 245, 0.14) 0, rgba(224, 234, 245, 0.02) 30%, transparent 52%),
        linear-gradient(180deg, #6A84A1 0%, #5B7493 48%, #516987 100%);
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.love-mi-boot-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 35%, rgba(18, 32, 49, 0.18) 100%);
    pointer-events: none;
}

.love-mi-boot-screen--hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.love-mi-boot-inner {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 24px;
}

.love-mi-boot-logo-shadow {
    width: min(72vw, 260px);
    margin: 0 auto;
    filter: drop-shadow(0 18px 30px rgba(22, 35, 53, 0.18));
}

/* 摆动加在容器上，底层图与气泡层一起转，避免只转底层时与上层错位重影 */
.love-mi-boot-logo-wrap {
    position: relative;
    width: 100%;
    margin: 0;
    transform-origin: 26% 88%;
    animation: love-mi-boot-tail-wag 1.08s ease-in-out infinite;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.love-mi-boot-logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(42vh, 280px);
    object-fit: contain;
    user-select: none;
    pointer-events: none;
}

.love-mi-boot-logo--base {
    position: relative;
    z-index: 0;
}

@keyframes love-mi-boot-tail-wag {
    0%, 100% { transform: translateZ(0) rotate(-5.5deg); }
    50% { transform: translateZ(0) rotate(5.5deg); }
}

/* 第二层仅显示右侧气泡区域，做透明度脉动；与 base 同坐标，随父级一起摆动 */
.love-mi-boot-logo--bubble {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: min(42vh, 280px);
    object-fit: contain;
    z-index: 1;
    opacity: 0.22;
    filter: saturate(1.04) brightness(1.02);
    clip-path: ellipse(23% 28% at 75% 50%);
    -webkit-clip-path: ellipse(23% 28% at 75% 50%);
    animation: love-mi-boot-mi-pulse 2.4s ease-in-out infinite;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
}

@keyframes love-mi-boot-mi-pulse {
    0%, 100% { opacity: 0.22; }
    35% { opacity: 1; }
    55% { opacity: 0.35; }
    70% { opacity: 0.95; }
}

.love-mi-boot-hint {
    margin-top: 20px;
    font-size: 15px;
    letter-spacing: 0.12em;
    color: rgba(243, 247, 252, 0.82);
    text-shadow: 0 3px 12px rgba(19, 31, 46, 0.2);
    font-weight: 600;
}

.love-mi-boot-snow {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.love-mi-boot-snow span {
    position: absolute;
    top: -10vh;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0.92;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.98) 0 38%, rgba(210, 211, 213, 0.88) 56%, rgba(210, 211, 213, 0.08) 100%);
    box-shadow: 0 0 12px rgba(233, 236, 240, 0.28);
    animation-name: love-mi-boot-flake;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

.love-mi-boot-snow span:nth-child(3n) {
    background: radial-gradient(circle at 38% 38%, rgba(210, 211, 213, 0.96) 0 34%, rgba(154, 162, 173, 0.74) 58%, rgba(154, 162, 173, 0.08) 100%);
    box-shadow: 0 0 10px rgba(154, 162, 173, 0.2);
}

.love-mi-boot-snow span:nth-child(4n) {
    background: radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.98) 0 30%, rgba(210, 211, 213, 0.9) 52%, rgba(210, 211, 213, 0.08) 100%);
    filter: blur(0.5px);
    opacity: 0.68;
}

.love-mi-boot-snow span:nth-child(5n) {
    background: radial-gradient(circle at 36% 36%, rgba(154, 162, 173, 0.92) 0 24%, rgba(210, 211, 213, 0.78) 52%, rgba(210, 211, 213, 0.06) 100%);
    opacity: 0.58;
    box-shadow: 0 0 8px rgba(154, 162, 173, 0.2);
}

.love-mi-boot-snow span:nth-child(6n) {
    background: radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 1) 0 28%, rgba(210, 211, 213, 0.96) 48%, rgba(154, 162, 173, 0.24) 72%, rgba(154, 162, 173, 0) 100%);
    box-shadow: 0 0 16px rgba(236, 243, 255, 0.32), 0 0 26px rgba(154, 162, 173, 0.16);
}

.love-mi-boot-snow span:nth-child(7n) {
    filter: blur(1.1px);
    opacity: 0.38;
}

.love-mi-boot-snow span:nth-child(8n) {
    mix-blend-mode: screen;
}

/* 开机过渡：额外色雪花（#6B7473 / #BABEC7），与原有白/灰雪花并存；下落时长单独设定 */
.love-mi-boot-snow span.love-mi-boot-snowflake--slate {
    background: radial-gradient(circle at 36% 32%, rgba(186, 190, 199, 0.42) 0 28%, #6b7473 52%, rgba(107, 116, 115, 0.08) 100%);
    box-shadow: 0 0 14px rgba(107, 116, 115, 0.4);
    filter: none;
    mix-blend-mode: normal;
    opacity: 0.88;
}

.love-mi-boot-snow span.love-mi-boot-snowflake--mist {
    background: radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.78) 0 30%, #babec7 50%, rgba(186, 190, 199, 0.12) 100%);
    box-shadow: 0 0 16px rgba(186, 190, 199, 0.45);
    filter: none;
    mix-blend-mode: normal;
    opacity: 0.9;
}

.love-mi-boot-snow span:nth-child(1) { left: 3%; animation-duration: 11.2s; animation-delay: -0.8s; }
.love-mi-boot-snow span:nth-child(2) { left: 7%; animation-duration: 16.6s; animation-delay: -3.4s; width: 3px; height: 3px; opacity: 0.5; }
.love-mi-boot-snow span:nth-child(3) { left: 11%; animation-duration: 13.5s; animation-delay: -6.1s; width: 5px; height: 5px; }
.love-mi-boot-snow span:nth-child(4) { left: 15%; animation-duration: 10.2s; animation-delay: -1.9s; width: 8px; height: 8px; }
.love-mi-boot-snow span:nth-child(5) { left: 19%; animation-duration: 15.8s; animation-delay: -8.7s; width: 4px; height: 4px; }
.love-mi-boot-snow span:nth-child(6) { left: 23%; animation-duration: 12s; animation-delay: -2.8s; width: 6px; height: 6px; }
.love-mi-boot-snow span:nth-child(7) { left: 27%; animation-duration: 17.6s; animation-delay: -10.5s; width: 3px; height: 3px; opacity: 0.46; }
.love-mi-boot-snow span:nth-child(8) { left: 31%; animation-duration: 10.9s; animation-delay: -4.4s; width: 9px; height: 9px; }
.love-mi-boot-snow span:nth-child(9) { left: 35%; animation-duration: 13.8s; animation-delay: -7.6s; width: 5px; height: 5px; }
.love-mi-boot-snow span:nth-child(10) { left: 39%; animation-duration: 18.4s; animation-delay: -5.8s; width: 3px; height: 3px; opacity: 0.44; }
.love-mi-boot-snow span:nth-child(11) { left: 43%; animation-duration: 12.2s; animation-delay: -9.3s; width: 6px; height: 6px; }
.love-mi-boot-snow span:nth-child(12) { left: 47%; animation-duration: 9.8s; animation-delay: -2.1s; width: 8px; height: 8px; }
.love-mi-boot-snow span:nth-child(13) { left: 51%; animation-duration: 15.1s; animation-delay: -11.8s; width: 4px; height: 4px; }
.love-mi-boot-snow span:nth-child(14) { left: 55%; animation-duration: 12.8s; animation-delay: -6.5s; width: 6px; height: 6px; }
.love-mi-boot-snow span:nth-child(15) { left: 59%; animation-duration: 17.8s; animation-delay: -1.2s; width: 3px; height: 3px; opacity: 0.48; }
.love-mi-boot-snow span:nth-child(16) { left: 63%; animation-duration: 11.1s; animation-delay: -8.2s; width: 9px; height: 9px; }
.love-mi-boot-snow span:nth-child(17) { left: 67%; animation-duration: 14.7s; animation-delay: -4.9s; width: 5px; height: 5px; }
.love-mi-boot-snow span:nth-child(18) { left: 71%; animation-duration: 9.6s; animation-delay: -7.1s; width: 8px; height: 8px; }
.love-mi-boot-snow span:nth-child(19) { left: 75%; animation-duration: 16.9s; animation-delay: -12.3s; width: 3px; height: 3px; opacity: 0.42; }
.love-mi-boot-snow span:nth-child(20) { left: 79%; animation-duration: 12.4s; animation-delay: -5.2s; width: 5px; height: 5px; }
.love-mi-boot-snow span:nth-child(21) { left: 83%; animation-duration: 15.9s; animation-delay: -9.9s; width: 4px; height: 4px; }
.love-mi-boot-snow span:nth-child(22) { left: 87%; animation-duration: 10.9s; animation-delay: -3.7s; width: 8px; height: 8px; }
.love-mi-boot-snow span:nth-child(23) { left: 91%; animation-duration: 14.1s; animation-delay: -6.9s; width: 4px; height: 4px; }
.love-mi-boot-snow span:nth-child(24) { left: 95%; animation-duration: 18.1s; animation-delay: -10.7s; width: 3px; height: 3px; opacity: 0.45; }
.love-mi-boot-snow span:nth-child(25) { left: 5%; animation-duration: 11.7s; animation-delay: -1.5s; width: 7px; height: 7px; }
.love-mi-boot-snow span:nth-child(26) { left: 13%; animation-duration: 16s; animation-delay: -13.1s; width: 3px; height: 3px; opacity: 0.38; }
.love-mi-boot-snow span:nth-child(27) { left: 21%; animation-duration: 10.5s; animation-delay: -4.1s; width: 8px; height: 8px; }
.love-mi-boot-snow span:nth-child(28) { left: 29%; animation-duration: 13.3s; animation-delay: -8.8s; width: 4px; height: 4px; }
.love-mi-boot-snow span:nth-child(29) { left: 37%; animation-duration: 15.2s; animation-delay: -2.4s; width: 5px; height: 5px; }
.love-mi-boot-snow span:nth-child(30) { left: 45%; animation-duration: 11.4s; animation-delay: -7.9s; width: 7px; height: 7px; }
.love-mi-boot-snow span:nth-child(31) { left: 53%; animation-duration: 17.3s; animation-delay: -9.1s; width: 3px; height: 3px; opacity: 0.4; }
.love-mi-boot-snow span:nth-child(32) { left: 61%; animation-duration: 10.1s; animation-delay: -5.7s; width: 9px; height: 9px; }
.love-mi-boot-snow span:nth-child(33) { left: 69%; animation-duration: 13.7s; animation-delay: -11.4s; width: 4px; height: 4px; }
.love-mi-boot-snow span:nth-child(34) { left: 77%; animation-duration: 15.6s; animation-delay: -3.3s; width: 6px; height: 6px; }
.love-mi-boot-snow span:nth-child(35) { left: 85%; animation-duration: 12.6s; animation-delay: -6.2s; width: 5px; height: 5px; }
.love-mi-boot-snow span:nth-child(36) { left: 93%; animation-duration: 18.2s; animation-delay: -10.8s; width: 3px; height: 3px; opacity: 0.36; }
.love-mi-boot-snow span:nth-child(37) { left: 9%; animation-duration: 11.9s; animation-delay: -4.8s; width: 8px; height: 8px; }
.love-mi-boot-snow span:nth-child(38) { left: 25%; animation-duration: 14.8s; animation-delay: -12.6s; width: 4px; height: 4px; }
.love-mi-boot-snow span:nth-child(39) { left: 41%; animation-duration: 10.7s; animation-delay: -2.7s; width: 7px; height: 7px; }
.love-mi-boot-snow span:nth-child(40) { left: 57%; animation-duration: 16.4s; animation-delay: -8.6s; width: 3px; height: 3px; opacity: 0.42; }
.love-mi-boot-snow span:nth-child(41) { left: 73%; animation-duration: 12.8s; animation-delay: -5.1s; width: 6px; height: 6px; }
.love-mi-boot-snow span:nth-child(42) { left: 89%; animation-duration: 9.7s; animation-delay: -9.8s; width: 8px; height: 8px; }
.love-mi-boot-snow span:nth-child(43) { left: 17%; animation-duration: 15.5s; animation-delay: -6.7s; width: 4px; height: 4px; }
.love-mi-boot-snow span:nth-child(44) { left: 49%; animation-duration: 11s; animation-delay: -1.6s; width: 9px; height: 9px; }
/* #6B7473 雪花：较快下落 */
.love-mi-boot-snow span.love-mi-boot-snowflake--slate:nth-child(45) { left: 14%; animation-duration: 7.2s; animation-delay: -2.1s; width: 5px; height: 5px; }
.love-mi-boot-snow span.love-mi-boot-snowflake--slate:nth-child(46) { left: 66%; animation-duration: 8.6s; animation-delay: -5.4s; width: 4px; height: 4px; opacity: 0.82; }
/* #BABEC7 雪花：较慢下落 */
.love-mi-boot-snow span.love-mi-boot-snowflake--mist:nth-child(47) { left: 32%; animation-duration: 21.8s; animation-delay: -14.5s; width: 6px; height: 6px; }
.love-mi-boot-snow span.love-mi-boot-snowflake--mist:nth-child(48) { left: 78%; animation-duration: 23.5s; animation-delay: -8.3s; width: 5px; height: 5px; opacity: 0.78; }

@keyframes love-mi-boot-flake {
    0% {
        transform: translate3d(0, -10vh, 0) scale(0.52) rotate(0deg);
        opacity: 0;
    }
    7% {
        opacity: 0.92;
    }
    18% {
        transform: translate3d(8px, 14vh, 0) scale(0.68) rotate(48deg);
    }
    34% {
        transform: translate3d(-12px, 33vh, 0) scale(0.80) rotate(112deg);
    }
    51% {
        transform: translate3d(16px, 52vh, 0) scale(0.96) rotate(178deg);
        opacity: 0.96;
    }
    63% {
        transform: translate3d(-6px, 65vh, 0) scale(1.04) rotate(218deg);
    }
    68% {
        transform: translate3d(-10px, 73vh, 0) scale(1.08) rotate(242deg);
        opacity: 0.78;
    }
    84% {
        transform: translate3d(12px, 91vh, 0) scale(1.16) rotate(302deg);
        opacity: 0.58;
    }
    100% {
        transform: translate3d(-4px, 112vh, 0) scale(1.26) rotate(358deg);
        opacity: 0.08;
    }
}

.love-mi-boot-snowbank {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(30vh, 220px);
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.love-mi-boot-snowbank span {
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: -24%;
    transform-origin: center bottom;
}

.love-mi-boot-snowbank__back {
    height: 62%;
    background:
        radial-gradient(120% 90% at 12% 100%, rgba(132, 145, 160, 0.34) 0 26%, transparent 27%),
        radial-gradient(120% 92% at 31% 100%, rgba(178, 187, 198, 0.38) 0 24%, transparent 25%),
        radial-gradient(118% 92% at 54% 100%, rgba(143, 156, 170, 0.32) 0 28%, transparent 29%),
        radial-gradient(120% 94% at 77% 100%, rgba(186, 196, 208, 0.34) 0 24%, transparent 25%),
        radial-gradient(122% 96% at 96% 100%, rgba(132, 145, 160, 0.3) 0 22%, transparent 23%),
        linear-gradient(180deg, rgba(209, 217, 226, 0.08) 0%, rgba(164, 176, 189, 0.42) 55%, rgba(124, 137, 152, 0.68) 100%);
    filter: blur(5px);
    clip-path: url(#snow-back-clip);
    opacity: 0;
    animation: love-mi-boot-snowbank-back 11.8s cubic-bezier(.2, .72, .22, 1) forwards;
}

.love-mi-boot-snowbank__front {
    height: 84%;
    background:
        radial-gradient(110% 88% at 8% 100%, rgba(246, 249, 252, 0.92) 0 22%, transparent 23%),
        radial-gradient(112% 92% at 24% 100%, rgba(214, 219, 224, 0.94) 0 19%, transparent 20%),
        radial-gradient(114% 90% at 39% 100%, rgba(239, 243, 247, 0.98) 0 24%, transparent 25%),
        radial-gradient(118% 92% at 57% 100%, rgba(193, 201, 210, 0.9) 0 20%, transparent 21%),
        radial-gradient(116% 90% at 73% 100%, rgba(244, 247, 250, 0.96) 0 22%, transparent 23%),
        radial-gradient(112% 88% at 90% 100%, rgba(204, 211, 218, 0.88) 0 18%, transparent 19%),
        linear-gradient(180deg, rgba(249, 252, 255, 0.52) 0%, rgba(228, 233, 239, 0.9) 44%, rgba(188, 197, 207, 0.98) 74%, rgba(149, 161, 175, 1) 100%);
    clip-path: url(#snow-front-clip);
    box-shadow: 0 -18px 36px rgba(240, 246, 251, 0.18), 0 -8px 18px rgba(88, 107, 129, 0.1);
    opacity: 0;
    animation: love-mi-boot-snowbank-front 13.4s cubic-bezier(.18, .76, .22, 1) forwards;
}

@keyframes love-mi-boot-snowbank-back {
    0% {
        transform: translateY(52px) scaleX(0.94) scaleY(0.5);
        opacity: 0;
    }
    35% {
        opacity: 0.16;
    }
    100% {
        transform: translateY(0) scaleX(1) scaleY(1);
        opacity: 0.72;
    }
}

@keyframes love-mi-boot-snowbank-front {
    0% {
        transform: translateY(64px) scaleX(0.9) scaleY(0.42);
        opacity: 0;
    }
    28% {
        opacity: 0.12;
    }
    62% {
        opacity: 0.46;
    }
    100% {
        transform: translateY(0) scaleX(1) scaleY(1);
        opacity: 0.96;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* 不整段关掉开机动效：系统「减少动态效果」/ DevTools 模拟时原先会全关，易被误认为刷新后“坏了”。
       改为放慢、略减轻幅度，仍保留落雪与 logo 轻摆。 */
    .love-mi-boot-logo-wrap {
        animation: love-mi-boot-tail-wag-gentle 1.9s ease-in-out infinite;
    }
    .love-mi-boot-logo--bubble {
        animation: love-mi-boot-mi-pulse-slow 3.4s ease-in-out infinite;
    }
    .love-mi-boot-snow span {
        animation-name: love-mi-boot-flake;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-duration: 20s !important;
    }
    .love-mi-boot-snow span.love-mi-boot-snowflake--slate:nth-child(45),
    .love-mi-boot-snow span.love-mi-boot-snowflake--slate:nth-child(46) {
        animation-duration: 12s !important;
    }
    .love-mi-boot-snow span.love-mi-boot-snowflake--mist:nth-child(47),
    .love-mi-boot-snow span.love-mi-boot-snowflake--mist:nth-child(48) {
        animation-duration: 28s !important;
    }
    .love-mi-boot-snowbank__back {
        animation: love-mi-boot-snowbank-back 18s cubic-bezier(0.2, 0.72, 0.22, 1) forwards;
    }
    .love-mi-boot-snowbank__front {
        animation: love-mi-boot-snowbank-front 20s cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
    }
}

@keyframes love-mi-boot-tail-wag-gentle {
    0%,
    100% {
        transform: translateZ(0) rotate(-3.2deg);
    }
    50% {
        transform: translateZ(0) rotate(3.2deg);
    }
}

@keyframes love-mi-boot-mi-pulse-slow {
    0%,
    100% {
        opacity: 0.35;
    }
    40% {
        opacity: 1;
    }
    60% {
        opacity: 0.45;
    }
    75% {
        opacity: 0.92;
    }
}