/* =========================================================
   ERABYTE – HOME FEATURED WORK
   ---------------------------------------------------------
   SINGLE PROJECT SHOWCASE V8

   - exact equal identity spacing
   - improved ANVIOLMEDIA readability
   - original background brightness
   - alpha fade only top / bottom
   - exact equal card spacing
   ========================================================= */


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

.eb-featured-project {

    --eb-featured-bg:
        #050814;

    --eb-featured-card:
        #08111f;

    --eb-featured-white:
        rgba(255, 255, 255, 0.98);

    --eb-featured-number:
        rgba(255, 255, 255, 0.34);


    --eb-insight-number-width:
        48px;

    --eb-insight-column-gap:
        8px;


    /*
     * Exact same distance between all four cards.
     */

    --eb-insight-card-gap:
        18px;


    /*
     * Exact same vertical distance inside
     * PROJECT / ANVIOLHOMES / FOR ANVIOLMEDIA.
     */

    --eb-project-identity-gap:
        12px;


    position:
        relative;


    width:
        100vw;


    max-width:
        none;


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


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


    box-sizing:
        border-box;


    overflow:
        hidden;


    background:
        var(--eb-featured-bg);


    color:
        var(--eb-featured-white);


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


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

.eb-featured-project__stage {

    position:
        relative;


    width:
        100%;


    min-height:
        clamp(
            900px,
            100svh,
            1120px
        );


    overflow:
        hidden;
}


/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.eb-featured-project__visual {

    position:
        absolute;


    inset:
        0;


    z-index:
        0;


    pointer-events:
        none;


    user-select:
        none;


    background-image:
        url("https://anviolhomes.de/wp-content/uploads/2026/07/City-Comfort-Suite-Hannover-Suedstadt.jpg");


    background-repeat:
        no-repeat;


    background-position:
        center center;


    background-size:
        cover;


    /*
     * Original image remains untouched
     * where the alpha mask is fully visible.
     */

    opacity:
        1;


    filter:
        none;


    transform:
        none;


    -webkit-mask-image:
        linear-gradient(
            to bottom,

            transparent
            0%,

            rgba(0, 0, 0, 0.04)
            5%,

            rgba(0, 0, 0, 0.14)
            10%,

            rgba(0, 0, 0, 0.34)
            16%,

            rgba(0, 0, 0, 0.62)
            22%,

            rgba(0, 0, 0, 0.86)
            27%,

            #000
            32%,

            #000
            68%,

            rgba(0, 0, 0, 0.86)
            73%,

            rgba(0, 0, 0, 0.62)
            78%,

            rgba(0, 0, 0, 0.34)
            84%,

            rgba(0, 0, 0, 0.14)
            90%,

            rgba(0, 0, 0, 0.04)
            95%,

            transparent
            100%
        );


    mask-image:
        linear-gradient(
            to bottom,

            transparent
            0%,

            rgba(0, 0, 0, 0.04)
            5%,

            rgba(0, 0, 0, 0.14)
            10%,

            rgba(0, 0, 0, 0.34)
            16%,

            rgba(0, 0, 0, 0.62)
            22%,

            rgba(0, 0, 0, 0.86)
            27%,

            #000
            32%,

            #000
            68%,

            rgba(0, 0, 0, 0.86)
            73%,

            rgba(0, 0, 0, 0.62)
            78%,

            rgba(0, 0, 0, 0.34)
            84%,

            rgba(0, 0, 0, 0.14)
            90%,

            rgba(0, 0, 0, 0.04)
            95%,

            transparent
            100%
        );
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.eb-featured-project__left {

    position:
        absolute;


    z-index:
        4;


    top:
        clamp(
            130px,
            15vh,
            190px
        );


    left:
        clamp(
            50px,
            5vw,
            94px
        );


    bottom:
        clamp(
            110px,
            12vh,
            160px
        );


    width:
        min(
            50vw,
            820px
        );


    display:
        flex;


    flex-direction:
        column;


    justify-content:
        space-between;
}


/* =========================================================
   PROJECT IDENTITY
   ---------------------------------------------------------
   IMPORTANT:

   The three elements now use ONE shared gap.

   PROJECT / 01
        ↓ 12px
   ANVIOLHOMES
        ↓ 12px
   FOR ANVIOLMEDIA

   No individual margins interfere anymore.
   ========================================================= */

.eb-featured-project__identity {

    position:
        relative;


    display:
        flex;


    flex-direction:
        column;


    align-items:
        flex-start;


    gap:
        var(--eb-project-identity-gap);
}


/* =========================================================
   PROJECT / 01
   ========================================================= */

.eb-featured-project__index {

    margin:
        0;


    padding:
        0;


    color:
        rgba(
            255,
            255,
            255,
            0.74
        );


    font-size:
        clamp(
            0.72rem,
            0.76vw,
            0.86rem
        );


    font-weight:
        500;


    line-height:
        1;


    letter-spacing:
        0.16em;


    text-transform:
        uppercase;
}


/* =========================================================
   ANVIOLHOMES WRAPPER
   ========================================================= */

.eb-featured-project__title {

    display:
        block;


    margin:
        0;


    padding:
        0;


    line-height:
        1;
}


/* =========================================================
   ANVIOLHOMES
   ========================================================= */

.eb-featured-project__title-link,
.eb-featured-project__title-link:hover,
.eb-featured-project__title-link:focus,
.eb-featured-project__title-link:focus-visible,
.eb-featured-project__title-link:active {

    display:
        block;


    margin:
        0;


    padding:
        0;


    background:
        transparent !important;


    border:
        0 !important;


    box-shadow:
        none !important;


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


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


    font-size:
        clamp(
            1.72rem,
            1.90vw,
            2.20rem
        ) !important;


    font-style:
        normal !important;


    font-weight:
        500 !important;


    line-height:
        1 !important;


    letter-spacing:
        0.065em !important;


    text-transform:
        uppercase;


    text-decoration:
        none !important;


    text-shadow:
        none !important;


    transform:
        none !important;


    transition:
        color
        170ms
        ease !important;
}


.eb-featured-project__title-link:hover,
.eb-featured-project__title-link:focus-visible {

    color:
        #FFFFFF !important;
}


/* =========================================================
   FOR ANVIOLMEDIA
   ---------------------------------------------------------
   More readable than before.

   Still clearly tertiary, but no longer disappears against
   brighter areas of the project image.
   ========================================================= */

.eb-featured-project__client,
.eb-featured-project__client:hover,
.eb-featured-project__client:focus,
.eb-featured-project__client:focus-visible,
.eb-featured-project__client:active {

    position:
        relative;


    display:
        block;


    margin:
        0;


    padding:
        0;


    background:
        transparent !important;


    border:
        0 !important;


    box-shadow:
        none !important;


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


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


    font-size:
        clamp(
            0.66rem,
            0.70vw,
            0.79rem
        ) !important;


    font-style:
        normal !important;


    font-weight:
        500 !important;


    line-height:
        1 !important;


    letter-spacing:
        0.12em !important;


    text-transform:
        uppercase;


    text-decoration:
        none !important;


    text-shadow:
        none !important;


    transform:
        none !important;


    opacity:
        1 !important;


    transition:
        color
        170ms
        ease !important;
}


.eb-featured-project__client:hover,
.eb-featured-project__client:focus-visible {

    color:
        rgba(
            255,
            255,
            255,
            0.88
        ) !important;
}


/* =========================================================
   LEFT DESCRIPTION
   ========================================================= */

.eb-featured-project__description {

    width:
        min(
            660px,
            100%
        );
}


.eb-featured-project__description-label {

    margin:
        0
        0
        18px;


    color:
        rgba(
            255,
            255,
            255,
            0.36
        );


    font-size:
        clamp(
            0.70rem,
            0.73vw,
            0.82rem
        );


    font-weight:
        500;


    line-height:
        1;


    letter-spacing:
        0.14em;


    text-transform:
        uppercase;
}


.eb-featured-project__description-text {

    margin:
        0;


    color:
        rgba(
            255,
            255,
            255,
            0.82
        );


    font-size:
        clamp(
            1.07rem,
            1.15vw,
            1.32rem
        );


    font-weight:
        400;


    line-height:
        1.58;


    letter-spacing:
        0.002em;
}


/* =========================================================
   RIGHT CARD AREA
   ========================================================= */

.eb-featured-project__insights {

    position:
        absolute;


    z-index:
        6;


    top:
        clamp(
            70px,
            7vh,
            100px
        );


    right:
        clamp(
            34px,
            3.5vw,
            68px
        );


    bottom:
        clamp(
            70px,
            7vh,
            100px
        );


    width:
        clamp(
            400px,
            28.5vw,
            535px
        );


    display:
        grid;


    /*
     * Four mathematically identical rows.
     */

    grid-template-rows:
        repeat(
            4,
            minmax(0, 1fr)
        );


    /*
     * Fixed exact distance between every card.
     */

    gap:
        var(--eb-insight-card-gap);
}


/* =========================================================
   CARD
   ========================================================= */

.eb-featured-project__insight {

    position:
        relative;


    display:
        flex;


    flex-direction:
        column;


    justify-content:
        flex-start;


    min-width:
        0;


    min-height:
        0;


    margin:
        0;


    padding:

        clamp(
            25px,
            2vw,
            34px
        )

        clamp(
            27px,
            2.2vw,
            39px
        );


    box-sizing:
        border-box;


    overflow:
        hidden;


    background:
        var(--eb-featured-card);


    border-radius:
        11px;


    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.018
        );


    box-shadow:
        none;


    transition:
        none;
}


/* =========================================================
   CARD REMAINS STATIC
   ========================================================= */

.eb-featured-project__insight:hover,
.eb-featured-project__insight:focus-within {

    background:
        var(--eb-featured-card);


    border-color:
        rgba(
            255,
            255,
            255,
            0.018
        );


    box-shadow:
        none;


    transform:
        none;
}


/* =========================================================
   CARD HEADLINE
   ========================================================= */

.eb-featured-project__insight-title {

    display:
        grid;


    grid-template-columns:
        var(--eb-insight-number-width)
        minmax(0, 1fr);


    column-gap:
        var(--eb-insight-column-gap);


    align-items:
        baseline;


    width:
        100%;


    margin:
        0;


    padding:
        0;


    color:
        rgba(
            255,
            255,
            255,
            0.96
        );


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


    font-size:
        clamp(
            1.02rem,
            1.08vw,
            1.24rem
        );


    font-style:
        normal;


    font-weight:
        500;


    line-height:
        1;


    letter-spacing:
        0.10em;


    text-transform:
        uppercase;
}


/* =========================================================
   CARD NUMBER
   ========================================================= */

.eb-featured-project__insight-number {

    display:
        block;


    width:
        var(--eb-insight-number-width);


    color:
        var(--eb-featured-number);


    text-align:
        left;


    white-space:
        nowrap;
}


/* =========================================================
   CARD NAME
   ========================================================= */

.eb-featured-project__insight-name {

    display:
        block;


    min-width:
        0;


    color:
        rgba(
            255,
            255,
            255,
            0.96
        );


    text-align:
        left;


    white-space:
        nowrap;
}


/* =========================================================
   CARD DESCRIPTION
   ========================================================= */

.eb-featured-project__insight-text {

    width:
        calc(
            100%
            -
            var(--eb-insight-number-width)
            -
            var(--eb-insight-column-gap)
        );


    margin:

        clamp(
            20px,
            1.7vw,
            27px
        )

        0

        0

        calc(
            var(--eb-insight-number-width)
            +
            var(--eb-insight-column-gap)
        );


    color:
        rgba(
            255,
            255,
            255,
            0.66
        );


    font-size:
        clamp(
            0.98rem,
            1.02vw,
            1.15rem
        );


    font-weight:
        400;


    line-height:
        1.48;


    letter-spacing:
        0.001em;


    text-align:
        left;
}


/* =========================================================
   DELIVERY CARD
   ========================================================= */

.eb-featured-project__insight--delivery {

    justify-content:
        space-between;
}


.eb-featured-project__insight-copy {

    width:
        100%;
}


/* =========================================================
   OPEN PROJECT POSITION
   ========================================================= */

.eb-featured-project__open-wrap {

    display:
        flex;


    justify-content:
        flex-end;


    align-items:
        flex-end;


    width:
        100%;


    margin-top:
        18px;
}


/* =========================================================
   OPEN PROJECT
   ========================================================= */

.eb-featured-project__open,
.eb-featured-project__open:hover,
.eb-featured-project__open:focus,
.eb-featured-project__open:focus-visible,
.eb-featured-project__open:active {

    position:
        relative;


    display:
        flex;


    flex-direction:
        column;


    align-items:
        center;


    justify-content:
        center;


    gap:
        5px;


    margin:
        0;


    padding:
        3px
        2px;


    background:
        transparent !important;


    border:
        0 !important;


    border-radius:
        0 !important;


    box-shadow:
        none !important;


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


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


    font-size:
        clamp(
            0.76rem,
            0.80vw,
            0.90rem
        ) !important;


    font-style:
        normal !important;


    font-weight:
        500 !important;


    line-height:
        1 !important;


    letter-spacing:
        0.14em !important;


    text-transform:
        uppercase;


    text-decoration:
        none !important;


    text-shadow:
        none !important;


    transform:
        none !important;


    transition:

        color
        180ms
        ease,

        text-shadow
        220ms
        ease !important;
}


/* =========================================================
   OPEN PROJECT TEXT
   ========================================================= */

.eb-featured-project__open-text {

    position:
        relative;


    display:
        block;
}


/* =========================================================
   OPEN PROJECT UNDERLINE
   ========================================================= */

.eb-featured-project__open-line {

    display:
        block;


    width:
        68%;


    height:
        1px;


    margin:
        0;


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


    box-shadow:
        none;


    transition:

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

        background
        180ms
        ease,

        box-shadow
        180ms
        ease;
}


/* =========================================================
   OPEN PROJECT HOVER
   ========================================================= */

.eb-featured-project__open:hover,
.eb-featured-project__open:focus-visible {

    color:
        #FFFFFF !important;


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


.eb-featured-project__open:hover
.eb-featured-project__open-line,

.eb-featured-project__open:focus-visible
.eb-featured-project__open-line {

    width:
        100%;


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


    box-shadow:
        0
        0
        7px
        rgba(
            255,
            255,
            255,
            0.07
        );
}


/* =========================================================
   DELIVERY CARD NEVER LIGHTS UP
   ========================================================= */

.eb-featured-project__insight--delivery:has(
    .eb-featured-project__open:hover
),

.eb-featured-project__insight--delivery:has(
    .eb-featured-project__open:focus-visible
) {

    background:
        var(--eb-featured-card) !important;


    border-color:
        rgba(
            255,
            255,
            255,
            0.018
        ) !important;


    box-shadow:
        none !important;


    transform:
        none !important;
}


/* =========================================================
   SELECTION
   ========================================================= */

.eb-featured-project__left,
.eb-featured-project__insights {

    user-select:
        text;
}


.eb-featured-project__title-link,
.eb-featured-project__client,
.eb-featured-project__open {

    user-select:
        none;
}


/* =========================================================
   REVEAL
   ========================================================= */

[data-eb-featured-reveal] {

    opacity:
        0;


    transform:
        translateY(14px);


    transition:

        opacity
        680ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )
        var(
            --eb-featured-delay,
            0ms
        ),

        transform
        760ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        )
        var(
            --eb-featured-delay,
            0ms
        );
}


