html,
body {
    width: 100%;
    height: 100%;
    margin: 0;

    overflow: hidden;

    background: #020406;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* ========================================
   TextAlive
======================================== */

#media {
    display: none;
}


/* ========================================
   Loading Status
======================================== */

#status {
    position: fixed;

    left: 50%;
    top: 50%;

    z-index: 50;

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

    color:
        rgba(255, 255, 255, 0.75);

    font-size: 12px;

    letter-spacing: 0.32em;

    pointer-events: none;

    display: none;
}


/* ========================================
   Opening Root
======================================== */

#opening-root {
    position: fixed;

    inset: 0;

    z-index: 10000;

    pointer-events: auto;

    color: #ffffff;
}


/* ========================================
   Opening Screen
======================================== */

.opening-screen {
    position: absolute;

    inset: 0;

    display: flex;

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 68%,
            rgba(
                50,
                110,
                130,
                0.12
            ),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #020406 0%,
            #03070c 52%,
            #010204 100%
        );

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


.opening-screen.is-active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* ========================================
   Opening Inner
======================================== */

.opening-inner {
    width:
        min(
            760px,
            calc(100vw - 48px)
        );

    text-align: center;

    padding:
        48px 32px;

    box-sizing: border-box;
}


/* ========================================
   Label
======================================== */

.opening-label {
    margin-bottom: 24px;

    font-size: 13px;

    line-height: 1.8;

    letter-spacing: 0.08em;

    color:
        rgba(
            230,
            250,
            255,
            0.62
        );
}


/* ========================================
   Title
======================================== */

.opening-title {
    margin:
        0 0 42px;

    font-size:
        clamp(
            32px,
            5vw,
            60px
        );

    font-weight: 500;

    letter-spacing: 0.18em;

    text-indent: 0.18em;

    color:
        rgba(
            245,
            252,
            255,
            0.96
        );

    text-shadow:
        0 0 18px
        rgba(
            120,
            220,
            255,
            0.14
        ),
        0 0 48px
        rgba(
            60,
            160,
            255,
            0.08
        );
}


/* ========================================
   Credits
======================================== */

.opening-credits {
    margin:
        0 auto 48px;

    max-width: 580px;

    color:
        rgba(
            230,
            245,
            255,
            0.72
        );

    font-size: 13px;

    line-height: 1.9;
}


.opening-credits p {
    margin: 6px 0;
}


.opening-credits span {
    display: inline-block;

    min-width: 150px;

    color:
        rgba(
            160,
            210,
            230,
            0.62
        );

    font-size: 11px;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* ========================================
   Intro
======================================== */

.opening-heading {
    margin:
        0 0 34px;

    font-size: 24px;

    font-weight: 400;

    letter-spacing: 0.14em;

    text-indent: 0.14em;

    color:
        rgba(
            245,
            252,
            255,
            0.92
        );
}


.opening-intro p {
    margin: 18px auto;

    max-width: 560px;

    color:
        rgba(
            230,
            245,
            255,
            0.78
        );

    font-size: 15px;

    line-height: 2;

    letter-spacing: 0.05em;
}


/* ========================================
   Button
======================================== */

.opening-button {
    appearance: none;

    border:
        1px solid
        rgba(
            220,
            250,
            255,
            0.42
        );

    border-radius: 999px;

    padding:
        13px 30px;

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

    color:
        rgba(
            245,
            252,
            255,
            0.9
        );

    font-size: 13px;

    letter-spacing: 0.12em;

    cursor: pointer;

    backdrop-filter: blur(8px);

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        color 0.25s ease;
}


.opening-button:hover {
    background:
        rgba(
            160,
            230,
            255,
            0.12
        );

    border-color:
        rgba(
            220,
            250,
            255,
            0.78
        );

    color: #ffffff;

    transform:
        translateY(-1px);
}


.opening-button:active {
    transform:
        translateY(1px);
}