/* ==========================================================================
   Roadmap Theme — paper-map feel, asphalt, pin markers, highway signs, car
   ========================================================================== */

/* ---------- Paper-map grid on journey ---------- */
.journey__container {
  background-image:
    linear-gradient(rgba(67, 84, 100, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 84, 100, 0.05) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  background-position: center center;
}

.journey::after {
  background-image: radial-gradient(circle, rgba(67, 84, 100, 0.07) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: 0 0;
}

/* ---------- Asphalt + animated dashed stripe ---------- */
@media (min-width: 768px) {
  .road-segment {
    background:
      radial-gradient(rgba(0, 0, 0, 0.14) 0.8px, transparent 1.6px) 0 0 / 7px 7px,
      radial-gradient(rgba(255, 255, 255, 0.04) 0.8px, transparent 1.6px) 3px 3px / 11px 11px,
      linear-gradient(180deg, #627283 0%, #4c5b6a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
  }

  /* Edge stripes (white outer lines of a highway) */
  .road-segment::after {
    content: '';
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    top: 10px;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 calc(100% + -22px - 2px) 0 rgba(255, 255, 255, 0.12);
    pointer-events: none;
  }

  /* Upgraded marching dashes */
  .road-segment::before {
    background: repeating-linear-gradient(
      to right,
      var(--orange) 0px,
      var(--orange) 24px,
      transparent 24px,
      transparent 44px
    ) !important;
    opacity: 0.6 !important;
    height: 4px !important;
    background-size: 68px 100% !important;
    animation: roadMarch 5s linear infinite;
    box-shadow: 0 0 10px rgba(250, 173, 98, 0.25);
  }

  .road-row--2 .road-segment::before {
    animation-direction: reverse;
  }

  @keyframes roadMarch {
    from { background-position: 0 0; }
    to   { background-position: 68px 0; }
  }

  /* Animated car silhouette driving across the road */
  .road-segment {
    /* car layer uses background image at top */
  }

  .road-row .road-segment {
    position: relative;
  }

  .road-row .road-segment::before {
    /* already dashed line; keep */
  }

  /* Put the car on an extra element via background layer */
  .road-row::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 38px;
    height: 22px;
    transform: translateY(-60%);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'><g fill='%23faad62'><path d='M4 22 L8 12 Q10 8 14 8 L44 8 Q50 8 54 14 L60 18 Q62 19 62 22 L62 26 Q62 28 60 28 L56 28 Q54 24 50 24 Q46 24 44 28 L22 28 Q20 24 16 24 Q12 24 10 28 L6 28 Q4 28 4 26 Z'/></g><g fill='%23243240'><circle cx='14' cy='26' r='4'/><circle cx='48' cy='26' r='4'/></g><g fill='%23a8c5e0' opacity='0.75'><path d='M18 11 L32 11 L32 18 L20 18 Z'/><path d='M34 11 L44 11 Q48 11 50 16 L50 18 L34 18 Z'/></g></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    animation: carDrive 14s linear infinite;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
  }

  .road-row--2::after {
    animation-name: carDriveReverse;
    transform: translateY(-60%) scaleX(-1);
  }

  @keyframes carDrive {
    0%   { left: -60px; }
    100% { left: calc(100% + 20px); }
  }

  @keyframes carDriveReverse {
    0%   { left: calc(100% + 20px); }
    100% { left: -60px; }
  }

  .road-row {
    position: relative;
  }
}

/* ---------- Pin-style step nodes (desktop only) ---------- */
@media (min-width: 768px) {
  .step__node {
    /* Give more room for the pin tip */
    margin-bottom: 6px;
  }

  .step__node::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 16px;
    height: 16px;
    background: rgba(67, 84, 100, 0.9);
    border-right: 3px solid rgba(255, 255, 255, 0.2);
    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
    transform: translateX(-50%) rotate(45deg);
    z-index: 0;
    transition: background var(--duration-normal) var(--ease-smooth),
                border-color var(--duration-normal) var(--ease-smooth),
                box-shadow var(--duration-normal) var(--ease-smooth);
  }

  .step.is-active .step__node::after {
    background: var(--orange);
    border-right-color: var(--orange);
    border-bottom-color: var(--orange);
    box-shadow: 3px 3px 12px rgba(250, 173, 98, 0.45);
  }

  .step__node--final::after {
    background: #FFD700;
    border-right-color: #FFD700;
    border-bottom-color: #FFD700;
  }

  /* Slight shadow beneath pin on ground */
  .step::before {
    content: '';
    position: absolute;
    top: 68px;
    left: 50%;
    width: 28px;
    height: 6px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
  }
}

/* ---------- Highway-sign phase labels (desktop) ---------- */
@media (min-width: 768px) {
.phase {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.phase__label {
  position: relative;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0.75rem 2.4rem !important;
  background: linear-gradient(180deg, #2f3c48 0%, #435464 100%) !important;
  border: 2px solid var(--orange) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 0 0 3px rgba(15, 22, 30, 0.6),
    inset 0 0 0 4px rgba(250, 173, 98, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.45),
    0 2px 0 rgba(255, 255, 255, 0.08) !important;
  text-align: center !important;
  transform: perspective(700px) rotateX(3deg);
  transform-origin: center bottom;
  transition:
    transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 400ms var(--ease-smooth);
}

.phase__label:hover {
  transform: perspective(700px) rotateX(0deg) rotateZ(-1.5deg) translateY(-3px) scale(1.03);
  box-shadow:
    inset 0 0 0 3px rgba(15, 22, 30, 0.6),
    inset 0 0 0 4px rgba(250, 173, 98, 0.85),
    0 18px 36px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(250, 173, 98, 0.35),
    0 2px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Sign posts */
.phase__label::before,
.phase__label::after {
  content: '';
  position: absolute;
  bottom: -26px;
  width: 5px;
  height: 26px;
  background: linear-gradient(
    to bottom,
    rgba(170, 170, 170, 0.55) 0%,
    rgba(90, 100, 110, 0.85) 100%
  );
  border-radius: 1px 1px 0 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.phase__label::before { left: 18%; }
.phase__label::after  { right: 18%; }

.phase__number {
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  color: var(--orange) !important;
}

.phase__title {
  font-size: 1.45rem !important;
  color: var(--white) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
} /* end @media min-width 768 */

/* ---------- Scale down highway sign on mobile ---------- */
@media (max-width: 767px) {
  .phase {
    justify-content: flex-start;
    margin-top: var(--space-xl);
  }

  .phase__label {
    padding: 0.6rem 1.25rem !important;
    transform: none;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .phase__label::before,
  .phase__label::after {
    display: none;
  }

  .phase__number {
    font-size: 0.78rem !important;
  }

  .phase__title {
    font-size: 1.25rem !important;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .road-segment::before,
  .road-row::after {
    animation: none !important;
  }
}