/* ── Journey Section ── */
.journey {
  position: relative;
  height: 100vh;
  height: 100dvh;
  padding: 3rem 0 0;
  --journey-bg: var(--bg-primary);
  background-color: var(--bg-primary);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  transition: background-color 0.6s ease;
}

.journey::-webkit-scrollbar {
  display: none;
}

/* Stage-reactive background — subtle mood shift as user scrolls */
.journey[data-active-stage="apply"]    { --journey-bg: #f1f8e9; background-color: #f1f8e9; }
.journey[data-active-stage="build"]    { --journey-bg: #e8f4fd; background-color: #e8f4fd; }
.journey[data-active-stage="wait"]     { --journey-bg: #fff8e1; background-color: #fff8e1; }
.journey[data-active-stage="toll"]     { --journey-bg: #78909c; background-color: #78909c; }
.journey[data-active-stage="decision"] { --journey-bg: #f3e5f5; background-color: #f3e5f5; }

[data-theme="dark"] .journey[data-active-stage="apply"]    { --journey-bg: #1a2e1a; background-color: #1a2e1a; }
[data-theme="dark"] .journey[data-active-stage="build"]    { --journey-bg: #0d1f2d; background-color: #0d1f2d; }
[data-theme="dark"] .journey[data-active-stage="wait"]     { --journey-bg: #2a2000; background-color: #2a2000; }
[data-theme="dark"] .journey[data-active-stage="toll"]     { --journey-bg: #0d1117; background-color: #0d1117; }
[data-theme="dark"] .journey[data-active-stage="decision"] { --journey-bg: #1f1525; background-color: #1f1525; }

.journey-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 3.5rem;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}

/* Road container */
.journey-road {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* SVG road line */
.journey-road svg.road-svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  overflow: visible;
  z-index: 1;
}

.road-line {
  stroke: var(--border-color);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
}

.road-line-progress {
  stroke: url(#roadGradient);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: var(--road-length);
  stroke-dashoffset: var(--road-length);
  transition: stroke-dashoffset 0.1s linear;
}

/* Traveling dot */
.journey-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 0 0 12px rgba(255, 107, 107, 0.5), 0 0 24px rgba(255, 107, 107, 0.2);
  z-index: 5;
  transition: top 0.1s linear, background 0.3s, box-shadow 0.3s;
}

.journey-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 107, 107, 0.3);
  animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.6); opacity: 0; }
}

/* Dot color by stage (driven by data-stage attribute) */
.journey-dot[data-stage="apply"]    { background: #4caf50; box-shadow: 0 0 12px rgba(76,175,80,.5); }
.journey-dot[data-stage="build"]    { background: #2196f3; box-shadow: 0 0 12px rgba(33,150,243,.5); }
.journey-dot[data-stage="wait"]     { background: #ff9800; box-shadow: 0 0 12px rgba(255,152,0,.5); }
.journey-dot[data-stage="toll"]     { background: #d32f2f; box-shadow: 0 0 12px rgba(211,47,47,.5); }
.journey-dot[data-stage="decision"] { background: #9c27b0; box-shadow: 0 0 12px rgba(156,39,176,.5); }

.journey-dot[data-stage="apply"]::after    { border-color: rgba(76,175,80,.3); }
.journey-dot[data-stage="build"]::after    { border-color: rgba(33,150,243,.3); }
.journey-dot[data-stage="wait"]::after     { border-color: rgba(255,152,0,.3); }
.journey-dot[data-stage="toll"]::after     { border-color: rgba(211,47,47,.3); }
.journey-dot[data-stage="decision"]::after { border-color: rgba(156,39,176,.3); }

/* Stage cards */
.journey-stage {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 5rem;
  z-index: 2;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.journey-stage.visible {
  opacity: 1;
  transform: translateY(0);
}

.journey-stage:last-child {
  margin-bottom: 0;
}

/* Alternating layout */
.journey-stage:nth-child(odd) {
  flex-direction: row;
  padding-right: calc(50% + 40px);
}

.journey-stage:nth-child(even) {
  flex-direction: row-reverse;
  padding-left: calc(50% + 40px);
}

/* Node on the road */
.stage-node {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  flex-shrink: 0;
  border: 3px solid var(--bg-primary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* Card */
.stage-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  max-width: 320px;
  width: 100%;
  position: relative;
}

.stage-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  line-height: 1.3;
  color: var(--text-primary);
}

.stage-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Illustration area */
.stage-illustration {
  width: 100%;
  height: 120px;
  border-radius: 10px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* ── Stage 1: Apply ── */
.stage-apply .stage-node { background: linear-gradient(135deg, #4caf50, #66bb6a); }
.stage-apply .stage-illustration { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }

[data-theme="dark"] .stage-apply .stage-illustration { background: linear-gradient(135deg, #1b3d1f, #2e5930); }

.paper-plane { animation: fly 3s ease-in-out infinite; }
@keyframes fly {
  0%, 100% { transform: translate(0, 0) rotate(-5deg); }
  50% { transform: translate(8px, -12px) rotate(5deg); }
}

/* ── Stage 2: Build Life ── */
.stage-build .stage-node { background: linear-gradient(135deg, #2196f3, #42a5f5); }
.stage-build .stage-illustration { background: linear-gradient(135deg, #e3f2fd, #bbdefb); }

[data-theme="dark"] .stage-build .stage-illustration { background: linear-gradient(135deg, #0d2137, #1a3a5c); }

.build-scene .build-item { animation: build-pop 0.6s ease both; }
.build-scene .build-item:nth-child(2) { animation-delay: 0.15s; }
.build-scene .build-item:nth-child(3) { animation-delay: 0.3s; }
.build-scene .build-item:nth-child(4) { animation-delay: 0.45s; }
@keyframes build-pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ── Stage 3: The Wait ── */
.stage-wait .stage-node {
  background: linear-gradient(135deg, #ff9800, #ffa726);
  animation: wait-pulse 2s ease-in-out infinite;
}
@keyframes wait-pulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(255, 152, 0, 0.2); }
  50% { box-shadow: 0 2px 24px rgba(255, 152, 0, 0.5); }
}

.stage-wait .stage-illustration { background: linear-gradient(135deg, #fff3e0, #ffe0b2); }

[data-theme="dark"] .stage-wait .stage-illustration { background: linear-gradient(135deg, #3d2800, #5c3d00); }

.clock-hand-m { transform-origin: 50% 50%; animation: clock-spin 4s linear infinite; }
.clock-hand-h { transform-origin: 50% 50%; animation: clock-spin 48s linear infinite; }
@keyframes clock-spin { to { transform: rotate(360deg); } }

.wait-days {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #e65100;
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 8px;
  border-radius: 99px;
}

[data-theme="dark"] .wait-days {
  background: rgba(0, 0, 0, 0.5);
  color: #ffb74d;
}

/* Fog overlay */
.fog {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(255, 243, 224, 0.6), transparent);
  animation: fog-drift 6s ease-in-out infinite;
}

[data-theme="dark"] .fog {
  background: linear-gradient(to right, transparent, rgba(60, 40, 0, 0.4), transparent);
}

@keyframes fog-drift {
  0%, 100% { transform: translateX(-20%); opacity: 0.4; }
  50% { transform: translateX(20%); opacity: 0.7; }
}

/* ── Full-section rain overlay (toll stage) ── */
.journey-rain-overlay {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin-bottom: -100vh;
  margin-bottom: -100dvh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.journey[data-active-stage="toll"] .journey-rain-overlay {
  opacity: 1;
}

.rain-bg-drop {
  position: absolute;
  width: 1.5px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.25));
  animation: rain-bg-fall linear infinite;
}

@keyframes rain-bg-fall {
  0% { transform: translateY(-30px); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* ── Stage 4: The Toll ── */
.stage-toll .stage-node { background: linear-gradient(135deg, #d32f2f, #e53935); }
.stage-toll .stage-illustration { background: linear-gradient(135deg, #37474f, #455a64); position: relative; }

/* Rain */
.rain { position: absolute; inset: 0; overflow: hidden; }
.raindrop {
  position: absolute;
  width: 1.5px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4));
  animation: rain-fall linear infinite;
}
@keyframes rain-fall {
  0% { transform: translateY(-20px); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(130px); opacity: 0; }
}

.toll-figure { opacity: 0.7; }

/* ── Stage 5: Decision ── */
.stage-decision .stage-node { background: linear-gradient(135deg, #7b1fa2, #9c27b0); }
.stage-decision .stage-illustration {
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  flex-direction: column;
  gap: 0.5rem;
}

[data-theme="dark"] .stage-decision .stage-illustration { background: linear-gradient(135deg, #2a1533, #3d1f4e); }

.fork-paths { display: flex; gap: 1.5rem; align-items: center; }
.fork-path {
  text-align: center;
  padding: 0.75rem;
  border-radius: 12px;
  transition: transform 0.3s;
}
.fork-path:hover { transform: scale(1.05); }
.fork-approve { background: rgba(76, 175, 80, 0.12); }
.fork-reject { background: rgba(211, 47, 47, 0.08); }
.fork-path svg { margin-bottom: 0.25rem; }
.fork-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; }
.fork-approve .fork-label { color: #2e7d32; }
.fork-reject .fork-label { color: #c62828; }

[data-theme="dark"] .fork-approve .fork-label { color: #81c784; }
[data-theme="dark"] .fork-reject .fork-label { color: #e57373; }

/* ── CTA ── */
.journey-cta {
  text-align: center;
  margin-top: 3rem;
  padding-bottom: 5rem;
  position: relative;
  z-index: 2;
}

.journey-cta p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.journey-cta a {
  display: inline-block;
  padding: 0.65rem 1.75rem;
  background: linear-gradient(135deg, #ff6b6b, #ff5252);
  color: #fff;
  text-decoration: none;
  border-radius: 99px;
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: 0 2px 10px rgba(255, 107, 107, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.journey-cta a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

/* ── Scroll hint (sticky bottom fade + chevron) ── */
.journey-scroll-hint {
  position: sticky;
  bottom: 0;
  height: 72px;
  margin-top: -72px;
  background: linear-gradient(to bottom, transparent, var(--journey-bg, var(--bg-secondary)));
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
  transition: opacity 0.3s;
}

.journey-scroll-hint.hidden {
  opacity: 0;
}

.journey-scroll-hint::after {
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid var(--text-secondary);
  border-right: 2px solid var(--text-secondary);
  transform: rotate(45deg);
  opacity: 0.5;
  animation: scroll-bounce 1.5s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(5px); }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .journey-stage:nth-child(odd),
  .journey-stage:nth-child(even) {
    flex-direction: column;
    align-items: center;
    padding: 0 1.5rem;
    text-align: center;
  }

  .stage-node {
    position: relative;
    left: auto;
    transform: none;
    margin-bottom: 1rem;
  }

  .journey {
    overscroll-behavior-y: auto;
    transition: background-color 0.15s ease;
  }

  .stage-card { max-width: 100%; }

  .journey-road svg.road-svg { opacity: 0.25; }

  .journey-dot {
    width: 10px;
    height: 10px;
    margin-left: -5px;
    z-index: 1;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .paper-plane,
  .build-scene .build-item,
  .clock-hand-m,
  .clock-hand-h,
  .fog,
  .raindrop,
  .rain-bg-drop,
  .journey-dot::after,
  .stage-wait .stage-node,
  .journey-scroll-hint::after {
    animation: none;
  }

  .journey-stage {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .road-line-progress,
  .journey-dot {
    transition: none;
  }

  .journey {
    transition: none;
  }
}

/* ── RTL support ── */
[dir="rtl"] .wait-days {
  right: auto;
  left: 12px;
}