/* =========================================================
   ERABYTE HOME HERO
   ---------------------------------------------------------
   ONLY:

   - Eye placement
   - Eye size
   - ERABYTE placement
   - ERABYTE white boot glow
   - subtle divider below ERABYTE

   NO HEADER
   NO NEXT SECTION
   ========================================================= */


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

.eb-home-hero {

    --eb-wordmark-bottom:
        clamp(
            52px,
            7svh,
            82px
        );

    --eb-wordmark-font-size:
        clamp(
            3.2rem,
            8.4vw,
            6.6rem
        );

    --eb-wordmark-divider-offset:
        clamp(
            18px,
            2.2svh,
            24px
        );


    position:
        relative !important;


    width:
        100% !important;

    max-width:
        none !important;


    height:
        100vh !important;

    height:
        100svh !important;

    height:
        100dvh !important;


    min-height:
        100vh !important;

    min-height:
        100svh !important;

    min-height:
        100dvh !important;


    margin:
        0 !important;


    padding:
        0 !important;


    box-sizing:
        border-box !important;


    overflow:
        hidden !important;


    gap:
        0 !important;


    --gap:
        0px !important;
}


/* =========================================================
   ELEMENTOR INNER
   ========================================================= */

.eb-home-hero
> .e-con-inner {

    position:
        static !important;


    width:
        100% !important;

    max-width:
        none !important;


    height:
        100% !important;


    margin:
        0 !important;


    padding:
        0 !important;


    overflow:
        visible !important;
}


/* =========================================================
   EYE POSITION
   ========================================================= */

.eb-home-hero
.eb-home-eye-slot {

    position:
        absolute !important;


    top:
        43.5% !important;


    left:
        50% !important;


    width:
        100% !important;


    max-width:
        none !important;


    margin:
        0 !important;


    padding:
        0 !important;


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


    overflow:
        visible !important;


    z-index:
        10 !important;
}


.eb-home-hero
.eb-home-eye-slot
> .elementor-widget-container {

    width:
        100% !important;


    margin:
        0 !important;


    padding:
        0 !important;


    overflow:
        visible !important;
}


.eb-home-hero
.eb-home-eye-slot
.elementor-shortcode {

    width:
        100% !important;


    overflow:
        visible !important;
}


/* =========================================================
   EYE SIZE
   ========================================================= */

.eb-home-hero
.eb-home-eye-slot
.ebe-eye__rig3d {

    width:
        min(
            75.6vw,
            972px
        ) !important;


    margin-inline:
        auto !important;
}


/* =========================================================
   WORDMARK ELEMENTOR SLOT
   ========================================================= */

.eb-home-hero
.eb-home-wordmark-slot {

    position:
        absolute !important;


    left:
        0 !important;


    right:
        0 !important;


    bottom:
        var(
            --eb-wordmark-bottom
        ) !important;


    width:
        100% !important;


    max-width:
        none !important;


    height:
        18svh !important;


    min-height:
        135px !important;


    margin:
        0 !important;


    padding:
        0 !important;


    overflow:
        visible !important;


    transform:
        none !important;


    z-index:
        20 !important;
}


.eb-home-hero
.eb-home-wordmark-slot
> .elementor-widget-container {

    width:
        100% !important;


    height:
        100% !important;


    margin:
        0 !important;


    padding:
        0 !important;


    overflow:
        visible !important;
}


