/* ===========================================
   ESCAPE ROOM BACKGROUND
   PART 1
=========================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root{

--bg:#03030a;
--blue:#38BDF8;
--purple:#8f71d4;
--amber:#e0b770;
--green:#10B981;
--white:#f8fafc;

}

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

html,body{

width:100%;
height:100%;
background:#020207;
font-family:'Rajdhani',sans-serif;
overflow: hidden;
margin:0;
padding: 0;
}

body{

background:
radial-gradient(circle at 20% 20%,#0b1022 0%,transparent 45%),
radial-gradient(circle at 80% 15%,#170d30 0%,transparent 40%),
radial-gradient(circle at 50% 85%,#241508 0%,transparent 45%),
linear-gradient(#020207,#000);

}

.scene{

position:relative;
width:100%;
height:100vh;
min-height:100vh;
overflow: hidden;

}

/*====================
BACKGROUND
=====================*/

.bg-base{

position:absolute;
inset:0;

background:

radial-gradient(circle at 50% 30%,
rgba(30,40,80,.25),
transparent 55%),

radial-gradient(circle at 15% 75%,
rgba(120,70,10,.15),
transparent 50%),

radial-gradient(circle at 90% 20%,
rgba(80,40,120,.18),
transparent 40%),

linear-gradient(180deg,
#03030a,
#010103 65%,
#000);

z-index:-20;

}

/*====================
GRADIENTS
=====================*/

.gradient-layer{

position:absolute;
inset:0;

}

.gradient-one{

background:

radial-gradient(circle at 20% 55%,
rgba(255,160,0,.09),
transparent 60%);

animation:gradientMove1 22s ease-in-out infinite alternate;

}

.gradient-two{

background:

radial-gradient(circle at 82% 20%,
rgba(120,70,255,.12),
transparent 55%);

animation:gradientMove2 18s ease-in-out infinite alternate;

}

.gradient-three{

background:

radial-gradient(circle at 55% 85%,
rgba(0,140,255,.10),
transparent 55%);

animation:gradientMove3 26s ease-in-out infinite alternate;

}

/*====================
LIGHT BEAMS
=====================*/

.beam{

position:absolute;

filter:blur(55px);

mix-blend-mode:screen;

opacity:.08;

}

.beam-moon{

left:62%;
top:-5%;

width:320px;
height:120vh;

background:

linear-gradient(
180deg,
rgba(170,220,255,.9),
transparent 70%
);

transform:skewX(-12deg);

animation:beamPulse 12s infinite;

}

.beam-blue{

left:42%;
top:-10%;

width:200px;
height:120vh;

background:

linear-gradient(
180deg,
rgba(0,170,255,.8),
transparent 65%
);

transform:skewX(15deg);

animation:beamPulse 18s infinite;

}

.beam-amber{

left:14%;
top:-5%;

width:180px;
height:80vh;

background:

linear-gradient(
180deg,
rgba(255,170,0,.8),
transparent 65%
);

transform:skewX(10deg);

animation:beamPulse 16s infinite;

}

/*====================
FOG
=====================*/

.fog{

position:absolute;
inset:0;

pointer-events:none;

}

.fog-1{

background:

radial-gradient(circle at 20% 70%,
rgba(56,189,248,.05),
transparent 60%),

radial-gradient(circle at 80% 25%,
rgba(139,92,246,.05),
transparent 55%);

filter:blur(40px);

animation:fogMove1 30s linear infinite alternate;

}

.fog-2{

background:

radial-gradient(circle at 50% 90%,
rgba(0,0,0,.65),
transparent 65%);

filter:blur(80px);

animation:fogMove2 45s linear infinite alternate;

}

.fog-3{

background:

linear-gradient(
180deg,
transparent,
rgba(0,0,0,.55));

}

/*====================
VIGNETTE
=====================*/

.vignette{

position:absolute;
inset:0;

background:

radial-gradient(circle,
transparent 40%,
rgba(0,0,0,.45) 75%,
rgba(0,0,0,.92) 100%);

pointer-events:none;

}

/*====================
STAR LAYERS
=====================*/

.star-layer{

position:absolute;
inset:0;

overflow:hidden;

}

.star-layer::before{

content:"";

position:absolute;

width:2px;
height:2px;


border-radius:50%;

animation:starDrift 120s linear infinite;

}

/* layer 1 */

.stars1::before{

box-shadow:

40px 60px white,
90px 240px white,
160px 130px white,
260px 340px white,
330px 70px white,
420px 220px white,
510px 140px white,
620px 300px white,
720px 90px white,
820px 250px white,
930px 110px white,
1040px 330px white,
1140px 190px white,
1260px 260px white,
1370px 100px white,
1490px 310px white,
1610px 160px white,
1710px 230px white,
1830px 120px white;

opacity:.8;

}

/* layer 2 */

.stars2::before{

box-shadow:

30px 420px #bfe9ff,
150px 510px #ffffff,
280px 460px #dbeafe,
430px 620px white,
580px 410px white,
720px 500px white,
870px 660px white,
1020px 440px white,
1160px 560px white,
1300px 430px white,
1450px 610px white,
1600px 470px white,
1750px 520px white;

opacity:.45;

animation-duration:180s;

}

/* layer 3 */

.stars3::before{

width:3px;
height:3px;

background:#38BDF8;

box-shadow:

180px 90px,
450px 170px,
700px 210px,
980px 120px,
1220px 250px,
1510px 180px,
1750px 280px;

filter:blur(.5px);

animation:twinkle 5s infinite alternate;

}

/*====================
CONTENT
=====================*/

.content{

position:absolute;

width:100%;
height:100%;
overflow: auto;
left:50%;
top:50%;
display: flex;
align-items: center;
  justify-content: center;
transform:translate(-50%,-50%);
background:rgba(0, 0, 0, 0.11);
/* backdrop-filter: blur(1px); */
text-align:center;

z-index:20;

}

.content h1{

font-family:serif;

font-size:60px;

letter-spacing:6px;

color:white;

text-shadow:

0 0 15px rgba(56,189,248,.6),
0 0 40px rgba(139,92,246,.3);

margin-bottom:20px;

}


.content p{

width:700px;
max-width:90vw;

margin:auto;

font-size:22px;

color:#d4d4d8;

line-height:1.8;

}

.content button{

margin-top:15px;

padding:18px 55px;

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

border:1px solid rgba(255,255,255,.2);

color:white;

font-size:18px;

letter-spacing:3px;

cursor:pointer;

backdrop-filter:blur(10px);

transition:.35s;

}

.content button:hover{

background:#38BDF8;

color:black;

box-shadow:

0 0 30px #38BDF8;

transform:translateY(-5px);

}


/* ==========================================
   DYNAMIC PARTICLE ANIMATIONS
========================================== */


/* STAR FIELD */

.dynamic-stars{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:5;
}


.star{

    position:absolute;

    background:white;

    border-radius:50%;

    opacity:.5;

    box-shadow:
    0 0 6px white,
    0 0 12px #38BDF8;

    animation:
    starTwinkle 5s ease-in-out infinite,
    starFloat 30s linear infinite;

}



@keyframes starTwinkle{

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

    50%{
        opacity:1;
        transform:scale(1.8);
    }

}


@keyframes starFloat{

    from{
        translate:0 0;
    }

    to{
        translate:0 -120px;
    }

}





/* FLOATING DUST */


.dust-container{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:8;

}



.dust{

    position:absolute;

    border-radius:50%;

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


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


    animation:
    dustMove linear infinite;


}



@keyframes dustMove{


0%{

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

    opacity:0;

}


10%{

    opacity:.8;

}


50%{

    transform:
    translateY(-50vh)
    translateX(80px)
    scale(1.5);

}



100%{

    transform:
    translateY(-110vh)
    translateX(-40px)
    scale(.5);

    opacity:0;

}


}







/* EMBERS */


.embers{

position:absolute;

inset:0;

pointer-events:none;

z-index:10;

}



.ember{

position:absolute;

width:5px;

height:5px;

border-radius:50%;


background:

radial-gradient(
circle,
#fff7ae,
#f97316,
transparent
);



box-shadow:

0 0 10px #f0a423,
0 0 25px #ca5050;



animation:

emberRise linear infinite;


}



@keyframes emberRise{


0%{

transform:
translateY(0)
scale(1);

opacity:0;

}


20%{

opacity:1;

}


100%{

transform:
translateY(-90vh)
translateX(80px)
scale(.2);


opacity:0;

}


}








/* FIREFLIES */


.fireflies{

position:absolute;

inset:0;

pointer-events:none;

z-index:12;

}



.firefly{

position:absolute;

width:6px;

height:6px;


background:#fde047;

border-radius:50%;


box-shadow:

0 0 10px #ddce84,
0 0 30px #b69f77;



animation:

fireflyMove ease-in-out infinite;


}



@keyframes fireflyMove{


0%,100%{

transform:
translate(0,0);

opacity:.2;

}


25%{

transform:
translate(40px,-80px);

opacity:1;

}


50%{

transform:
translate(-30px,-150px);

opacity:.8;

}


75%{

transform:
translate(70px,-220px);

opacity:.4;

}


}






/* LIGHTNING */


.lightning{

position:absolute;

inset:0;

background:white;

opacity:0;

pointer-events:none;

z-index:50;

}



.lightning.flash{

animation:

lightFlash .25s ease;

}



@keyframes lightFlash{


0%{
opacity:0;
}


20%{

opacity:.25;

}


40%{

opacity:0;

}


60%{

opacity:.12;

}


100%{

opacity:0;

}


}