/* ------------------------------
 * Parallax Default (2026-09-26)
 * ------------------------------
 */

/* Section container with perspective */
.parallax-section {
    position: relative;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 1px; /* Creates depth */
    perspective-origin: center;

    /* Parallax layers */
    .parallax-layer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform-origin: center;
    }

    /* Background layer moves slower */
    .layer-back {
        transform: translateZ(-1px) scale(2); /* Moves slower due to negative Z */
        z-index: 1;
        background-size: cover;
        width: auto;
        height: 600px;
    }

    /* Foreground layer moves normally */
    .layer-front {
        position: relative;
        padding: 20vh 10%;
        background: rgba(255, 255, 255, 0.8);
        z-index: 2;
    }

    .layer-front h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .content {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }
}


body {
    scroll-behavior: smooth;
}


/* Parallax ukm Vanilla JS */

.parallax-effect-wrapper {
    position: relative;

    .parallax-overlay {
        position: absolute;
        inset: 0;

        .content-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            width: 100%;
            height: 100%;
            padding: 0 4em;

            &.content-should-white {
                color: white;
            }

            h1, h2, h3, h4,
            p, a {
                text-wrap: balance;
                color: inherit;
                text-align: center;
            }
        }
    }

    picture {
        display: block;
    //transform: translateY(-121px);
    }

    figure {
        position: relative;
        overflow: hidden;
        margin: 0;

        img {
            transform: scale(1.5) translate3d(0px, 0px, 0px);
            transition: transform ease-in-out;
        }

        div.info-main {
            width: 200px;
            height: 150px;
            position: absolute;
            bottom: 100%;
            left: 5px;
            padding: 5px;
            background-color: rgba(216, 139, 26, 0.87);
            font-weight: 400;
            text-align: left;
            line-height: 1.2;
            font-size: 16px;
            font-feature-settings: "tnum";
        }
    }

    div.info-main {
        width: 300px;
        height: auto;
        position: absolute;
        bottom: 5px;
        left: 5px;
        padding: 5px;
        background-color: rgba(216, 139, 26, 0.87);
        font-weight: 400;
        text-align: left;
        line-height: 1.2;
        font-size: 16px;
        font-feature-settings: "tnum";
    }
}