/* --- Parallax Background Styles --- */

.page-canvas {
    position: fixed;
    overflow: hidden; /* Ensure the pseudo-element doesn't overflow */
}

.page-canvas::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Creates the parallax effect */
    z-index: -1;
    opacity: 0.2;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1); /* Match page transition */
}

/* --- Assign Background Images --- */
#product-page::before {
    background-image: url('images/pilpoll product.png');
}
#solutions-page::before {
    background-image: url('images/pilpoll solutions.png');
}
#how-it-works-page::before {
    background-image: url('images/pilpoll how it works.png');
}
#security-page::before {
    background-image: url('images/pilpoll security.png');
}


/* --- Parallax Reveal Effect --- */

/* For pages sliding from the sides */
.page-canvas.from-left.active::before,
.page-canvas.from-right.active::before {
    transform: translateX(0);
}
.page-canvas.from-left::before {
    transform: translateX(50%); /* Move slower than the foreground */
}
.page-canvas.from-right::before {
    transform: translateX(-50%); /* Move slower than the foreground */
}


/* For pages sliding from top/bottom */
.page-canvas.from-top.active::before,
.page-canvas.from-bottom.active::before {
    transform: translateY(0);
}
.page-canvas.from-top::before {
    transform: translateY(50%); /* Move slower than the foreground */
}
.page-canvas.from-bottom::before {
    transform: translateY(-50%); /* Move slower than the foreground */
}