.eb-featured-project.is-visible
[data-eb-featured-reveal] {

    opacity:
        1;


    transform:
        translateY(0);
}


/* =========================================================
   IDENTITY INTERNALS STATIC
   ========================================================= */

.eb-featured-project__identity
.eb-featured-project__index,

.eb-featured-project__identity
.eb-featured-project__title,

.eb-featured-project__identity
.eb-featured-project__title-link,

.eb-featured-project__identity
.eb-featured-project__client {

    transform:
        none !important;
}


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

@media (
    max-width:
    1180px
) {

    .eb-featured-project {

        --eb-insight-number-width:
            44px;

        --eb-insight-column-gap:
            7px;

        --eb-insight-card-gap:
            16px;
    }


    .eb-featured-project__left {

        width:
            47vw;


        left:
            34px;
    }


    .eb-featured-project__insights {

        right:
            28px;


        width:
            clamp(
                370px,
                38vw,
                465px
            );
    }


    .eb-featured-project__insight {

        padding:
            25px
            27px;
    }


    .eb-featured-project__insight-text {

        font-size:
            0.94rem;
    }

}


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

@media (
    max-width:
    900px
) {

    .eb-featured-project {

        --eb-insight-number-width:
            48px;

        --eb-insight-column-gap:
            8px;

        --eb-insight-card-gap:
            16px;
    }


    .eb-featured-project__stage {

        min-height:
            auto;


        display:
            flex;


        flex-direction:
            column;


        padding:
            100px
            24px;


        box-sizing:
            border-box;
    }


    .eb-featured-project__left {

        position:
            relative;


        top:
            auto;


        left:
            auto;


        right:
            auto;


        bottom:
            auto;


        width:
            100%;


        min-height:
            570px;


        padding:
            30px
            0
            70px;
    }


    .eb-featured-project__insights {

        position:
            relative;


        top:
            auto;


        right:
            auto;


        bottom:
            auto;


        width:
            min(
                580px,
                100%
            );


        margin:
            0
            0
            0
            auto;


        display:
            flex;


        flex-direction:
            column;


        gap:
            var(--eb-insight-card-gap);
    }


    .eb-featured-project__insight {

        min-height:
            240px;


        padding:
            30px;
    }


    .eb-featured-project__insight--delivery {

        min-height:
            310px;
    }

}


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

