html,
body{

    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;

    background:black;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:white;
}

body{

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;
}

.video-layer{

    position:fixed;

    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    z-index:0;
}

.orbital-video{

    width:100vw;
    height:100vh;

    object-fit:cover;

    opacity:0.72;

    filter:
        brightness(0.9)
        contrast(1.05)
        saturate(1.1);
}

.content{

    position:relative;

    z-index:10;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:28px;

    text-align:center;
}

.content h1{

    margin:0;

    font-size:clamp(
        52px,
        7vw,
        120px
    );

    font-weight:900;

    letter-spacing:4px;

    color:white;

    text-shadow:
        0 0 20px rgba(255,255,255,0.08);
}

.subline{

    font-size:clamp(
        12px,
        1.1vw,
        20px
    );

    letter-spacing:10px;

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );
}

.enter-button{

    margin-top:10px;

    padding:
        18px
        70px;

    border-radius:999px;

    border:1px solid
        rgba(
            120,
            160,
            255,
            0.22
        );

    background:
        rgba(
            0,
            0,
            0,
            0.45
        );

    backdrop-filter:blur(10px);

    color:white;

    font-size:22px;
    font-weight:700;
    letter-spacing:6px;

    cursor:pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border 0.25s ease;
}

.enter-button:hover{

    transform:
        translateY(-3px)
        scale(1.03);

    border:1px solid
        rgba(
            120,
            160,
            255,
            0.55
        );

    box-shadow:
        0 0 35px
        rgba(
            90,
            140,
            255,
            0.25
        );
}

body.transition-out{

    animation:
        fadeOut 1.2s ease forwards;
}

body.transition-out .content{

    transform:scale(1.08);

    opacity:0;

    transition:
        transform 1.2s ease,
        opacity 1.2s ease;
}

body.transition-out .orbital-video{

    transform:scale(1.15);

    opacity:0;

    transition:
        transform 1.2s ease,
        opacity 1.2s ease;
}

@keyframes fadeOut{

    from{

        background:black;
    }

    to{

        background:black;
    }
}