#boot{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    transition:opacity .7s ease;
animation:skyBreath 12s ease-in-out infinite;
background:
radial-gradient(circle at 50% 15%,
rgba(255,223,140,.22) 0%,
rgba(255,223,140,0) 40%),

linear-gradient(
180deg,
#081423 0%,
#16335f 35%,
#3d6fb2 68%,
#8eb7ea 100%
);

}

#boot::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:
radial-gradient(circle,
transparent 45%,
rgba(0,0,0,.18) 75%,
rgba(0,0,0,.42) 100%);

}

#boot::before{
content:"";
position:absolute;
left:50%;
top:180px;

width:450px;
height:450px;

transform:translateX(-50%);
border-radius:50%;

background:radial-gradient(
circle,
rgba(255,223,140,.25),
transparent 70%
);

filter:blur(30px);
animation:skyGlow 8s ease-in-out infinite;
}

.boot-container{
    position:relative;
    z-index:2;
    text-align:center;
    padding:24px;
    animation:floatScene 6s ease-in-out infinite;
}

.boot-title{

font-size:34px;

line-height:1.35;

font-weight:700;

letter-spacing:.5px;

max-width:340px;

margin:20px auto;

color:white;

animation: titleReveal 1.8s ease forwards;

text-shadow:

0 0 20px rgba(255,255,255,.18);

}

.boot-status{

margin-top:22px;

font-size:17px;

letter-spacing:.3px;

color:rgba(255,255,255,.88);

min-height:24px;

opacity:1;

transition:
opacity .45s ease,
transform .45s ease;

}

.boot-status.fade{

opacity:0;

transform:translateY(8px);

}

#bootPercent{

margin-top:12px;

font-size:15px;

font-weight:600;

color:#FFD76A;

}

.boot-loader{

width:260px;
height:8px;

margin:30px auto 18px;

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

border-radius:50px;

overflow:hidden;

backdrop-filter:blur(12px);

animation:
loaderReveal 2.2s ease;

box-shadow:
inset 0 0 8px rgba(255,255,255,.15);

}

.boot-progress{

height:100%;
width:0;

position: relative;
overflow: hidden;

border-radius:50px;

background:linear-gradient(
90deg,
#FFE08A,
#FFD76A,
#FFF2C4
);

box-shadow:
0 0 18px rgba(255,215,106,.8),
0 0 36px rgba(255,215,106,.45);

transition:width .25s linear;

}

.boot-progress::after{

content:"";

position:absolute;

top:0;
left:-35%;

width:35%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.8),
transparent
);

animation:loaderShine 2.5s linear infinite;

}

@keyframes loaderShine{

to{

left:135%;

}

}

@keyframes skyGlow{

0%{
transform:translateX(-50%) scale(1);
opacity:.4;
}

50%{
transform:translateX(-50%) scale(1.15);
opacity:.75;
}

100%{
transform:translateX(-50%) scale(1);
opacity:.4;
}

}

.stars{

    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;

}

.stars span{

    position:absolute;

    width:3px;
    height:3px;

    background:#ffffff;

    border-radius:50%;

    box-shadow:0 0 8px rgba(255,255,255,.8);

    animation:twinkle 3s infinite ease-in-out;

}

/* Position */

.stars span:nth-child(1){top:10%;left:15%;}
.stars span:nth-child(2){top:18%;left:70%;}
.stars span:nth-child(3){top:30%;left:40%;}
.stars span:nth-child(4){top:12%;left:85%;}
.stars span:nth-child(5){top:45%;left:20%;}
.stars span:nth-child(6){top:55%;left:78%;}
.stars span:nth-child(7){top:70%;left:35%;}
.stars span:nth-child(8){top:80%;left:60%;}
.stars span:nth-child(9){top:25%;left:55%;}
.stars span:nth-child(10){top:65%;left:10%;}
.stars span:nth-child(11){top:38%;left:88%;}
.stars span:nth-child(12){top:88%;left:48%;}

/* Different timing */

