/* ── Journey overlay — scenic backgrounds per stage ── */

.journey-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
    overflow: hidden;
}

.journey-scene {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    transform: scale(1);
    transform-origin: center bottom;
    transition: opacity 1s ease, transform 1.4s ease;
    will-change: opacity, transform;
}

.journey-scene svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Active scene per stage ── */
.stage-red .scene-valley              { opacity: 1; }
.stage-orange .scene-valley           { opacity: 1; transform: scale(1.6); }
.stage-orange-muted .scene-valley     { opacity: 1; transform: scale(1.6); }
.stage-green .scene-forest            { opacity: 1; }
.stage-green-sage .scene-forest       { opacity: 1; }
.stage-yellow .scene-summit           { opacity: 1; }
.stage-purple .scene-valley           { opacity: 1; }

/* ── Sub-step zoom within each stage (set via JS data-zoom attribute) ── */
.stage-red .scene-valley[data-zoom="1"]    { transform: scale(1.06); }
.stage-red .scene-valley[data-zoom="2"]    { transform: scale(1.12); }
.stage-red .scene-valley[data-zoom="3"]    { transform: scale(1.18); }
.stage-red .scene-valley[data-zoom="4"]    { transform: scale(1.24); }
.stage-red .scene-valley[data-zoom="5"]    { transform: scale(1.30); }

.stage-orange .scene-valley[data-zoom="0"]       { transform: scale(1.6); }
.stage-orange .scene-valley[data-zoom="1"]       { transform: scale(1.7); }
.stage-orange .scene-valley[data-zoom="2"]       { transform: scale(1.8); }
.stage-orange .scene-valley[data-zoom="3"]       { transform: scale(1.9); }
.stage-orange .scene-valley[data-zoom="4"]       { transform: scale(2.0); }
.stage-orange .scene-valley[data-zoom="5"]       { transform: scale(2.1); }
.stage-orange-muted .scene-valley[data-zoom="0"] { transform: scale(1.6); }
.stage-orange-muted .scene-valley[data-zoom="1"] { transform: scale(1.7); }
.stage-orange-muted .scene-valley[data-zoom="2"] { transform: scale(1.8); }
.stage-orange-muted .scene-valley[data-zoom="3"] { transform: scale(1.9); }
.stage-orange-muted .scene-valley[data-zoom="4"] { transform: scale(2.0); }
.stage-orange-muted .scene-valley[data-zoom="5"] { transform: scale(2.1); }

.stage-green .scene-forest[data-zoom="1"]      { transform: scale(1.06); }
.stage-green .scene-forest[data-zoom="2"]      { transform: scale(1.12); }
.stage-green .scene-forest[data-zoom="3"]      { transform: scale(1.18); }
.stage-green .scene-forest[data-zoom="4"]      { transform: scale(1.24); }
.stage-green .scene-forest[data-zoom="5"]      { transform: scale(1.30); }
.stage-green-sage .scene-forest[data-zoom="1"] { transform: scale(1.06); }
.stage-green-sage .scene-forest[data-zoom="2"] { transform: scale(1.12); }
.stage-green-sage .scene-forest[data-zoom="3"] { transform: scale(1.18); }
.stage-green-sage .scene-forest[data-zoom="4"] { transform: scale(1.24); }
.stage-green-sage .scene-forest[data-zoom="5"] { transform: scale(1.30); }

.stage-yellow .scene-summit[data-zoom="1"]  { transform: scale(1.06); }
.stage-yellow .scene-summit[data-zoom="2"]  { transform: scale(1.12); }
.stage-yellow .scene-summit[data-zoom="3"]  { transform: scale(1.18); }
.stage-yellow .scene-summit[data-zoom="4"]  { transform: scale(1.24); }
.stage-yellow .scene-summit[data-zoom="5"]  { transform: scale(1.30); }

.stage-purple .scene-valley[data-zoom="1"]  { transform: scale(1.06); }
.stage-purple .scene-valley[data-zoom="2"]  { transform: scale(1.12); }
.stage-purple .scene-valley[data-zoom="3"]  { transform: scale(1.18); }
.stage-purple .scene-valley[data-zoom="4"]  { transform: scale(1.24); }
.stage-purple .scene-valley[data-zoom="5"]  { transform: scale(1.30); }

/* Outgoing scenes fade and zoom out — override sub-step zooms */
.stage-green .scene-valley[data-zoom],
.stage-green .scene-valley              { opacity: 0; transform: scale(2); }
.stage-green-sage .scene-valley[data-zoom],
.stage-green-sage .scene-valley         { opacity: 0; transform: scale(2); }
.stage-yellow .scene-valley[data-zoom],
.stage-yellow .scene-valley             { opacity: 0; transform: scale(2.5); }
.stage-yellow .scene-forest[data-zoom],
.stage-yellow .scene-forest             { opacity: 0; transform: scale(1.15); }
.stage-purple .scene-forest[data-zoom],
.stage-purple .scene-forest             { opacity: 0; }
.stage-purple .scene-summit[data-zoom],
.stage-purple .scene-summit             { opacity: 0; }