/* =========================================================
   Longの图床 Boot Loader
   真实 DOM 版本
   ========================================================= */


/* 加载期间禁止滚动 */
html.long-preloading,
html.long-preloading body {
    overflow: hidden !important;
}


/*
 * 隐藏原始 PictShare
 * 但绝对不隐藏 #long-boot
 */
html.long-preloading body > *:not(#long-boot) {
    visibility: hidden !important;
}


/* =========================================================
   整个启动层
   ========================================================= */

#long-boot {
    position: fixed !important;

    inset: 0 !important;

    z-index: 2147483647 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    visibility: visible !important;

    opacity: 1;

    pointer-events: all;

    background:
        radial-gradient(
            circle at 47% 44%,
            rgba(125, 223, 255, 0.20),
            transparent 27%
        ),

        radial-gradient(
            circle at 54% 49%,
            rgba(174, 125, 255, 0.17),
            transparent 31%
        ),

        radial-gradient(
            circle at 51% 50%,
            rgba(255, 155, 231, 0.07),
            transparent 38%
        ),

        #f7f9ff;

    transition:
        opacity 0.38s ease;
}


/* =========================================================
   中央卡片
   ========================================================= */

#long-boot .long-boot-card {
    position: relative;

    width: 226px;

    box-sizing: border-box;

    padding:
        30px
        28px
        28px;

    display: flex;

    flex-direction: column;

    align-items: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.86);

    border-radius: 27px;

    background:
        rgba(255, 255, 255, 0.74);

    backdrop-filter:
        blur(22px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(120%);

    box-shadow:
        0 24px 70px rgba(76, 87, 155, 0.14),
        0 10px 30px rgba(137, 117, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);

    transform:
        translateY(0)
        scale(1);

    opacity: 1;

    animation:
        longBootBreath
        2.5s
        ease-in-out
        infinite;

    transition:
        opacity 0.32s ease,
        transform 0.38s cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   加载圆环
   ========================================================= */

#long-boot .long-loader {
    width: 46px;
    height: 46px;

    flex:
        0 0
        46px;

    display: block;

    box-sizing: border-box;

    margin-bottom: 25px;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,

            #72ddff 0deg,
            #839cff 90deg,
            #a57cff 180deg,
            #d984ff 250deg,
            #ff9bdc 305deg,

            transparent 342deg,
            transparent 360deg
        );

    -webkit-mask:
        radial-gradient(
            farthest-side,

            transparent
            calc(100% - 5px),

            #000
            calc(100% - 4px)
        );

    mask:
        radial-gradient(
            farthest-side,

            transparent
            calc(100% - 5px),

            #000
            calc(100% - 4px)
        );

    filter:
        drop-shadow(
            0 0 8px
            rgba(137, 126, 255, 0.27)
        );

    animation:
        longBootSpin
        0.95s
        linear
        infinite;
}


/* =========================================================
   标题
   ========================================================= */

#long-boot .long-boot-title {
    margin: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Microsoft YaHei",
        "PingFang SC",
        sans-serif;

    font-size: 17px;

    font-weight: 650;

    line-height: 1.5;

    color: #39415d;

    text-align: center;
}


/* =========================================================
   加载文字
   ========================================================= */

#long-boot .long-boot-subtitle {
    margin-top: 5px;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Microsoft YaHei",
        "PingFang SC",
        sans-serif;

    font-size: 15px;

    font-weight: 550;

    line-height: 1.5;

    color:
        rgba(
            57,
            65,
            93,
            0.78
        );

    text-align: center;
}


/* =========================================================
   圆环动画
   ========================================================= */

@keyframes longBootSpin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   卡片轻微呼吸
   ========================================================= */

@keyframes longBootBreath {

    0%,
    100% {

        box-shadow:
            0 24px 70px rgba(76,87,155,.14),
            0 10px 30px rgba(137,117,255,.08),
            inset 0 1px 0 rgba(255,255,255,.96);

    }

    50% {

        box-shadow:
            0 28px 80px rgba(76,87,155,.18),
            0 13px 38px rgba(137,117,255,.13),
            inset 0 1px 0 rgba(255,255,255,.98);

    }

}


/* =========================================================
   退出状态
   ========================================================= */


/* 先把真正的图床显示出来 */
html.long-preloading.long-boot-leaving
body > *:not(#long-boot) {

    visibility:
        visible !important;

}


/* 整个启动层淡出 */
html.long-boot-leaving #long-boot {

    opacity: 0;

    pointer-events: none;

}


/* 卡片退出时轻微缩小 */
html.long-boot-leaving
#long-boot
.long-boot-card {

    animation: none;

    opacity: 0;

    transform:
        translateY(-4px)
        scale(0.97);

}


/* =========================================================
   手机
   ========================================================= */

@media (max-width: 600px) {

    #long-boot .long-boot-card {

        width: 210px;

        padding:
            27px
            24px
            25px;

        border-radius: 25px;

    }


    #long-boot .long-loader {

        width: 42px;
        height: 42px;

        flex-basis: 42px;

        margin-bottom: 23px;

    }


    #long-boot .long-boot-title {

        font-size: 16px;

    }


    #long-boot .long-boot-subtitle {

        font-size: 14px;

    }

}
/* =========================================================
   更轻的启动卡片
   ========================================================= */

#long-boot .long-boot-card {
    background:
        rgba(255, 255, 255, 0.58);

    border:
        1px solid
        rgba(255, 255, 255, 0.72);

    box-shadow:
        0 20px 55px rgba(86, 92, 150, 0.11),
        0 8px 24px rgba(137, 117, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);

    backdrop-filter:
        blur(28px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(125%);
}


/* 副标题整体 */
#long-boot .long-boot-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-top: 7px;

    color:
        rgba(57, 65, 93, 0.66);

    font-size: 14px;
    font-weight: 500;
}


/* 三个动态点容器 */
#long-boot .long-boot-dots {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    height: 14px;
}


/* 单个点 */
#long-boot .long-boot-dots i {
    display: block;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #79ddff,
            #a67cff,
            #ff9bdc
        );

    opacity: 0.45;

    animation:
        longBootDot
        1.2s
        ease-in-out
        infinite;
}


/* 错开动画时间 */
#long-boot .long-boot-dots i:nth-child(2) {
    animation-delay: 0.16s;
}

#long-boot .long-boot-dots i:nth-child(3) {
    animation-delay: 0.32s;
}


/* 小点跳动 */
@keyframes longBootDot {

    0%,
    60%,
    100% {
        transform:
            translateY(0);

        opacity:
            0.35;
    }

    30% {
        transform:
            translateY(-4px);

        opacity:
            1;
    }

}