/* =========================================================
   ERABYTE GLOBAL FOOTER
   ---------------------------------------------------------
   - true full-width footer
   - exact centered copyright
   - indexed headings
   - monochrome focus effects
   ========================================================= */


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

.eb-global-footer {

    --eb-footer-text:
        rgba(255, 255, 255, 0.94);

    --eb-footer-link:
        rgba(255, 255, 255, 0.74);

    --eb-footer-link-focus:
        rgba(255, 255, 255, 1);

    --eb-footer-link-dim:
        rgba(255, 255, 255, 0.22);

    --eb-footer-heading:
        rgba(255, 255, 255, 0.70);

    --eb-footer-index:
        rgba(255, 255, 255, 0.25);

    --eb-footer-meta:
        rgba(255, 255, 255, 0.48);

    --eb-footer-line:
        rgba(255, 255, 255, 0.085);


    position: relative;

    /*
     * Robust Elementor full-width breakout.
     */
    width: 100vw !important;
    max-width: 100vw !important;

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

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

    padding:
        0
        clamp(24px, 4vw, 72px)
        clamp(26px, 3vw, 42px);

    box-sizing: border-box;

    background: transparent;

    color:
        var(--eb-footer-text);

    overflow: hidden;
}


/* =========================================================
   TOP DIVIDER
   ========================================================= */

.eb-footer-divider {

    width: 100%;
    height: 1px;

    margin:
        0
        0
        clamp(38px, 4vw, 54px);

    background:
        linear-gradient(
            90deg,

            transparent 0%,

            rgba(255, 255, 255, 0.025) 5%,

            var(--eb-footer-line) 12%,

            var(--eb-footer-line) 88%,

            rgba(255, 255, 255, 0.025) 95%,

            transparent 100%
        );
}


/* =========================================================
   TWO COLUMN SYSTEM
   ========================================================= */

.eb-footer-main {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    width:
        min(
            960px,
            88vw
        );

    margin:
        0
        auto;

    padding: 0;

    column-gap:
        clamp(
            90px,
            11vw,
            180px
        );

    align-items: start;
}


/* =========================================================
   COLUMN
   ========================================================= */

.eb-footer-column {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    width: 100%;

    margin: 0;
    padding: 0;

    text-align: center;
}


/* =========================================================
   HEADING
   ========================================================= */

.eb-global-footer
.eb-footer-heading {

    display: flex;

    align-items: baseline;

    justify-content: center;

    gap: 8px;

    margin:
        0
        0
        18px
        0 !important;

    padding:
        0 !important;

    /*
     * Font properties live HERE so index and title inherit
     * exactly the same typography.
     */
    font-family:
        "Saira",
        system-ui,
        sans-serif !important;

    font-size:
        clamp(
            1.08rem,
            1.12vw,
            1.22rem
        ) !important;

    font-style:
        normal !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    letter-spacing:
        0.15em !important;

    text-transform:
        uppercase !important;

    text-align:
        center !important;
}


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

.eb-footer-heading__title {

    color:
        var(--eb-footer-heading);

    /*
     * Explicitly inherit EVERYTHING.
     */
    font:
        inherit;

    letter-spacing:
        inherit;

    line-height:
        inherit;
}


/* =========================================================
   01 / 02
   ---------------------------------------------------------
   EXACT same font size / weight / tracking as heading.
   Only colour changes.
   ========================================================= */

.eb-footer-heading__index {

    color:
        var(--eb-footer-index);

    font:
        inherit !important;

    font-size:
        1em !important;

    font-weight:
        inherit !important;

    line-height:
        inherit !important;

    letter-spacing:
        inherit !important;

    white-space:
        nowrap;
}


/* =========================================================
   LINKS STACK
   ========================================================= */

.eb-footer-links {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    gap: 12px;

    margin: 0;
    padding: 0;

    text-align: center;
}


/* =========================================================
   SUBPOINTS
   ========================================================= */

.eb-global-footer
.eb-footer-link {

    position: relative;

    display: inline-block;

    width:
        fit-content;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        var(--eb-footer-link) !important;

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

    font-size:
        clamp(
            0.94rem,
            0.96vw,
            1.04rem
        ) !important;

    font-style:
        normal !important;

    font-weight:
        400 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        0.008em !important;

    text-decoration:
        none !important;

    text-align:
        center !important;

    white-space:
        nowrap;

    cursor:
        pointer;

    transform:
        none !important;

    transition:
        color 180ms ease,
        opacity 180ms ease,
        text-shadow 180ms ease !important;
}


/* =========================================================
   SUBPOINT GLITCH SLICE
   ========================================================= */

