#bg,
#fg {
    position: relative;
    inset: 0;
}

#bg {
    z-index: 0;
}

#fg {
    z-index: 2;
}

/* ── BG layers: fade + zoom out ── */
.bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition:
        opacity 1.2s ease-in-out,
        transform 1.2s ease-in-out;
    will-change: opacity, transform;
}

.bg-layer.active {
    opacity: 1;
    transform: scale(1);
}

/* ── FG layers: fade + slide up ── */
.fg-layer {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    opacity: 0;
    /* transform: translateY(40px); */
    transition:
        opacity 1.2s ease-in-out,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
    margin-right: 50px;
    margin-left: -80px;
}

.fg-layer.active {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 576px) {
    .fg-layer {
        margin-right: 0;
        margin-left: 0;
    }
}