/* parallax.css */
/* BWB Noir — Parallax (eixo Y) + Fade */

/* Elementos com parallax */

.bwb-hero-bg, .bwb-hero-bg-about{
    background-attachment: fixed !important;
}

.bwb-bg-follow {
    min-height: 60vh;
    position: relative;
    overflow: hidden;

    will-change: background-position;
    transition: background-position 0.08s linear;

    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Hero principal (fade da troca de imagem) */
#bwb-hero {
    position: relative;
    transition: opacity 1.8s ease;
    background-size: cover;
    z-index: 1;
}

#bwb-hero.bwb-fading {
    opacity: 0;
}

#bwb-hero .bwb-hero-inner {
    position: relative;
    z-index: 2;
}

/* Segundo hero (about), se você estiver usando */
/* HERO ABOUT: container */
/* Container do hero-about */
#bwb-hero-about {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* CAMADA DE FUNDO que sofre fade E parallax */
#bwb-hero-about .bwb-hero-bg-about {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;

    background-position-x: var(--bwb-bg-x, 50%);
    background-position-y: var(--bwb-bg-y, 50%);

    opacity: 1;
    transition: opacity 1.8s ease;
    z-index: 0;
    will-change: transform, opacity; /* <<< adiciona isso */
}

/* fade apenas no fundo */
#bwb-hero-about .bwb-hero-bg-about.bwb-fading {
    opacity: 0;
}

/* conteúdo por cima, estável */
#bwb-hero-about .bwb-hero-inner {
    position: relative;
    z-index: 1;
}

/* Evita scroll horizontal acidental */
html,
body {
    overflow-x: hidden;
}

/* ---------------------------------------
   EXEMPLO: banner "sobre" com posição custom
   (usa as variáveis em vez de sobrescrever
    background-position)
   --------------------------------------- */

.bwb-about-banner {
    /* X você pode deixar keyword ou % */
    --bwb-bg-x: left;
    /* Y precisa ser percentual, pois o JS soma em cima disso */
    --bwb-bg-y: 0%;
}

/* MOBILE: pode ajustar a posição inicial aqui */
@media (max-width: 768px) {
    .bwb-about-banner {
        --bwb-bg-x: 25%;
        --bwb-bg-y: 50%;
    }
}