.eb-footer-link::after {

    content:
        attr(data-label);

    position: absolute;

    inset: 0;

    display: block;

    color: #FFFFFF;

    font: inherit;

    letter-spacing:
        inherit;

    white-space:
        nowrap;

    opacity: 0;

    pointer-events:
        none;

    clip-path:
        inset(
            43%
            0
            39%
            0
        );

    transform:
        translateX(0);

    text-shadow:
        0
        0
        5px
        rgba(
            255,
            255,
            255,
            0.18
        );
}


/* =========================================================
   SUBPOINT FOCUS
   ========================================================= */

.eb-footer-main:has(
    .eb-footer-link:hover
)
.eb-footer-link:not(
    :hover
) {

    color:
        var(--eb-footer-link-dim) !important;

    opacity:
        0.60;
}


.eb-footer-main:has(
    .eb-footer-link:focus-visible
)
.eb-footer-link:not(
    :focus-visible
) {

    color:
        var(--eb-footer-link-dim) !important;

    opacity:
        0.60;
}


.eb-global-footer
.eb-footer-link:hover,

.eb-global-footer
.eb-footer-link:focus-visible {

    color:
        var(--eb-footer-link-focus) !important;

    opacity: 1;

    transform:
        none !important;

    text-shadow:
        0
        0
        7px
        rgba(
            255,
            255,
            255,
            0.12
        ) !important;
}


.eb-footer-link:hover::after,
.eb-footer-link:focus-visible::after {

    animation:
        eb-footer-focus-scan
        300ms
        steps(2, end)
        both;
}


/* =========================================================
   SUBPOINT GLITCH
   ========================================================= */

@keyframes eb-footer-focus-scan {

    0% {
        opacity: 0;
        transform: translateX(0);
    }

    18% {
        opacity: 0.42;

        transform:
            translateX(-1.5px);

        clip-path:
            inset(24% 0 59% 0);
    }

    38% {
        opacity: 0.74;

        transform:
            translateX(1px);

        clip-path:
            inset(48% 0 34% 0);
    }

    58% {
        opacity: 0.34;

        transform:
            translateX(-0.5px);

        clip-path:
            inset(65% 0 17% 0);
    }

    78% {
        opacity: 0.18;

        transform:
            translateX(0.5px);
    }

    100% {
        opacity: 0;

        transform:
            translateX(0);
    }
}


/* =========================================================
   COPYRIGHT
   ---------------------------------------------------------
   NO relative offsets.
   NO transforms.
   NO absolute centering.

   CSS Grid centers the brand against the ACTUAL
   full-width footer.
   ========================================================= */

.eb-footer-copyright {

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    grid-template-rows:
        auto
        auto;

    width: 100%;

    margin-top:
        clamp(
            48px,
            5vw,
            70px
        );

    padding: 0;

    text-align: center;
}


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

.eb-footer-copyright__brand {

    position: relative;

    grid-column: 2;
    grid-row: 1;

    justify-self: center;

    display: block;

    width:
        max-content;

    margin: 0;

    padding: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.92
        ) !important;

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

    font-size:
        clamp(
            1.78rem,
            2.1vw,
            2.18rem
        ) !important;

    font-style:
        normal !important;

    font-weight:
        400 !important;

    line-height:
        1 !important;

    letter-spacing:
        0.18em !important;

    text-decoration:
        none !important;

    white-space:
        nowrap;

    /*
     * Base state.
     */
    text-shadow:
        0
        0
        0
        rgba(255,255,255,0);

    transition:
        color 180ms ease,
        text-shadow 220ms ease;
}


/* =========================================================
   ERABYTE GLITCH DUPLICATES
   ========================================================= */

.eb-footer-copyright__brand::before,
.eb-footer-copyright__brand::after {

    content:
        attr(data-label);

    position: absolute;

    inset: 0;

    color:
        #FFFFFF;

    font:
        inherit;

    letter-spacing:
        inherit;

    line-height:
        inherit;

    white-space:
        nowrap;

    pointer-events:
        none;

    opacity:
        0;
}


/* upper slice */

.eb-footer-copyright__brand::before {

    clip-path:
        inset(
            10%
            0
            58%
            0
        );
}


/* lower slice */

.eb-footer-copyright__brand::after {

    clip-path:
        inset(
            58%
            0
            8%
            0
        );
}


/* =========================================================
   BRAND HOVER
   ---------------------------------------------------------
   Phase 1: glitch
   Phase 2: white glow settles in
   ========================================================= */

.eb-footer-copyright__brand:hover,
.eb-footer-copyright__brand:focus-visible {

    color:
        #FFFFFF !important;

    animation:
        eb-footer-brand-afterglow
        680ms
        ease-out
        190ms
        both;
}


.eb-footer-copyright__brand:hover::before,
.eb-footer-copyright__brand:focus-visible::before {

    animation:
        eb-footer-brand-glitch-a
        340ms
        steps(2, end)
        both;
}


.eb-footer-copyright__brand:hover::after,
.eb-footer-copyright__brand:focus-visible::after {

    animation:
        eb-footer-brand-glitch-b
        340ms
        steps(2, end)
        both;
}


