/* ==========================================================
   SPACE UI KIT
   TITLE COMPONENT
========================================================== */


/* ==========================================================
   BASE
========================================================== */

.title {

    position: relative;

    color: #e9f7ff;

    font-family:
        Inter,
        system-ui,
        sans-serif;

}


/* ==========================================================
   HEADING RESET
========================================================== */

.title__heading {

    margin: 0;

    font-weight: 900;

    line-height: 1;

    letter-spacing: -.035em;

}


/* ==========================================================
   SUBTITLE
========================================================== */

.title__subtitle {

    margin: 10px 0 0;

    color: #8fa6ba;

    font-size: 14px;

    line-height: 1.5;

}


/* ==========================================================
   EYEBROW
========================================================== */

.title__eyebrow {

    display: block;

    margin-bottom: 12px;

    color: #47ddff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .22em;

    text-transform: uppercase;

}


/* ==========================================================
   HERO
========================================================== */

.title--hero {

    padding:
        36px 42px;

    border-left:
        2px solid #47ddff;

    background:

        linear-gradient(
            90deg,
            rgba(71, 221, 255, .08),
            transparent
        );

}


.title--hero::before {

    content: "";

    position: absolute;

    left: -5px;
    top: 0;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #47ddff;

    box-shadow:
        0 0 12px #47ddff;

}


.title--hero .title__heading {

    font-size:
        clamp(42px, 7vw, 82px);

    text-transform:
        uppercase;

}


.title--hero .title__heading strong {

    display: block;

    color: transparent;

    background:

        linear-gradient(
            90deg,
            #47ddff,
            #8c7cff
        );

    background-clip:
        text;

    -webkit-background-clip:
        text;

}


.title--hero .title__subtitle {

    margin-top: 16px;

    font-size: 16px;

}


/* ==========================================================
   SECTION
========================================================== */

.title--section {

    display: flex;

    align-items: center;

    gap: 18px;

    padding:
        16px 20px;

    border:
        1px solid rgba(88, 177, 219, .15);

    border-radius:
        10px;

    background:
        rgba(9, 20, 37, .65);

}


.title--section .title__index {

    display: flex;

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

    width: 38px;
    height: 38px;

    flex:
        0 0 38px;

    color: #47ddff;

    border:
        1px solid rgba(71, 221, 255, .28);

    border-radius:
        8px;

    background:
        rgba(71, 221, 255, .08);

    font-size: 11px;

    font-weight: 800;

}


.title--section .title__heading {

    font-size: 24px;

}


.title--section .title__subtitle {

    margin-top: 5px;

    font-size: 12px;

}


/* ==========================================================
   MISSION
========================================================== */

.title--mission {

    padding:
        24px 28px;

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

    border-radius:
        12px;

    background:

        linear-gradient(
            135deg,
            rgba(36, 29, 75, .55),
            rgba(8, 16, 31, .75)
        );

}


.title--mission::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 45%;

    height: 2px;

    background:

        linear-gradient(
            90deg,
            #8871ff,
            transparent
        );

}


.title--mission .title__heading {

    font-size:
        clamp(26px, 4vw, 42px);

}


.title--mission .title__subtitle {

    max-width: 480px;

}


/* ==========================================================
   GLOW
========================================================== */

.title--glow {

    padding: 25px;

    text-align: center;

}


.title--glow .title__heading {

    font-size:
        clamp(38px, 6vw, 70px);

    color:
        #d9faff;

    text-shadow:

        0 0 8px rgba(71, 221, 255, .7),
        0 0 28px rgba(71, 221, 255, .35);

}


.title--glow .title__accent {

    display: block;

    margin-top: 4px;

    color: #47ddff;

    font-size:
        clamp(24px, 4vw, 44px);

    font-weight: 900;

    letter-spacing:
        .08em;

    text-shadow:

        0 0 10px rgba(71, 221, 255, .8),
        0 0 35px rgba(71, 221, 255, .35);

}


/* ==========================================================
   OUTLINE
========================================================== */

.title--outline {

    padding: 25px;

    text-align: center;

}


.title--outline .title__heading {

    color: transparent;

    -webkit-text-stroke:
        1px rgba(190, 225, 241, .55);

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

}


.title--outline .title__accent {

    display: block;

    margin-top: -6px;

    color: #47ddff;

    font-size:
        clamp(24px, 4vw, 42px);

    font-weight: 900;

    letter-spacing:
        .12em;

}


/* ==========================================================
   NUMBERED
========================================================== */

.title--numbered {

    display: flex;

    align-items: center;

    gap: 20px;

    padding:
        20px 24px;

    border-bottom:
        1px solid rgba(71, 221, 255, .18);

}


.title--numbered .title__number {

    color:
        rgba(71, 221, 255, .35);

    font-size:
        42px;

    line-height:
        1;

    font-weight:
        900;

}


.title--numbered .title__heading {

    font-size:
        26px;

}


.title--numbered .title__subtitle {

    margin-top: 5px;

    font-size:
        12px;

}


/* ==========================================================
   COMPACT
========================================================== */

.title--compact {

    display: flex;

    align-items: center;

    gap: 14px;

}


.title--compact .title__line {

    width: 45px;
    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #47ddff
        );

}


.title--compact .title__line:last-child {

    background:

        linear-gradient(
            90deg,
            #47ddff,
            transparent
        );

}


.title--compact .title__heading {

    color:
        #b8d7e7;

    font-size:
        13px;

    letter-spacing:
        .16em;

}


/* ==========================================================
   HUD
========================================================== */

.title--hud {

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        10px 14px;

    border:
        1px solid rgba(71, 221, 255, .14);

    background:
        rgba(7, 18, 32, .7);

}


.title--hud .title__status {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #47ddff;

    box-shadow:
        0 0 8px #47ddff;

}


.title--hud .title__heading {

    color:
        #b9d9e8;

    font-size:
        11px;

    letter-spacing:
        .12em;

}


.title--hud .title__code {

    margin-left:
        auto;

    color:
        #547388;

    font-size:
        9px;

    font-family:
        monospace;

    letter-spacing:
        .1em;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 600px) {

    .title--hero {

        padding:
            28px 24px;

    }


    .title--hero .title__heading {

        font-size:
            42px;

    }


    .title--section {

        gap: 12px;

    }


    .title--section .title__heading {

        font-size:
            20px;

    }


    .title--numbered {

        gap: 14px;

    }


    .title--numbered .title__number {

        font-size:
            32px;

    }


    .title--numbered .title__heading {

        font-size:
            21px;

    }

}