/* =========================================================
   ERABYTE – HOME PROJECT CTA V2
   ---------------------------------------------------------
   - clean
   - monochrome
   - no CTA glitch
   - no cyan
   - subtle title reveal glitch only
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

.eb-home-cta-v2 {

    --eb-cta-v2-white:
        rgba(255, 255, 255, 0.96);

    --eb-cta-v2-link:
        rgba(255, 255, 255, 0.72);

    --eb-cta-v2-muted:
        rgba(255, 255, 255, 0.38);

    --eb-cta-v2-line:
        rgba(255, 255, 255, 0.25);


    position:
        relative !important;

    width:
        100vw !important;

    max-width:
        none !important;

    margin-left:
        calc(50% - 50vw) !important;

    margin-right:
        calc(50% - 50vw) !important;

    min-height:
        clamp(
            460px,
            58svh,
            620px
        ) !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        clamp(
            70px,
            7vw,
            110px
        )
        clamp(
            24px,
            5vw,
            80px
        ) !important;

    box-sizing:
        border-box !important;

    background:
        transparent !important;

    overflow:
        hidden !important;
}


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

.eb-home-cta-v2__inner {

    position:
        relative;

    width:
        min(
            1200px,
            100%
        );

    margin:
        0 auto;

    padding:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    opacity:
        0;

    transform:
        translateY(14px);

    transition:

        opacity
        650ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        ),

        transform
        760ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );
}


.eb-home-cta-v2.is-visible
.eb-home-cta-v2__inner {

    opacity:
        1;

    transform:
        translateY(0);
}


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

.eb-home-cta-v2__eyebrow {

    margin:
        0
        0
        clamp(
            27px,
            3vw,
            40px
        ) !important;

    padding:
        0 !important;

    color:
        var(--eb-cta-v2-muted) !important;

    font-family:
        "Saira",
        system-ui,
        sans-serif !important;

    font-size:
        clamp(
            0.72rem,
            0.74vw,
            0.82rem
        ) !important;

    font-style:
        normal !important;

    font-weight:
        500 !important;

    line-height:
        1 !important;

    letter-spacing:
        0.19em !important;

    text-transform:
        uppercase !important;

    text-align:
        center !important;
}


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

.eb-home-cta-v2__title {

    position:
        relative !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        0.07em !important;

    color:
        var(--eb-cta-v2-white) !important;

    font-family:
        "Saira",
        system-ui,
        sans-serif !important;

    font-size:
        clamp(
            3rem,
            5.1vw,
            5.5rem
        ) !important;

    font-style:
        normal !important;

    font-weight:
        500 !important;

    line-height:
        0.98 !important;

    letter-spacing:
        -0.035em !important;

    text-transform:
        uppercase !important;

    text-align:
        center !important;

    text-shadow:
        none !important;

    filter:
        none;

    transform:
        none;

    isolation:
        isolate;
}


/* Remove old pseudo-text copies */

.eb-home-cta-v2__title::before,
.eb-home-cta-v2__title::after,
.eb-home-cta-v2__title span::before,
.eb-home-cta-v2__title span::after {

    content:
        none !important;

    display:
        none !important;
}


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

.eb-home-cta-v2__title > span {

    position:
        relative !important;

    display:
        block !important;

    width:
        fit-content !important;

    margin:
        0 !important;

    padding:
        0 !important;

    line-height:
        inherit !important;

    white-space:
        nowrap !important;

    transform:
        none !important;
}


/* =========================================================
   SUBTLE ONE-TIME TITLE GLITCH
   ========================================================= */

.eb-home-cta-v2.is-glitching
.eb-home-cta-v2__title {

    animation:
        eb-home-cta-v2-title-glitch
        260ms
        steps(1, end)
        1;
}


@keyframes eb-home-cta-v2-title-glitch {

    0% {
        transform: translateX(0);
        filter: brightness(1);
        text-shadow: none;
    }

    14% {
        transform: translateX(-1px);
        filter: brightness(1.08);

        text-shadow:
            1px 0 0
            rgba(255, 255, 255, 0.16);
    }

    27% {
        transform: translateX(0);
        filter: brightness(1);
        text-shadow: none;
    }

    43% {
        transform: translateX(1px);
        filter: brightness(1.05);

        text-shadow:
            -1px 0 0
            rgba(255, 255, 255, 0.12);
    }

    58% {
        transform: translateX(0);
        filter: brightness(1);
        text-shadow: none;
    }

    73% {
        transform: translateX(-0.5px);
        filter: brightness(1.04);

        text-shadow:
            0 0 6px
            rgba(255, 255, 255, 0.08);
    }

    100% {
        transform: translateX(0);
        filter: brightness(1);
        text-shadow: none;
    }
}


