/* =====================================================================
   Neckar Journey — homepage scroll experience.
   A drawn river-path weaves between isometric diorama "stops"; a punt
   boat travels it as you scroll (see journey.js). Cool teal/blue palette
   to match the water in the dioramas and the site's indigo brand.
   ===================================================================== */

.journey {
    position: relative;
    padding: 1rem 0 2rem;
}

/* ---- Section intro ---- */
.journey__head {
    max-width: 64ch;
    margin: 0 auto;
    padding: 0 1.25rem;
    text-align: center;
}
.journey__intro {
    margin: 0.9rem auto 0;
    max-width: 52ch;
    color: var(--text-color);
    font-size: var(--normal-font-size);
    line-height: 1.7;
}

/* ---- Track that holds the path + the stops ---- */
.journey__track {
    position: relative;
    max-width: 1120px;
    margin: 1.5rem auto 0;
    padding: 1rem clamp(1rem, 4vw, 2.5rem);
}

.journey__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}
/* The river itself — a wide water ribbon the boat floats down. */
.journey__river {
    fill: none;
    stroke: url(#riverGrad);
    stroke-width: clamp(13px, 2.4vw, 22px);
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.6;
    filter: drop-shadow(0 2px 6px hsla(200, 80%, 8%, 0.5));
}
/* Flowing current — little light dashes drifting downstream. */
.journey__flow {
    fill: none;
    stroke: hsla(190, 95%, 86%, 0.55);
    stroke-width: clamp(4px, 1vw, 7px);
    stroke-linecap: round;
    stroke-dasharray: 3 24;
    animation: riverFlow 2.6s linear infinite;
}
@keyframes riverFlow {
    to { stroke-dashoffset: -54; }
}
/* The wake the boat has already travelled — bright trail showing progress. */
.journey__path {
    fill: none;
    stroke: url(#journeyGrad);
    stroke-width: clamp(2px, 0.5vw, 3.5px);
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px hsla(190, 95%, 72%, 0.7));
}

/* ---- The travelling punt boat ---- */
.journey__boat {
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;
    z-index: 3;
    opacity: 0;
    will-change: transform, opacity;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.5));
    transition: opacity 0.3s ease;
}
.journey__boat svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
/* Wake trailing behind the boat (it points +x, so the wake sits to the
   left and rotates along with the hull). */
.journey__boat::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 56%;
    width: 48px;
    height: 11px;
    transform: translateY(-50%);
    background: linear-gradient(to left, hsla(190, 95%, 90%, 0.6), transparent 82%);
    border-radius: 7px;
    filter: blur(2px);
    z-index: 0;
}

/* ---- A stop ---- */
.stop {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 4.5vw, 3.5rem);
    min-height: 62vh;
    padding: 2rem 0;
}
.stop:nth-child(even) { flex-direction: row-reverse; }

.stop__diorama {
    flex: 0 1 47%;
    position: relative;
}
.stop__diorama img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 26px 38px rgba(0, 0, 0, 0.5));
}
/* Soft pool of light under each diorama. */
.stop__diorama::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 62%;
    height: 16px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, hsla(190, 95%, 60%, 0.30), transparent 70%);
    filter: blur(7px);
    z-index: -1;
}

.stop__card {
    flex: 1 1 44%;
    background: linear-gradient(160deg, hsla(220, 30%, 13%, 0.72), hsla(220, 30%, 9%, 0.72));
    border: 1px solid hsla(255, 100%, 100%, 0.08);
    border-radius: 1.15rem;
    padding: clamp(1.25rem, 3vw, 2.1rem);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    box-shadow: 0 20px 50px -22px rgba(0, 0, 0, 0.8);
}
.stop__num {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--small-font-size);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: hsl(190, 80%, 70%);
}
.stop__num::before {
    content: '';
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}
.stop__name {
    margin: 0.55rem 0 0.65rem;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.15;
    color: var(--title-color);
}
.stop__desc {
    margin: 0;
    max-width: 44ch;
    color: var(--text-color);
    line-height: 1.75;
}

/* ---- Reveal on arrival ----
   Hidden state is gated behind `.js` so content is never permanently
   invisible without scripting. The diorama fades only — journey.js owns
   its transform (camera parallax) — while the card slides in. */
.js .stop__diorama {
    opacity: 0;
    transition: opacity 0.85s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.js .stop__card {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity 0.85s cubic-bezier(0.16, 0.84, 0.44, 1),
                transform 0.85s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.js .stop:nth-child(odd)  .stop__card { transform: translate(40px, 12px); }
.js .stop:nth-child(even) .stop__card { transform: translate(-40px, 12px); }
.stop.is-active .stop__diorama { opacity: 1; }
.stop.is-active .stop__card {
    opacity: 1;
    transform: none;
    transition-delay: 0.12s;
}

/* Gentle perpetual bob once revealed. */
.stop.is-active .stop__diorama img {
    animation: stopBob 6.5s ease-in-out infinite;
}
@keyframes stopBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* ---- Mobile: stack, path runs roughly centre ---- */
@media (max-width: 820px) {
    .stop,
    .stop:nth-child(even) {
        flex-direction: column;
        text-align: center;
        gap: 1.4rem;
        min-height: auto;
        padding: 2.75rem 0;
    }
    .stop__diorama { flex: 1 1 auto; width: min(78%, 360px); }
    .stop__card    { flex: 1 1 auto; width: 100%; }
    .stop:nth-child(odd)  .stop__card,
    .stop:nth-child(even) .stop__card { transform: translateY(30px); }
    .stop__num { justify-content: center; }
    .stop__desc { margin-left: auto; margin-right: auto; }
    .journey__boat { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .stop__diorama,
    .stop__card { opacity: 1 !important; transform: none !important; transition: none; }
    .stop.is-active .stop__diorama img { animation: none; }
}