.eb-home-hero
.eb-home-wordmark-slot
.elementor-shortcode {

    width:
        100% !important;


    height:
        100% !important;


    overflow:
        visible !important;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.eb-sr-only {

    position:
        absolute !important;


    width:
        1px !important;


    height:
        1px !important;


    padding:
        0 !important;


    margin:
        -1px !important;


    overflow:
        hidden !important;


    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;


    clip-path:
        inset(
            50%
        ) !important;


    white-space:
        nowrap !important;


    border:
        0 !important;
}


/* =========================================================
   WORDMARK STAGE
   ========================================================= */

.eb-wordmark-stage {

    position:
        relative;


    width:
        100%;


    height:
        100%;


    display:
        flex;


    align-items:
        flex-end;


    justify-content:
        center;


    margin:
        0;


    padding:
        0;


    box-sizing:
        border-box;


    overflow:
        visible;


    pointer-events:
        none;


    /* =====================================================
       LIVE BOOT VALUES
       ===================================================== */

    --eb-text-opacity:
        0;


    --eb-glow-alpha:
        0;


    --eb-glow-inner:
        0px;


    --eb-glow-mid:
        0px;


    --eb-glow-outer:
        0px;


    --eb-divider-opacity:
        0;
}


/* =========================================================
   ERABYTE WORDMARK
   ========================================================= */

.eb-wordmark {

    position:
        relative;


    width:
        100%;


    display:
        flex;


    align-items:
        flex-end;


    /*
     * EDGE | E | R | A | B | Y | T | E | EDGE
     */

    justify-content:
        space-evenly;


    margin:
        0;


    padding:
        0.30em
        0
        0
        0;


    box-sizing:
        border-box;


    overflow:
        visible;


    font-family:
        "Elnath",
        sans-serif;


    font-size:
        var(
            --eb-wordmark-font-size
        );


    font-weight:
        400;


    line-height:
        1.16;


    color:
        #FFFFFF;
}


/* =========================================================
   LETTERS
   ========================================================= */

.eb-wordmark
> span {

    display:
        block;


    flex:
        0
        0
        auto;


    margin:
        0;


    padding:
        0;


    line-height:
        inherit;


    color:
        #FFFFFF;


    /*
     * Completely hidden until final Eye activation.
     */

    opacity:
        var(
            --eb-text-opacity
        );


    /*
     * Pure white boot glow.
     */

    text-shadow:

        0
        0
        var(
            --eb-glow-inner
        )
        rgba(
            255,
            255,
            255,
            var(
                --eb-glow-alpha
            )
        ),

        0
        0
        var(
            --eb-glow-mid
        )
        rgba(
            255,
            255,
            255,
            calc(
                var(
                    --eb-glow-alpha
                )
                *
                0.52
            )
        ),

        0
        0
        var(
            --eb-glow-outer
        )
        rgba(
            255,
            255,
            255,
            calc(
                var(
                    --eb-glow-alpha
                )
                *
                0.20
            )
        );


    will-change:
        opacity,
        text-shadow;
}


/* =========================================================
   DIVIDER BELOW ERABYTE
   ========================================================= */

.eb-wordmark-divider {

    position:
        absolute;


    left:
        0;


    right:
        0;


    bottom:
        calc(
            var(
                --eb-wordmark-divider-offset
            )
            *
            -1
        );


    width:
        100%;


    height:
        1px;


    margin:
        0;


    padding:
        0;


    opacity:
        var(
            --eb-divider-opacity
        );


    background:
        linear-gradient(
            90deg,

            transparent
            0%,

            rgba(
                255,
                255,
                255,
                0.018
            )
            5%,

            rgba(
                255,
                255,
                255,
                0.085
            )
            12%,

            rgba(
                255,
                255,
                255,
                0.085
            )
            88%,

            rgba(
                255,
                255,
                255,
                0.018
            )
            95%,

            transparent
            100%
        );


    pointer-events:
        none;


    transition:
        opacity
        260ms
        ease;
}


/* =========================================================
   FINAL STABLE STATE
   ========================================================= */

.eb-wordmark-stage.is-stable {

    --eb-text-opacity:
        1;


    --eb-glow-alpha:
        0;


    --eb-glow-inner:
        0px;


    --eb-glow-mid:
        0px;


    --eb-glow-outer:
        0px;


    --eb-divider-opacity:
        1;
}


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

@media (
    max-width:
    1024px
) {

    .eb-home-hero {

        --eb-wordmark-bottom:
            clamp(
                44px,
                6svh,
                68px
            );


        --eb-wordmark-font-size:
            clamp(
                3rem,
                8.4vw,
                6.2rem
            );


        --eb-wordmark-divider-offset:
            clamp(
                16px,
                2svh,
                21px
            );
    }

}


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

@media (
    max-width:
    767px
) {

    .eb-home-hero {

        --eb-wordmark-bottom:
            clamp(
                34px,
                5svh,
                52px
            );


        --eb-wordmark-font-size:
            clamp(
                2.35rem,
                9.5vw,
                5rem
            );


        --eb-wordmark-divider-offset:
            15px;
    }


    .eb-home-hero
    .eb-home-eye-slot {

        top:
            42.5% !important;
    }


    .eb-home-hero
    .eb-home-eye-slot
    .ebe-eye__rig3d {

        width:
            min(
                84.6vw,
                972px
            ) !important;
    }


    .eb-home-hero
    .eb-home-wordmark-slot {

        height:
            17svh !important;


        min-height:
            100px !important;
    }

}


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

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

    .eb-wordmark-stage {

        --eb-text-opacity:
            1 !important;


        --eb-glow-alpha:
            0 !important;


        --eb-glow-inner:
            0px !important;


        --eb-glow-mid:
            0px !important;


        --eb-glow-outer:
            0px !important;


        --eb-divider-opacity:
            1 !important;
    }

}