@media (
    max-width:
    560px
) {

    .eb-featured-project {

        --eb-insight-number-width:
            43px;

        --eb-insight-column-gap:
            7px;

        --eb-insight-card-gap:
            14px;

        --eb-project-identity-gap:
            10px;
    }


    .eb-featured-project__stage {

        padding:
            80px
            18px;
    }


    .eb-featured-project__left {

        min-height:
            540px;
    }


    .eb-featured-project__index {

        font-size:
            0.68rem;
    }


    .eb-featured-project__title-link {

        font-size:
            1.38rem !important;
    }


    .eb-featured-project__client {

        font-size:
            0.64rem !important;
    }


    .eb-featured-project__description-text {

        font-size:
            0.96rem;
    }


    .eb-featured-project__insight {

        min-height:
            250px;


        padding:
            26px
            22px;


        border-radius:
            9px;
    }


    .eb-featured-project__insight-title {

        font-size:
            0.92rem;
    }


    .eb-featured-project__insight-text {

        font-size:
            0.91rem;
    }


    .eb-featured-project__open {

        font-size:
            0.72rem !important;
    }

}


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

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

    [data-eb-featured-reveal] {

        opacity:
            1;


        transform:
            none;


        transition:
            none;
    }


    .eb-featured-project__title-link,
    .eb-featured-project__client,
    .eb-featured-project__open,
    .eb-featured-project__open-line {

        transition:
            none !important;
    }

}