/* =====================================================
   BIFF3EN HOME HERO READABILITY V2
   ===================================================== */

body.b3-home-brand-v2 #home,
#home {
    position: relative !important;
    isolation: isolate !important;
}


/* DARKER LEFT SIDE */

body.b3-home-brand-v2 #home::after,
#home::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(2, 0, 6, .97) 0%,
            rgba(4, 1, 9, .94) 28%,
            rgba(7, 2, 13, .78) 48%,
            rgba(7, 2, 13, .34) 68%,
            rgba(7, 2, 13, .08) 100%
        ) !important;
}


/* CONTENT ABOVE IMAGE */

body.b3-home-brand-v2 #home .hero-content,
body.b3-home-brand-v2 #home .content,
#home .hero-content,
#home .content {
    position: relative !important;
    z-index: 6 !important;
}


/* STRONGER GLASS PANEL */

#home .hero-content,
#home .content {
    width: min(560px, calc(100% - 40px)) !important;

    padding:
        30px 32px
        32px !important;

    border:
        1px solid rgba(229, 181, 255, .38) !important;

    border-radius:
        24px !important;

    background:
        linear-gradient(
            145deg,
            rgba(4, 1, 8, .96),
            rgba(10, 3, 17, .90)
        ) !important;

    box-shadow:
        0 26px 80px rgba(0,0,0,.58),
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 70px rgba(157, 53, 255, .15)
        !important;

    backdrop-filter:
        blur(12px) !important;

    -webkit-backdrop-filter:
        blur(12px) !important;
}


/* EYEBROW */

#home .eyebrow,
#home [class*="eyebrow"] {
    color:
        #f6dcff !important;

    opacity:
        1 !important;

    font-weight:
        900 !important;

    text-shadow:
        0 2px 8px #000,
        0 0 18px rgba(176, 70, 255, .35)
        !important;
}


/* HEADLINES */

#home h1,
#home h2 {
    color:
        #ffffff !important;

    opacity:
        1 !important;

    font-weight:
        900 !important;

    text-shadow:
        0 3px 6px rgba(0,0,0,.95),
        0 8px 28px rgba(0,0,0,.85)
        !important;
}


/* DESCRIPTION */

#home p {
    max-width:
        520px !important;

    margin-top:
        16px !important;

    color:
        #f4eef8 !important;

    opacity:
        1 !important;

    font-size:
        1.08rem !important;

    font-weight:
        600 !important;

    line-height:
        1.7 !important;

    text-shadow:
        0 2px 4px rgba(0,0,0,1),
        0 4px 14px rgba(0,0,0,.95)
        !important;
}


/* BUTTONS */

#home a,
#home button {
    position:
        relative !important;

    z-index:
        8 !important;

    font-weight:
        900 !important;
}


#home a[href*="live"],
#home a[href*="stream"],
#home .primary,
#home [class*="primary"] {
    background:
        linear-gradient(
            135deg,
            #bd48ff,
            #8e3cff
        ) !important;

    color:
        #ffffff !important;

    border:
        1px solid rgba(255,255,255,.26)
        !important;

    box-shadow:
        0 12px 34px rgba(145, 56, 255, .38),
        0 3px 10px rgba(0,0,0,.42)
        !important;
}


#home a[href*="arcade"] {
    background:
        rgba(7, 2, 13, .94) !important;

    color:
        #ffffff !important;

    border:
        1px solid rgba(230, 184, 255, .42)
        !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.42)
        !important;
}


#home a:hover,
#home button:hover {
    transform:
        translateY(-2px) !important;
}


/* MOBILE */

@media (max-width: 760px) {

    body.b3-home-brand-v2 #home::after,
    #home::after {
        background:
            linear-gradient(
                180deg,
                rgba(3, 1, 7, .72) 0%,
                rgba(4, 1, 9, .90) 44%,
                rgba(4, 1, 9, .98) 100%
            ) !important;
    }


    #home .hero-content,
    #home .content {
        width:
            calc(100% - 24px) !important;

        margin:
            0 auto !important;

        padding:
            24px 20px
            26px !important;

        background:
            rgba(4, 1, 9, .96) !important;

        backdrop-filter:
            blur(10px) !important;

        -webkit-backdrop-filter:
            blur(10px) !important;
    }


    #home p {
        font-size:
            1rem !important;

        line-height:
            1.6 !important;
    }
}