.journey-scene {
    position: relative;
    overflow: hidden;
    width: 100%;
    border: 1px solid rgba(190, 216, 204, .9);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(246, 252, 249, .96), rgba(232, 246, 240, .9));
    box-shadow: 0 30px 80px rgba(7, 26, 21, .1), inset 0 1px 0 rgba(255, 255, 255, .9);
    isolation: isolate;
}

.journey-scene::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 -34px 54px rgba(7, 26, 21, .06);
    content: '';
    pointer-events: none;
}

.journey-scene svg {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * The SVG is drawn as the "bus at the stop / traveler waiting" freeze-frame,
 * so with no JavaScript (or reduced motion) the scene is complete as-is.
 * Elements that only make sense mid-animation start hidden here; the GSAP
 * timeline re-stages everything when motion is allowed.
 */
.journey-scene .scan-callout,
.journey-scene .speed-streaks,
.journey-scene .dust,
.journey-scene .door-glow,
.journey-scene .door-interior,
.journey-scene .headlight-cone,
.journey-scene .seated-passenger,
.journey-scene .w-phone-glow {
    opacity: 0;
}

.journey-scene .scan-check {
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
}

.journey-scene .bus,
.journey-scene .walker,
.journey-scene .bus-core,
.journey-scene .cloud-a,
.journey-scene .cloud-b,
.journey-scene .cloud-c,
.journey-scene .birds,
.journey-scene .tree-crown {
    will-change: transform;
}

.journey-scene .wheel-spin,
.journey-scene .w-leg-f,
.journey-scene .w-leg-b,
.journey-scene .w-calf-f,
.journey-scene .w-calf-b,
.journey-scene .w-arm-f,
.journey-scene .w-arm-b,
.journey-scene .w-forearm-f,
.journey-scene .w-pony,
.journey-scene .w-case,
.journey-scene .scan-callout {
    transform-box: fill-box;
    will-change: transform, opacity;
}

@media (max-width: 620px) {
    .journey-scene {
        border-radius: 18px;
    }
}