/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/
/* Target the element when the slideInRight animation is active */


/* Pasek "suwanka" na całą szerokość ekranu, przyklejony do dołu sekcji */
#suwanka {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    /* centruje 100vw względem sekcji */
    width: 100vw;
    /* pełna szerokość ekranu */
    overflow: hidden;
    /* nic nie rozszerzy layoutu */
    z-index: 0;
}

.butt_menu a{
    background-color: #f47920;
        padding: 10px 25px 10px 25px;
        color: #fff;
    }



/* Sam napis – animujemy go w poziomie */
#suwanka h3 {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    margin: 0;
    font-size: 200px;
    /* DODAJ większy rozmiar */
    /* lub */
    font-size: 15vw;
    /* responsywny rozmiar */
}
.yt-bg {
    /* position: absolute; */
    top: 0;
    left: 0;
    /* width: 100vw;
    height: 100vh; */
    object-fit: cover;
    pointer-events: none;
    /* nic nie klikniesz */
    border: none;
    pointer-events: none;
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
}
/* 

.img-slidein-right,
.img-slidein-left {
    will-change: transform, opacity;
}

.img-slidein-right {
    transform: translateX(40px);
}

.img-slidein-left {
    transform: translateX(-40px);
}

.scroll-h-pan {
    will-change: transform;
} */

/* Globalnie nadpisz wszystkie animacje slide w Bricks */
@keyframes slideInLeft {
    from {
        transform: translate3d(-50px, 0, 0);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translate3d(50px, 0, 0);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes slideInDown {
    from {
        transform: translate3d(0, -50px, 0);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translate3d(0, 50px, 0);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}



.scroll-wrap {
    /* overflow: hidden; */
    /* żeby nie wychodził poza sekcję */
}

/* WSPÓLNE PODSTAWY DLA OBU ANIMACJI */
.ni_anim1,
.ni_anim2 {
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    /* opcjonalnie: własna obwódka */
    transition: border-color 0.3s ease;
}

/* WSPÓLNE: pseudo-element dla dolnej animowanej linii */
.ni_anim1::after,
.ni_anim2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    transition: width 0.4s ease;
}

/* === OPCJA 1: CIEMNA RAMKA (ni_anim1) === */
.ni_anim1 {
    border-color: #0a283c;
}

.ni_anim1::after {
    background-color: #0a283c;
}

.ni_anim1:hover::after {
    width: 100%;
}

/* === OPCJA 2: BIAŁA RAMKA (ni_anim2) === */
.ni_anim2 {
    border-color: #ffffff;
}

.ni_anim2::after {
    background-color: #ffffff;
}

.ni_anim2:hover::after {
    width: 100%;
}


/* 1) TŁO sekcji */
#s100 {
    /* position: relative;
    background: url('/wp-content/uploads/2025/10/h1.jpg') center/cover no-repeat;
    overflow: hidden; */
}

html {
    scroll-behavior: smooth;
}

/* rodzic bez z-index, żeby nie odcinać blendu */
#k100 {
    position: relative;
}

/* treść nad warstwą koloru */
#k100>* {
    position: relative;
    z-index: 1;
}

/* warstwa mieszająca (animowana przez zmienne CSS) */
#k100::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(89, 91, 249, 1);
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;

    /* start: lekko z prawej i niewidoczna */
    transform: translateX(var(--blend-x, 40px));
    opacity: var(--blend-o, 0);
    will-change: transform, opacity;
}

/* 5) Kolor tekstów */
#naglowek1,
#text1 {
    color: #fff;
}


#brx-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
    /* lub Twoja zmienna koloru */
}

.site-header {
    position: sticky;
    /* nadal masz przyklejanie */
    top: 0;
    z-index: 9999;
    background-color: var(--bricks-color-lhlbqk);
    padding-top: 20px;
    padding-bottom: 20px;
    transition: padding .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.site-header.is-scrolled {
    padding-top: 7px !important;
    padding-bottom: 7px!important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    /* opcjonalnie */
}

:target {
    scroll-margin-top: 140px;
    /* dostosuj do wysokości nagłówka */
}













@media (min-width: 783px) {
    body.admin-bar #brx-header {
        top: 32px;
    }
}