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

.Title-Container {

    position: absolute;

    top: 15%;

    left: 50%;

    transform: translateX(-50%);

    font-family:
        'Arial Black',
        Impact,
        sans-serif;

    width: max-content;

    max-width: 90vw;

}


#Title {

    position: relative;

    display: inline-block;

    margin: 0;

    font-size:
        clamp(
            2rem,
            8vw,
            5rem
        );

    font-weight: 900;

    color: white;

    letter-spacing: 2px;

    white-space: nowrap;


    text-shadow:

        /* Black border */

        3px 3px 0 #000,

        -3px -3px 0 #000,

        3px -3px 0 #000,

        -3px 3px 0 #000,


        /* Soft red glow */

        0 0 8px #ff0033,

        0 0 16px #ff0033,

        0 0 30px
        rgba(
            255,
            0,
            51,
            0.8
        ),


        /* 3D shadow */

        6px 6px 0 #990020;

}


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

#Title-Floater {

    position: absolute;

    top: -0.45em;

    right: -0.25em;

    font-size: 0.35em;

    white-space: nowrap;

    font-weight: 900;


    background: linear-gradient(

        180deg,

        #ffffff 0%,

        #fff7c2 30%,

        #ffd9006b 65%,

        #ffbb00 100%

    );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;


    text-shadow:

        1px 1px 0 #7a5200,

        -1px -1px 0 #ffffff,

        0 0 4px
        rgba(
            255,
            255,
            255,
            0.7
        ),

        0 0 8px
        rgba(
            255,
            215,
            0,
            0.8
        ),

        0 0 16px
        rgba(
            255,
            180,
            0,
            0.5
        ),

        3px 3px 0 #9c6b00,

        4px 5px 6px
        rgba(
            0,
            0,
            0,
            0.7
        );

}


#Title-Floater {

    overflow: hidden;

    isolation: isolate;

}


#Title-Floater::after {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 60%;

    height: 100%;


    background:

        linear-gradient(

            120deg,

            transparent 35%,

            rgba(
                255,
                255,
                255,
                0.9
            ) 50%,

            transparent 65%

        ),

        linear-gradient(

            180deg,

            #ffffff 0%,

            #fff7c2 30%,

            #ffd700 65%,

            #ffbb00 100%

        );


    background-size:

        200% 100%,
        100% 100%;


    background-position:

        -150% 0,
        0 0;


    background-repeat: no-repeat;


    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;


    animation:
        shine 4s infinite;

    pointer-events: none;

    mix-blend-mode: screen;

}


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

.gold-text {

    position: relative;

    display: inline-block;

}


.gold-text::after {

    content: "Free";

    position: absolute;

    inset: 0;


    background: linear-gradient(

        120deg,

        transparent 35%,

        rgba(
            255,
            255,
            255,
            0.9
        ) 50%,

        transparent 65%

    );


    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;


    animation:
        shine 4s infinite;

}


/* ==========================
   SHINE ANIMATION
========================== */

@keyframes shine {

    0% {

        background-position:
            -150% 0,
            0 0;

    }

    40%,
    100% {

        background-position:
            150% 0,
            0 0;

    }

}