.bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.bg-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transition: transform 2s ease, opacity 2s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
}

.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    z-index: 1; /* base layer */
}

.hidden {
    opacity: 0;
    transform: translate3d(100%, 0, 0); /* off-screen to the right */
    z-index: 0;
}

.slide-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    z-index: 2; /* on top during animation */
}

/* ---------- iOS/touch performance fixes ---------- */

/* On touch devices (iOS/Android), avoid background-attachment: fixed jank */
@media (hover: none) and (pointer: coarse) {
    .bg-layer {
        background-attachment: scroll !important; /* ADDED */
    }
}

/* Optional: honor reduced motion to avoid slide animation on users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .bg-layer {
        transition: none !important; /* ADDED (accessibility) */
    }
}

/* Tint only */
.bg-overlay {
    position: absolute;
    inset: 0;
    background-color: rgb(48, 50, 59, 0.5); /* your existing tint */
    z-index: 3;
    pointer-events: none;
    /* optional: set a CSS var for easy tuning */
    --logo-opacity: 0.3; /* adjust to taste: 0 (invisible) → 1 (solid) */
}

    /* Logo layer as a pseudo-element */
    .bg-overlay::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('/images/logo/gold.svg'); /* root-relative path */
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        /* Static fade from the moment it renders */
        opacity: var(--logo-opacity);
        /* No animation or delay */
        will-change: opacity; /* harmless; remove if not animating later */
        backface-visibility: hidden; /* ADDED: iOS paint stability */
        transform: translate3d(0,0,0); /* ADDED: force compositing */
    }

/* Foreground content stays above everything */
.container {
    position: relative;
    z-index: 5; /* already set inline in your markup, keep it higher than 2 */
}