/* ============================================================
   THE MIND LUMEN
   WELCOME EXPERIENCE
   PREMIUM / MOBILE FIRST
============================================================ */


/* ============================================================
   VARIABLES
============================================================ */

:root {

    --welcome-bg:
        #02040a;

    --welcome-text:
        #f4f1f6;

    --welcome-soft:
        rgba(
            229,
            223,
            234,
            .60
        );

    --welcome-accent:
        #ae90d6;

    --welcome-accent-soft:
        rgba(
            174,
            144,
            214,
            .16
        );

    --welcome-border:
        rgba(
            255,
            255,
            255,
            .08
        );
}


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

.welcome-section {

    position: relative;

    width: 100%;

    min-height:
        clamp(
            28rem,
            72dvh,
            42rem
        );

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding:
        3.5rem
        1rem
        4rem;

    background:
        var(--welcome-bg);
}


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

.welcome-section
.background-glow {

    position: absolute;

    top: 50%;

    left: 50%;

    width:
        clamp(
            22rem,
            80vw,
            50rem
        );

    aspect-ratio:
        1;

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

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                122,
                80,
                255,
                .16
            )
            0%,

            rgba(
                98,
                65,
                165,
                .08
            )
            34%,

            rgba(
                54,
                34,
                88,
                .025
            )
            52%,

            transparent
            72%
        );

    filter:
        blur(
            clamp(
                3rem,
                8vw,
                5.5rem
            )
        );

    pointer-events:
        none;

    z-index: 0;

    animation:
        welcomeGlowMove
        10s
        ease-in-out
        infinite;
}


/* ============================================================
   CONTAINER
============================================================ */

.welcome-section
.container {

    position: relative;

    z-index: 2;

    width: min(
        100%,
        42rem
    );

    margin:
        0
        auto;

    padding: 0;

    text-align:
        center;
}


/* ============================================================
   HALO
============================================================ */

.welcome-section
.halo {

    position: relative;

    width:
        clamp(
            8.75rem,
            38vw,
            13.75rem
        );

    aspect-ratio:
        1;

    height: auto;

    margin:
        0
        auto;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* ============================================================
   HALO RING
============================================================ */

.welcome-section
.halo-ring {

    position: absolute;

    inset: 0;

    border-radius:
        50%;

    border:
        .0625rem solid
        rgba(
            190,
            164,
            255,
            .28
        );

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                .015
            )
            0%,

            rgba(
                120,
                80,
                210,
                .045
            )
            48%,

            transparent
            72%
        );

    box-shadow:

        0
        0
        1.75rem
        rgba(
            174,
            144,
            214,
            .18
        ),

        0
        0
        4rem
        rgba(
            155,
            118,
            220,
            .12
        ),

        inset
        0
        0
        1.75rem
        rgba(
            255,
            255,
            255,
            .018
        );

    animation:
        welcomeHaloPulse
        5s
        ease-in-out
        infinite;
}


/* ============================================================
   HALO CORE
============================================================ */

.welcome-section
.halo-core {

    position: relative;

    z-index: 2;

    width:
        clamp(
            1rem,
            5vw,
            1.75rem
        );

    aspect-ratio:
        1;

    height: auto;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:

        0
        0
        1rem
        rgba(
            255,
            255,
            255,
            .92
        ),

        0
        0
        2.6rem
        rgba(
            184,
            162,
            255,
            .72
        ),

        0
        0
        4rem
        rgba(
            142,
            104,
            220,
            .25
        );

    animation:
        welcomeCorePulse
        2.8s
        ease-in-out
        infinite;
}


/* ============================================================
   TITLE
============================================================ */

.welcome-section
#title {

    margin:
        2.3rem
        0
        0;

    padding: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            2.15rem,
            10vw,
            3.8rem
        );

    font-weight:
        300;

    line-height:
        1.02;

    letter-spacing:
        .055em;

    color:
        var(--welcome-text);

    text-shadow:
        0
        0
        2rem
        rgba(
            255,
            255,
            255,
            .025
        );
}


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