.stars span:nth-child(2){animation-delay:.4s;}
.stars span:nth-child(3){animation-delay:1s;}
.stars span:nth-child(4){animation-delay:1.8s;}
.stars span:nth-child(5){animation-delay:.7s;}
.stars span:nth-child(6){animation-delay:2.2s;}
.stars span:nth-child(7){animation-delay:1.2s;}
.stars span:nth-child(8){animation-delay:2.8s;}
.stars span:nth-child(9){animation-delay:.9s;}
.stars span:nth-child(10){animation-delay:2s;}
.stars span:nth-child(11){animation-delay:1.5s;}
.stars span:nth-child(12){animation-delay:2.6s;}

@keyframes twinkle{

    0%,100%{

        opacity:.2;
        transform:scale(1);

    }

    50%{

        opacity:1;
        transform:scale(1.8);

    }

}

/* ===========================
   DREAM CLOUDS
=========================== */

.cloud{

position:absolute;

border-radius:50%;

filter:blur(60px);

pointer-events:none;

opacity:.18;

animation:cloudMove linear infinite;

}

.cloud1{

width:260px;
height:90px;

top:18%;
left:-280px;

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

animation-duration:45s;

}

.cloud2{

width:340px;
height:120px;

top:48%;
left:-360px;

background:rgba(255,245,220,.25);

animation-duration:60s;

animation-delay:-18s;

}

.cloud3{

width:220px;
height:80px;

top:72%;
left:-250px;

background:rgba(220,235,255,.30);

animation-duration:55s;

animation-delay:-35s;

}

@keyframes cloudMove{

from{

transform:translateX(0);

}

to{

transform:translateX(calc(100vw + 650px));

}

}

/* ===========================
   FIREFLIES
=========================== */

.fireflies{

position:absolute;

inset:0;

pointer-events:none;

overflow:hidden;

}

.fireflies span{

position:absolute;

width:6px;
height:6px;

border-radius:50%;

background:#FFD76A;

box-shadow:

0 0 8px #FFD76A,
0 0 18px #FFD76A,
0 0 30px rgba(255,215,106,.7);

animation:fireflyFloat linear infinite;

opacity:.28;

}

/* Positions */

.fireflies span:nth-child(1){left:8%;top:78%;animation-duration:13s;}
.fireflies span:nth-child(2){left:18%;top:55%;animation-duration:16s;}
.fireflies span:nth-child(3){left:32%;top:85%;animation-duration:15s;}
.fireflies span:nth-child(4){left:50%;top:62%;animation-duration:18s;}
.fireflies span:nth-child(5){left:66%;top:80%;animation-duration:14s;}
.fireflies span:nth-child(6){left:78%;top:48%;animation-duration:17s;}
.fireflies span:nth-child(7){left:88%;top:72%;animation-duration:15s;}
.fireflies span:nth-child(8){left:58%;top:92%;animation-duration:19s;}

@keyframes fireflyFloat{

0%{

transform:translate(0,0) scale(.7);

opacity:.2;

}

25%{

opacity:1;

}

50%{

transform:translate(-25px,-60px) scale(1);

}

75%{

transform:translate(20px,-120px);

opacity:.9;

}

100%{

transform:translate(-15px,-180px) scale(.5);

opacity:0;

}

}

/* ===========================
   SHOOTING STAR
=========================== */

.shooting-star{

position:absolute;

top:15%;
left:-120px;

width:120px;
height:2px;

background:linear-gradient(
90deg,
rgba(255,255,255,0),
rgba(255,255,255,.95),
rgba(255,223,140,.8)
);

border-radius:50px;

opacity:0;

filter:blur(.5px);

pointer-events:none;

animation:shootingStar 18s ease-in-out infinite;

}

@keyframes shootingStar{

0%,82%{

opacity:0;

transform:
translate(0,0)
rotate(-25deg);

}

84%{

opacity:1;

}

100%{

opacity:0;

transform:
translate(700px,260px)
rotate(-25deg);

}

}

@keyframes skyBreath{

0%,100%{

filter:brightness(1);

}

50% {
    
    filter: brightness(1.03);
    
}

}

@keyframes floatScene{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

@keyframes titleReveal{

0%{

opacity:0;

transform:
translateY(25px)
scale(.96);

}

100%{

opacity:1;

transform:
translateY(0)
scale(1);

}

}

@keyframes loaderReveal{

0%,35%{

opacity:0;

transform:translateY(12px);

}

100%{

opacity:1;

transform:translateY(0);

}

}