/*------------------------------------------------*/

@keyframes BarreNoireAppear0 {
    0% {
        left: -50%;
        background-color: #ce1427;
    }
    50% {
        background-color: #ce1427;
    }
    100% {
        left: 50%;
        background-color: #000000;
    }
}

@keyframes BarreNoireAppear1 {
    0% {
        left: -50%;
        background-color: #d28b11;
    }
    50% {
        background-color: #d28b11;
    }
    100% {
        left: 50%;
        background-color: #000000;
    }
}

@keyframes BarreNoireAppear2 {
    0% {
        left: -50%;
        background-color: #35e71e;
    }
    50% {
        background-color: #35e71e;
    }
    100% {
        left: 50%;
        background-color: #000000;
    }
}

@keyframes BarreNoireAppear3 {
    0% {
        left: -50%;
        background-color: #1441e1;
    }
    50% {
        background-color: #1441e1;
    }
    100% {
        left: 50%;
        background-color: #000000;
    }
}

@keyframes BarreNoireAppear4 {
    0% {
        left: -50%;
        background-color: #b810eb;
    }
    50% {
        background-color: #b810eb;
    }
    100% {
        left: 50%;
        background-color: #000000;
    }
}

/*------------------------*/

@keyframes zoneTexteIn {
    0% {
        visibility: visible;
        filter: opacity(0.0);
    }

    100% {
        filter: opacity(1.0);
    }
}


@keyframes zoneTexteEffect {
    0% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(1.0);
    }
}


.blackWeekWelcome {

    position: fixed;
    width: 100%;
    height: 100%;
    top: 0em;
    left: 0em;
    z-index: 100000001;
    background-color: #a9474700;

    .blackBarreContainer {
        position: absolute;
        z-index: 1;
        top: 0em;
        left: 0em;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .barre {
            position: relative;
            background-color: #141313;
            border-left: solid 0.2em var(--green1);
            width: 50%;
            height: 20%;
            left: -50%;
        }

        .bf2026BarreIn0 {
            animation-name: BarreNoireAppear0;
            animation-duration: 0.3s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        .bf2026BarreIn1 {
            animation-name: BarreNoireAppear1;
            animation-duration: 0.3s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        .bf2026BarreIn2 {
            animation-name: BarreNoireAppear2;
            animation-duration: 0.3s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        .bf2026BarreIn3 {
            animation-name: BarreNoireAppear3;
            animation-duration: 0.3s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        .bf2026BarreIn4 {
            animation-name: BarreNoireAppear4;
            animation-duration: 0.3s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }

        .bf2026BarreOut {
            transition: transform 0.5s ease;
            transform: translateY(-600%);
        }

    }

    /*--------------------------------------------------------*/

    .textZone {
        position: absolute;
        height: 100%;
        width: 50%;
        top: 0%;
        left: 50%;
        z-index:10;
        display: flex;
        justify-content: center;
        align-items: center;
        filter: opacity(0.0);
        background-image: url('/animations/blackfriday2026/background.avif');
        background-size: cover;
        background-position: 50% 50%;
        border-left: solid 0.2em var(--green1);
        
        .inside {

            animation: zoneTexteEffect 4s linear 0s 1 alternate forwards;

            .titre {
                color: #877f7f;
                font-family: lato;
                text-transform: uppercase;
                font-weight: bold;
                font-size: 4em;
                margin: 0em;
                padding: 0em;
            }

            .texte {
                font-family: lato;
                text-transform: uppercase;
                color: #8f8080;
                font-weight: bold;
                font-size: 1.1em;
            }

            .texte2 {
                margin-top: 1.5em;
                font-family: lato;
                text-align: center;
                text-transform: uppercase;
                color: var(--green1);
                font-weight: bold;
                font-size: 1.5em;
            }
            

        }
    }

    /*.texteZoneAppear {
        animation-name: zoneTexteIn;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }*/

    .texteZoneAppear {
        animation: zoneTexteIn 0.5s ease-in-out 0.5s 1 alternate forwards;
    }

}



@media (max-width:1024px) {

    @keyframes BarreNoireAppear0 {
        0% {
            top: 100%;
            background-color: #ce1427;
        }
        50% {
            background-color: #ce1427;
        }
        100% {
            top: 0%;
            background-color: #000000;
        }
    }

    @keyframes BarreNoireAppear1 {
        0% {
            top: 100%;
            background-color: #d28b11;
        }
        50% {
            background-color: #d28b11;
        }
        100% {
            top: 0%;
            background-color: #000000;
        }
    }

    @keyframes BarreNoireAppear2 {
        0% {
            top: 100%;
            background-color: #35e71e;
        }
        50% {
            background-color: #35e71e;
        }
        100% {
            top: 0%;
            background-color: #000000;
        }
    }

    @keyframes BarreNoireAppear3 {
        0% {
            top: 100%;
            background-color: #1441e1;
        }
        50% {
            background-color: #1441e1;
        }
        100% {
            top: 0%;
            background-color: #000000;
        }
    }

    @keyframes BarreNoireAppear4 {
        0% {
            top: 100%;
            background-color: #b810eb;
        }
        50% {
            background-color: #b810eb;
        }
        100% {
            top: 0%;
            background-color: #000000;
        }
    }

    .blackWeekWelcome {


        .blackBarreContainer {

            flex-direction: row;

            .barre {
                position: relative;
                background-color: #141313;
                border-left: none;
                border-bottom: solid 0.2em var(--green1);
                left: auto;
                width: 20%;
                height: 50%;
                top: 100%;
            }


            .bf2026BarreOut {
                transition: transform 0.5s ease;
                transform: translateX(-600%);
            }


        }


        .textZone {

            top: 0em;
            left: 0em;
            width: 100%;
            height: 50%;
            border-bottom: solid 0.2em var(--green1);
            border-left: none;

            .inside {

                .titre {
                    font-size: 2.2em;
                }

                .texte {
                    font-size: 0.9em
                }

                .texte2 {
                    font-size: 1.3em
                }

            }

        }





    }



}