.welcome-section
#subtitle {

    width: min(
        100%,
        30rem
    );

    margin:
        1rem
        auto
        0;

    padding: 0;

    color:
        var(--welcome-soft);

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:
        clamp(
            .82rem,
            3.5vw,
            .98rem
        );

    font-weight:
        300;

    line-height:
        1.65;

    letter-spacing:
        .015em;
}


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

.welcome-section
#startButton {

    width: min(
        100%,
        18rem
    );

    min-height:
        2.8rem;

    margin-top:
        1.9rem;

    padding:
        0
        1.25rem;

    display: none;

    align-items: center;

    justify-content: center;

    border:
        .0625rem solid
        rgba(
            255,
            255,
            255,
            .14
        );

    border-radius:
        999rem;

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

    color:
        #f2edf5;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:
        .75rem;

    font-weight:
        500;

    letter-spacing:
        .045em;

    cursor:
        pointer;

    transition:
        transform .28s ease,
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}


.welcome-section
#startButton:hover {

    transform:
        translateY(
            -.1rem
        );

    background:
        rgba(
            174,
            144,
            214,
            .08
        );

    border-color:
        rgba(
            184,
            156,
            220,
            .24
        );

    box-shadow:
        0
        .8rem
        2rem
        rgba(
            0,
            0,
            0,
            .18
        );
}


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

@keyframes welcomeHaloPulse {

    0% {

        transform:
            scale(
                .975
            );

        opacity:
            .48;
    }


    50% {

        transform:
            scale(
                1.035
            );

        opacity:
            1;
    }


    100% {

        transform:
            scale(
                .975
            );

        opacity:
            .48;
    }

}


@keyframes welcomeCorePulse {

    0% {

        transform:
            scale(
                .84
            );
    }


    50% {

        transform:
            scale(
                1.18
            );
    }


    100% {

        transform:
            scale(
                .84
            );
    }

}


@keyframes welcomeGlowMove {

    0% {

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


    50% {

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


    100% {

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

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (
    max-width:
    24.375rem
) {

    .welcome-section {

        min-height:
            27rem;

        padding:
            3rem
            .85rem
            3.4rem;
    }


    .welcome-section
    .background-glow {

        width:
            24rem;
    }


    .welcome-section
    .halo {

        width:
            8.8rem;
    }


    .welcome-section
    #title {

        margin-top:
            1.9rem;
    }


    .welcome-section
    #subtitle {

        width:
            min(
                100%,
                19rem
            );
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (
    min-width:
    48rem
) {

    .welcome-section {

        min-height:
            38rem;

        padding:
            5.4rem
            1.8rem
            6rem;
    }


    .welcome-section
    .background-glow {

        width:
            42rem;
    }


    .welcome-section
    .halo {

        width:
            12.5rem;
    }


    .welcome-section
    #title {

        margin-top:
            2.6rem;
    }


    .welcome-section
    #subtitle {

        width:
            min(
                100%,
                32rem
            );
    }


    .welcome-section
    #startButton {

        width: auto;

        min-width:
            14rem;
    }

}


/* ============================================================
   DESKTOP
============================================================ */

@media (
    min-width:
    68.75rem
) {

    .welcome-section {

        min-height:
            42rem;

        padding:
            6.5rem
            2.5rem
            7rem;
    }


    .welcome-section
    .background-glow {

        width:
            50rem;
    }


    .welcome-section
    .halo {

        width:
            13.75rem;
    }


    .welcome-section
    #title {

        margin-top:
            2.85rem;
    }

}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (
    min-width:
    90rem
) {

    .welcome-section {

        min-height:
            45rem;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (
    prefers-reduced-motion:
    reduce
) {

    .welcome-section
    .background-glow,

    .welcome-section
    .halo-ring,

    .welcome-section
    .halo-core {

        animation:
            none !important;
    }

}