/* =========================================================
   CTA LINK
   ========================================================= */

.eb-home-cta-v2__action {

    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;


    /*
     * Slightly more distance than before.
     */
    gap:
        5px !important;


    margin:
        clamp(
            42px,
            4.5vw,
            62px
        )
        0
        0 !important;


    padding:
        3px
        2px !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        var(--eb-cta-v2-link) !important;

    font-family:
        "Saira",
        system-ui,
        sans-serif !important;

    font-size:
        clamp(
            0.86rem,
            0.88vw,
            0.96rem
        ) !important;

    font-style:
        normal !important;

    font-weight:
        500 !important;

    line-height:
        1 !important;

    letter-spacing:
        0.17em !important;

    text-transform:
        uppercase !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;

    transform:
        none !important;

    transition:

        color
        180ms
        ease,

        text-shadow
        220ms
        ease !important;
}


/* =========================================================
   FORCE WHITE HOVER
   ========================================================= */

.eb-home-cta-v2
.eb-home-cta-v2__action:hover,

.eb-home-cta-v2
.eb-home-cta-v2__action:focus,

.eb-home-cta-v2
.eb-home-cta-v2__action:focus-visible,

.eb-home-cta-v2
.eb-home-cta-v2__action:active {

    color:
        #FFFFFF !important;
}


/* =========================================================
   ACTION TEXT
   ========================================================= */

.eb-home-cta-v2__action-text {

    position:
        relative;

    display:
        block;

    margin:
        0;

    padding:
        0;

    color:
        inherit !important;

    transform:
        none !important;

    opacity:
        1 !important;
}


/*
 * Explicitly remove any old pseudo glitch copies.
 */

.eb-home-cta-v2__action-text::before,
.eb-home-cta-v2__action-text::after {

    content:
        none !important;

    display:
        none !important;
}


/* =========================================================
   UNDERLINE
   ========================================================= */

.eb-home-cta-v2__action-line {

    display:
        block;

    width:
        68%;

    height:
        1px;

    margin:
        0;

    background:
        var(--eb-cta-v2-line);

    box-shadow:
        none;

    transition:

        width
        260ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        ),

        background
        180ms
        ease,

        box-shadow
        180ms
        ease;
}


/* =========================================================
   CTA HOVER
   ========================================================= */

.eb-home-cta-v2__action:hover,
.eb-home-cta-v2__action:focus-visible {

    color:
        #FFFFFF !important;

    text-shadow:

        0
        0
        7px
        rgba(
            255,
            255,
            255,
            0.11
        ) !important;
}


/* underline only */

.eb-home-cta-v2__action:hover
.eb-home-cta-v2__action-line,

.eb-home-cta-v2__action:focus-visible
.eb-home-cta-v2__action-line {

    width:
        100%;

    background:
        rgba(
            255,
            255,
            255,
            0.54
        );

    box-shadow:

        0
        0
        8px
        rgba(
            255,
            255,
            255,
            0.07
        );
}


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

@media (
    max-width:
    900px
) {

    .eb-home-cta-v2 {

        min-height:
            clamp(
                450px,
                56svh,
                580px
            ) !important;
    }


    .eb-home-cta-v2__title {

        font-size:
            clamp(
                2.7rem,
                7vw,
                4.7rem
            ) !important;
    }

}


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

@media (
    max-width:
    560px
) {

    .eb-home-cta-v2 {

        min-height:
            470px !important;

        padding:
            66px
            20px !important;
    }


    .eb-home-cta-v2__eyebrow {

        margin-bottom:
            23px !important;

        font-size:
            0.68rem !important;
    }


    .eb-home-cta-v2__title {

        font-size:
            clamp(
                2.15rem,
                10.5vw,
                3.2rem
            ) !important;

        line-height:
            1 !important;
    }


    .eb-home-cta-v2__title
    > span {

        white-space:
            normal !important;
    }


    .eb-home-cta-v2__action {

        margin-top:
            38px !important;

        font-size:
            0.80rem !important;

        gap:
            5px !important;
    }

}


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

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

    .eb-home-cta-v2__inner {

        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }


    .eb-home-cta-v2.is-glitching
    .eb-home-cta-v2__title {

        animation:
            none !important;
    }


    .eb-home-cta-v2__action,
    .eb-home-cta-v2__action-line {

        transition:
            none !important;
    }

}