.local-area-story {
    flex-direction: row;
    gap:0;
    width:100vw;
    align-items: flex-start;
    max-width: var(--maxWidthPX);
    padding-top:0;
    padding-bottom:0;
}
.local-area-story > * {
    display: flex;
    flex-direction: column;
    flex: 0 0 50%;
    padding: 0;
}
.local-area-story > .area-story-control {
    min-height: 100vh;
    position: sticky;
    top:0;
}
.local-area-story .area-story-canvas {
    height: 100%;
    position: absolute;
    inset: 0;
    top: 0;
    left: auto;
    right: 0;
    width: 50vw;
    max-width: calc(1920px + clamp(0, ((250 / 1920) * 1920px), 250px));
    border-radius: 0;
    mask: linear-gradient(to left, black 0%, transparent calc(1920px + clamp(0, ((250 / 1920) * 1920px), 250px)));
}
.local-area-story .area-story-canvas > * {
    will-change: transform, opacity;
    backface-visibility: hidden; /* Forces the GPU to treat this as a separate layer */
    transform: translateZ(0);     /* Another way to trigger hardware acceleration */
}
.local-area-story .area-story-canvas .map-bg,
.local-area-story .area-story-canvas .map-bg picture,
.local-area-story .area-story-canvas .map-bg picture img {
    height: 100%;
    width: 100%;
    border-radius: 0;
    object-fit: cover;
}
.local-area-story .area-story-canvas h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity var(--anim-duration) var(--anim-easing);
}
.local-area-story > .area-story {
    padding-left: var(--block-padding-x);
}
.local-area-story > .area-story > [data-chapter] {
    min-height: 85vh;
}
.local-area-story > .area-story > [data-chapter]:last-of-type {
    min-height: 0;
}
[data-active-local-area='1'] h2.perfect-balance {
    opacity: 1; /*calc(var(--progress-local-area) / 100%);*/
}
[data-active-local-area='2'] h2.perfect-balance {
    opacity: 0;
}
[data-active-local-area='2'] h2.everything-you-need {
    opacity: 1; /*calc(var(--progress-local-area) / 100%);*/
}