/* =========================================================
   BRAND GLITCH TOP
   ========================================================= */

@keyframes eb-footer-brand-glitch-a {

    0% {

        opacity: 0;

        transform:
            translateX(0);
    }


    12% {

        opacity: 0.78;

        transform:
            translateX(-3px);

        clip-path:
            inset(
                8%
                0
                66%
                0
            );
    }


    28% {

        opacity: 0.42;

        transform:
            translateX(2px);

        clip-path:
            inset(
                29%
                0
                49%
                0
            );
    }


    48% {

        opacity: 0.88;

        transform:
            translateX(-1px);

        clip-path:
            inset(
                14%
                0
                61%
                0
            );
    }


    68% {

        opacity: 0.24;

        transform:
            translateX(1px);
    }


    100% {

        opacity: 0;

        transform:
            translateX(0);
    }

}


/* =========================================================
   BRAND GLITCH BOTTOM
   ========================================================= */

@keyframes eb-footer-brand-glitch-b {

    0% {

        opacity: 0;

        transform:
            translateX(0);
    }


    16% {

        opacity: 0.54;

        transform:
            translateX(2px);

        clip-path:
            inset(
                61%
                0
                12%
                0
            );
    }


    34% {

        opacity: 0.82;

        transform:
            translateX(-2px);

        clip-path:
            inset(
                48%
                0
                30%
                0
            );
    }


    55% {

        opacity: 0.36;

        transform:
            translateX(1px);

        clip-path:
            inset(
                72%
                0
                4%
                0
            );
    }


    74% {

        opacity: 0.20;

        transform:
            translateX(-0.5px);
    }


    100% {

        opacity: 0;

        transform:
            translateX(0);
    }

}


/* =========================================================
   BRAND AFTER-GLOW
   ========================================================= */

@keyframes eb-footer-brand-afterglow {

    0% {

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


    22% {

        text-shadow:

            0
            0
            5px
            rgba(
                255,
                255,
                255,
                0.40
            ),

            0
            0
            14px
            rgba(
                255,
                255,
                255,
                0.18
            );
    }


    55% {

        text-shadow:

            0
            0
            8px
            rgba(
                255,
                255,
                255,
                0.28
            ),

            0
            0
            22px
            rgba(
                255,
                255,
                255,
                0.10
            );
    }


    100% {

        text-shadow:

            0
            0
            7px
            rgba(
                255,
                255,
                255,
                0.22
            ),

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

}


/* =========================================================
   © 2026
   ========================================================= */

.eb-footer-copyright__meta {

    grid-column: 2;
    grid-row: 2;

    justify-self: center;

    display: block;

    margin:
        6px
        0
        0;

    padding: 0;

    color:
        var(--eb-footer-meta);

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

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

    font-style:
        normal !important;

    font-weight:
        500 !important;

    line-height:
        1 !important;

    letter-spacing:
        0.04em !important;

    white-space:
        nowrap;
}


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

@media (
    max-width: 820px
) {

    .eb-footer-main {

        width:
            min(
                720px,
                92vw
            );

        column-gap:
            56px;
    }

}


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

@media (
    max-width: 560px
) {

    .eb-global-footer {

        padding-inline:
            20px;

        padding-bottom:
            26px;
    }


    .eb-footer-divider {

        margin-bottom:
            30px;
    }


    .eb-footer-main {

        grid-template-columns:
            1fr;

        width:
            100%;

        row-gap:
            36px;
    }


    .eb-global-footer
    .eb-footer-heading {

        margin-bottom:
            14px !important;

        font-size:
            1rem !important;
    }


    .eb-global-footer
    .eb-footer-link {

        font-size:
            0.92rem !important;
    }


    .eb-footer-links {

        gap:
            10px;
    }


    .eb-footer-copyright {

        margin-top:
            40px;
    }


    .eb-footer-copyright__brand {

        font-size:
            1.55rem !important;
    }


    .eb-footer-copyright__meta {

        margin-top:
            5px;

        font-size:
            0.70rem !important;
    }

}


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

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

    .eb-footer-link,
    .eb-footer-copyright__brand {

        transition:
            none !important;
    }


    .eb-footer-link:hover::after,
    .eb-footer-link:focus-visible::after,

    .eb-footer-copyright__brand:hover,
    .eb-footer-copyright__brand:focus-visible,

    .eb-footer-copyright__brand:hover::before,
    .eb-footer-copyright__brand:hover::after,
    .eb-footer-copyright__brand:focus-visible::before,
    .eb-footer-copyright__brand:focus-visible::after {

        animation:
            none !important;
    }


    .eb-footer-copyright__brand:hover,
    .eb-footer-copyright__brand:focus-visible {

        text-shadow:

            0
            0
            7px
            rgba(
                255,
                255,
                255,
                0.18
            );
    }

}