/* ==========================
   FINITI OS BUILD 0.2
========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:auto;

    background:#05020A;
    color:white;
}

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

#background{

position:fixed;
inset:0;
overflow:hidden;
z-index:-20;

background:
linear-gradient(
180deg,
#090313 0%,
#130321 20%,
#21083e 45%,
#2a0b56 65%,
#12041f 100%
);

}

/* ==========================
STARS
========================== */

#stars-back,
#stars-front {

    position:absolute;
    inset:0;

    background-image:
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(#d6b6ff 1px, transparent 1px),
        radial-gradient(#7e61ff 1px, transparent 1px);

    background-size:
        140px 140px,
        230px 230px,
        330px 330px;

    opacity:.55;

    animation:stars 90s linear infinite;

}

/* ==========================
NEBULA
========================== */

#nebula{

position:absolute;

width:180%;
height:180%;

left:-40%;
top:-30%;

filter:blur(80px);

opacity:.75;

background:

radial-gradient(circle,#7d49ff55 0%,transparent 25%),

radial-gradient(circle,#5b28ff33 0%,transparent 40%),

radial-gradient(circle,#ffffff08 0%,transparent 55%);

animation:nebula 35s ease-in-out infinite;

}

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

#fog{

position:absolute;

left:0;
right:0;
bottom:0;

height:220px;

background:

linear-gradient(
to top,
#18052d,
transparent
);

opacity:.75;

}

/* ==========================
SCANLINES
========================== */

#scanlines{

position:absolute;

inset:0;

pointer-events:none;

background:

repeating-linear-gradient(

180deg,

rgba(255,255,255,.02),

rgba(255,255,255,.02) 2px,

transparent 2px,

transparent 4px

);

mix-blend-mode:soft-light;

opacity:.35;

}
/* ==========================
WORLD
========================== */

#world{

    position:relative;

    width:100%;
    height:100vh;

    overflow:hidden;

}

/* ==========================
MOUNTAINS
========================== */

#mountains-back{

position:absolute;

left:0;
right:0;
bottom:150px;

height:180px;

background:

linear-gradient(
to top,
#12041d,
transparent
);

clip-path:polygon(
0% 100%,
10% 70%,
22% 88%,
36% 48%,
49% 82%,
63% 42%,
75% 74%,
87% 55%,
100% 100%
);

opacity:.8;

}

#mountains-front{

position:absolute;

left:0;
right:0;
bottom:0;

height:230px;

background:#09020f;

clip-path:polygon(
0% 100%,
8% 60%,
18% 80%,
28% 45%,
39% 88%,
55% 36%,
68% 70%,
80% 48%,
90% 75%,
100% 100%
);

}

/* ==========================
RUINS
========================== */

#ruins{

position:absolute;

bottom:130px;
left:50%;

transform:translateX(-50%);

width:520px;
height:100px;

opacity:.18;

background:

repeating-linear-gradient(
90deg,

transparent 0 18px,

#d8c3ff 18px 22px,

transparent 22px 42px

);

}

/* ==========================
UI
========================== */

#ui{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:min(92%,900px);

    text-align:center;

    z-index:100;

}

/* Decorative lines */

#frame-top,
#frame-bottom{

    width:260px;
    height:2px;

    margin:auto;

    background:
    linear-gradient(
        90deg,
        transparent,
        #a77fff,
        transparent
    );

}


#frame-top{

    margin-bottom:34px;

}

#frame-bottom{

    margin-top:30px;

    margin-bottom:34px;

}

/* ==========================
LOGO
========================== */

#logo{

font-family:"Press Start 2P",cursive;

font-size:clamp(34px,7vw,78px);

letter-spacing:.35em;

text-shadow:

0 0 3px #fff,

0 0 8px #9c75ff,

0 0 16px #6b3cff;

animation:logoGlow 5s ease-in-out infinite;

}

/* ==========================
TEXT
========================== */

#subtitle{

font-family:Inter,sans-serif;

font-size:14px;

letter-spacing:.18em;

margin-top:34px;

opacity:.8;

color:#ddd3ff;

}

/* ==========================
BUTTON
========================== */

#enter{

margin-top:50px;

padding:18px 42px;

font-family:"Press Start 2P",cursive;

font-size:12px;

background:#2d1356;

border:2px solid #9369ff;

color:white;

cursor:pointer;

transition:.25s;

}

#enter:hover{

background:#4d28a6;

box-shadow:0 0 18px #8d6fff;

}

/* ==========================
GLYPHS
========================== */

#glyph-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}

.glyph{
    position:absolute;
    font-size:34px;
    color:#d5beff;
    opacity:.22;
    animation:float 8s ease-in-out infinite;
}

#glyph-one{
    top:18%;
    left:18%;
}

#glyph-two{
    top:25%;
    right:15%;
    animation-delay:2s;
}

