#location-journey {
    position: relative;
    width: 100vw;
    height: 250vh;
    /* Increased to give more scrolling room which slows the animation */
    background: var(--gradient-sky-journey);
    display: flex;
    align-items: flex-start;
    overflow: visible;
    z-index: 10;
    transition: background 0.8s ease;
    /* Smooth toggle transition */
}

.clouds-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 11;
    pointer-events: none;
}

.cloud {
    position: absolute;
    will-change: transform;
}

.c1 {
    top: 5%;
    left: -20%;
    width: 50vw;
    /* opacity: 0.15; */
    filter: blur(4px);
    animation: floatHorizontal 40s linear infinite, floatVertical 10s ease-in-out infinite alternate;
}

.c2 {
    top: 25%;
    right: -20%;
    width: 70vw;
    /* opacity: 0.1; */
    filter: blur(8px);
    animation: floatHorizontalRev 55s linear infinite, floatVertical 15s ease-in-out infinite alternate;
}

.c3 {
    top: 45%;
    left: 10%;
    width: 40vw;
    /* opacity: 0.2; */
    filter: blur(2px);
    animation: floatHorizontal 60s linear infinite, floatVertical 12s ease-in-out infinite alternate;
}

.c4 {
    top: 65%;
    right: 5%;
    width: 60vw;
    /* opacity: 0.12; */
    filter: blur(6px);
    animation: floatHorizontalRev 45s linear infinite, floatVertical 14s ease-in-out infinite alternate;
}

.c5 {
    top: 85%;
    left: -10%;
    width: 80vw;
    /* opacity: 0.08; */
    filter: blur(10px);
    animation: floatHorizontal 70s linear infinite, floatVertical 20s ease-in-out infinite alternate;
}

@keyframes floatHorizontal {
    0% {
        transform: translateX(0vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

@keyframes floatHorizontalRev {
    0% {
        transform: translateX(0vw);
    }

    100% {
        transform: translateX(-120vw);
    }
}

@keyframes floatVertical {
    0% {
        margin-top: 0;
    }

    100% {
        margin-top: 40px;
    }
}

.location-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    /* Remove flex so elements stack naturally in the document flow */
    z-index: 20;
}

.location-left {
    position: relative;
    width: 45%;
    display: flex;
    flex-direction: column;
    padding: 0 5%;
    margin-top: -100vh;
    /* Pulled up over the sticky background layer */
    z-index: 15;
    pointer-events: none;
    /* Let clicks pass through if needed */
}

.journey-intro,
.journey-text-block {
    pointer-events: auto;
    /* Restore interaction for text blocks */
}

.journey-intro {
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.journey-heading {
    font-family: var(--font-heading);
    font-size: clamp(60px, 12vw, 150px);
    color: var(--text-dark);
    line-height: 0.9;
    letter-spacing: -5px;
    font-weight: 500;
    margin-bottom: 20px;
}

.journey-subheading {
    font-family: var(--font-main);
    font-size: clamp(16px, 2vw, 24px);
    color: var(--color-slate);
    font-weight: 400;
}

.journey-text-block {
    height: 70vh;
    /* Reduced from 100vh to prevent overlapping past the container */
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(80px);
}

.journey-text-block p {
    font-family: var(--font-paragraph-text);
    font-size: clamp(12px, 2vw, 20px);
    color: var(--text-muted);
    font-weight: 300;
    /* line-height: 1.2; */
}

.location-name {
    font-family: var(--font-main);
    font-size: 5em;
    display: block;
    letter-spacing: -5px;
    /* margin-top: 10px; */
    color: var(--text-dark);
    text-shadow: 0 4px 20px var(--rgba-black-10);
}

.location-right {
    width: 100vw;
    height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    pointer-events: none;
}

.journey-canvas-container {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Dark Mode Cloud Adjustments */
body.dark-knight-mode .cloud {
    filter: brightness(0.2) contrast(1.2) drop-shadow(0 0 15px rgba(255, 255, 255, 0.05));
    opacity: 0.3;
}