/* Shared, local SVG scene. Each language supplies only its routes and city names. */
.hero-visual.journey {
  position: relative;
  display: block;
  width: 100%;
  max-width: 660px;
  margin-inline: auto;
  padding: 30px 22px 24px;
  border: 1px solid #e3ded5;
  border-radius: 28px;
  background: linear-gradient(145deg, #fffdf8, #f1eee5);
  box-shadow: 0 18px 50px -30px #65777750;
  text-align: left;
  isolation: isolate;
}
.journey-heading { padding-inline: 4px; }
.journey-kicker { font: 10px/1.5 -apple-system, 'Segoe UI', sans-serif; letter-spacing: 2px; color: var(--blue); }
.journey-heading h2 { font: normal clamp(21px, 2vw, 27px)/1.25 Georgia, serif; margin: 10px 20px 0 0; }
.journey-map { position: relative; margin: 24px -15px 4px; aspect-ratio: 600 / 310; pointer-events: none; }
.journey-map svg { width: 100%; height: 100%; overflow: visible; }
.journey-map image { opacity: .65; }

/* Thin arcs; the gradient (set per route in the markup) fades both ends. */
.journey-stop-color { stop-color: var(--blue); }
.journey-arc { stroke-width: 1.2; stroke-linecap: butt; }
.journey-pin { fill: var(--accent); stroke: #fffdf8; stroke-width: 1; opacity: .85; }
/* Light city names, no card: a thin halo keeps them legible over the dotted map. */
.journey-label {
  fill: var(--primary);
  fill-opacity: .6;
  font: 10px -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: .2px;
  paint-order: stroke;
  stroke: #fbf9f2;
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-opacity: .9;
}
.journey-label--home { fill-opacity: .8; font-weight: 600; }

.journey-toggle { position: absolute; top: 12px; right: 12px; display: block; border: 1px solid #d6ded9; border-radius: 50%; width: 30px; height: 30px; background: transparent; color: var(--blue); cursor: pointer; }
.journey-toggle[hidden] { display: none; }
.journey-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* One 13s cycle. Flights overlap, linger and fade independently; --delay staggers
   them, and a chained leg (New York → São Paulo) starts as the previous one lands.
   Without animation (reduced motion / no JS) every route is simply drawn in full. */
@media (prefers-reduced-motion: no-preference) {
  .journey[data-animated] .journey-route { animation: journey-route 13s linear var(--delay) infinite both; }
  .journey[data-animated] .journey-arc { stroke-dasharray: 1; animation: journey-draw 13s linear var(--delay) infinite both; }
  .journey[data-animated] .journey-stop { animation: journey-arrive 13s ease var(--delay) infinite both; }
  .journey[data-animated] .journey-route--short .journey-arc { animation-name: journey-draw-short; }
  .journey[data-animated] .journey-route--short .journey-stop { animation-name: journey-arrive-short; }
  .journey[data-paused] * { animation-play-state: paused !important; }
}
@keyframes journey-route { 0%, 100% { opacity: 0; } 5%, 73% { opacity: 1; } 92% { opacity: 0; } }
@keyframes journey-draw { 0%, 5% { stroke-dashoffset: 1; } 35%, 100% { stroke-dashoffset: 0; } }
@keyframes journey-draw-short { 0%, 5% { stroke-dashoffset: 1; } 20%, 100% { stroke-dashoffset: 0; } }
@keyframes journey-arrive { 0%, 33% { opacity: 0; } 41%, 100% { opacity: 1; } }
@keyframes journey-arrive-short { 0%, 18% { opacity: 0; } 26%, 100% { opacity: 1; } }

@media (max-width: 640px) {
  .hero-visual.journey { max-width: 440px; padding: 22px 14px 16px; border-radius: 22px; }
  .journey-heading h2 { font-size: 23px; }
  .journey-map { margin: 18px -7px 2px; }
  /* The map scales to ~0.55 on phones: enlarge strokes and names in map units. */
  .journey-arc { stroke-width: 1.9; }
  .journey-pin { r: 3.6px; stroke-width: 1.4; }
  .journey-label { font-size: 16px; stroke-width: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-toggle { display: none; }
}