#glyph-three{
    bottom:15%;
    left:50%;
    animation-delay:4s;
}

/* ==========================
ANIMATIONS
========================== */

@keyframes float{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-16px);

}

}

@keyframes stars{

from{

transform:translateY(0);

}

to{

transform:translateY(-150px);

}

}

@keyframes nebula{

0%{

transform:translate(-5%,-3%);

}

50%{

transform:translate(5%,3%);

}

100%{

transform:translate(-5%,-3%);

}

}

@keyframes logoGlow{

0%,100%{

text-shadow:

0 0 2px white,

0 0 6px #9265ff,

0 0 14px #6138ff;

}

50%{

text-shadow:

0 0 3px white,

0 0 10px #ae8dff,

0 0 18px #6e42ff;

}

}
/* ==========================
CINEMATIC OVERLAY
========================== */

#cinematic-overlay{

    position:fixed;
    inset:0;

    background:#000;

    opacity:1;

    pointer-events:none;

    z-index:9999;

    transition:opacity 2.5s ease;

}

#cinematic-overlay.fade{

    opacity:0;

}
/* ==========================
PORTAL
========================== */

#portal{

    position:absolute;

    left:50%;
    top:50%;

    z-index:50;

    width:320px;
    height:320px;

    transform:translate(-50%,-50%) scale(0);

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(173,110,255,.35),
    transparent 70%);

    filter:blur(40px);

    opacity:0;

    pointer-events:none;

    transition:
        transform 1.6s ease,
        opacity 1.6s ease;

}
#portal.active{

    opacity:1;

    transform:translate(-50%,-50%) scale(2.5);

}
/* ==========================================
   CRYSTALS
========================================== */

#crystal-layer{

    position:absolute;
    inset:0;

    pointer-events:none;

    z-index:8;

}

.crystal{

    position:absolute;

    width:42px;
    height:72px;

    clip-path:polygon(
        50% 0%,
        100% 35%,
        82% 100%,
        18% 100%,
        0% 35%
    );

    overflow:hidden;

    border-radius:2px;

    background:
    linear-gradient(
        115deg,

        rgba(255,255,255,.95) 0%,

        rgba(255,255,255,.55) 12%,

        rgba(210,170,255,.95) 28%,

        rgba(115,65,255,.95) 100%
    );

    box-shadow:

        0 0 10px rgba(200,170,255,.9),

        0 0 30px rgba(120,60,255,.55),

        0 0 70px rgba(90,30,255,.25);

    animation:

        crystalFloat 6s ease-in-out infinite,

        crystalGlow 4s ease-in-out infinite;

}
.crystal::before{

    content:"";

    position:absolute;

    left:6px;
    top:8px;

    width:8px;
    height:52px;

    background:

    linear-gradient(

        to bottom,

        rgba(255,255,255,.95),

        rgba(255,255,255,0)

    );

    transform:rotate(18deg);

    filter:blur(.6px);

    opacity:.9;

}

.crystal::after{

    content:"";

    position:absolute;

    right:0;

    top:0;

    width:45%;

    height:100%;

    background:

    linear-gradient(

        to left,

        rgba(0,0,0,.28),

        transparent

    );

    clip-path:inherit;

}
.crystal1{
  
    left:12%;
    bottom:145px;

    background:linear-gradient(
        180deg,
        #ffffff,
        #d8a8ff,
        #7b43ff
    );

    animation-delay:0s;
}

.crystal2{
    left:28%;
    bottom:170px;

    background:linear-gradient(
        180deg,
        #d9ffff,
        #8ecbff,
        #476bff
    );

    animation-delay:1s;
}

.crystal3{
    left:46%;
    bottom:185px;

    background:linear-gradient(
        180deg,
        #fff5ff,
        #f6b4ff,
        #b24cff
    );

    animation-delay:2s;
}

.crystal4{
    right:34%;
    bottom:165px;

    background:linear-gradient(
        180deg,
        #ffffff,
        #b9e6ff,
        #67c2ff
    );

    animation-delay:3s;
}

.crystal5{
    right:18%;
    bottom:145px;

    background:linear-gradient(
        180deg,
        #ffffff,
        #b9ffef,
        #4dffc9
    );

    animation-delay:4s;
}

.crystal6{
    left:72%;
    bottom:205px;

    width:54px;
    height:92px;

    background:linear-gradient(
        180deg,
        #ffffff,
        #e2b7ff,
        #7440ff
    );

    animation-delay:2.5s;
}

@keyframes crystalFloat{

    0%,100%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes crystalGlow{

    0%,100%{

        filter:
            drop-shadow(0 0 8px #9d7cff)
            drop-shadow(0 0 18px #6d38ff);

    }

    50%{

        filter:
            drop-shadow(0 0 18px #d6c2ff)
            drop-shadow(0 0 42px #8d61ff);

    }

}