/* Middle column becomes a vertical flex layout */
.middle-column {
    display: flex;
    flex-direction: column;
    gap: 30px; /* spacing between stacked blocks */
    min-height: 100dvh; /* CHANGED: was 100vh; dvh fixes iOS browser chrome */
    padding: 20px 0;
}

.content-block {
    background: rgb(216, 216, 216, 0.85); /* translucent card / backdrop-filter: blur(6px); / optional: glassy effect / border-radius: 15px; / curved edges / padding: 25px; / inner spacing / margin-bottom: 30px; / space between blocks / box-shadow: 0 8px 20px rgba(0,0,0,0.25); / soft shadow / color: #fff; / text readable on dark bg */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); /* ADDED: iOS Safari prefix */
    border-radius: 10px;
    padding: 30px 10px 30px 10px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    box-shadow:0 20px 40px rgba(0,0,0,0.45); 
    transform:translateZ(0);
}

/* Top block stays at the top */
.top-block {
    flex: 0 0 auto;
    background: rgba(216, 216, 216, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); /* ADDED: iOS Safari prefix */
    border-radius: 10px;
    padding: 30px 0px 30px 0px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.45);
    transform: translateZ(0);
}

/* This area expands and distributes its children evenly */
.flex-spacer {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
    gap: 30px;
}

/* Fallback for browsers without dvh support */
@supports not (height: 100dvh) {
    .middle-column {
        min-height: 100vh; /* ADDED: fallback */
    }
}


/* Container inside flex-spacer that we will mask */


/* Container inside flex-spacer that we will mask */
.fx-content {
    display: flex;
    flex-direction: column;
    gap: 30px; /* same spacing you were using */
    /* ADDED: make this a stable, isolated GPU layer */
    isolation: isolate;
    contain: paint; /* prevent bleed during transitions */
    will-change: opacity, -webkit-mask-position, mask-position;
    transform: translateZ(0); /* force compositing on iOS */
    backface-visibility: hidden; /* reduce flicker during mask moves */
}


    /* Enable mask only during transitions */
    .fx-content.wipe {
        --feather: 10%; /* Feather width (soft edge of the fade) */
        /* Use white (opaque) ? transparent gradient at 45deg (TL ? BR) */
        -webkit-mask-image: linear-gradient( 45deg, rgba(255,255,255,1) calc(50% - var(--feather)), rgba(255,255,255,0) calc(50% + var(--feather)) );
        mask-image: linear-gradient( 45deg, rgba(255,255,255,1) calc(50% - var(--feather)), rgba(255,255,255,0) calc(50% + var(--feather)) );
        -webkit-mask-size: 300% 300%;
        mask-size: 300% 300%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        /* CHANGED: also transition opacity */
        transition: -webkit-mask-position 1s ease, mask-position 1s ease, opacity 1s ease;
        /* Default visible */
        opacity: 1;
    }

        /* Fade OUT: start (fully visible) -> end (invisible) */
        .fx-content.wipe.wipe-start {
            -webkit-mask-position: 0% 0%;
            mask-position: 0% 0%;
            /* visible here */
            opacity: 1; /* explicit for clarity */
        }

        .fx-content.wipe.wipe-end {
            -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
            /* ADDED: truly invisible at the end of the wipe-out */
            opacity: 0;
            pointer-events: none; /* optional: avoid clicks while hidden */
        }

        /* Fade IN (reverse): start hidden at BR -> run to TL (visible) */
        .fx-content.wipe.wipe-in-start {
            -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
            /* ADDED: start hidden */
            opacity: 0;
            pointer-events: none;
        }

        .fx-content.wipe.wipe-in-run {
    /* same flipped gradient, keep moving to BR as we reveal */
    -webkit-mask-image: linear-gradient(
        var(--angle),
        rgba(255,255,255,0) calc(50% - var(--feather)),
        rgba(255,255,255,1) calc(50% + var(--feather))
    );
    mask-image: linear-gradient(
        var(--angle),
        rgba(255,255,255,0) calc(50% - var(--feather)),
        rgba(255,255,255,1) calc(50% + var(--feather))
    );

    /* CHANGED: finish past BR, now fully visible */
    -webkit-mask-position: 150% 150%;
    mask-position: 150% 150%;
    opacity: 1;
    pointer-events: auto;
}

/* Accessibility: reduce motion support */
@media (prefers-reduced-motion: reduce) {
    .fx-content.wipe {
        transition: none !important;
    }
}