/* SALTA — interactive Curaçao route.
   Desktop: the section is tall, its inner panel sticks, and scroll progress
   draws the route while swapping the active destination.
   Mobile: no pinning at all — the same four stops become a vertical timeline. */

.route { background: var(--deep); color: var(--white); padding-block: 0; }
.route__head {
  padding-block: var(--sect-y) clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1.2rem;
}

/* --- desktop pinned stage --------------------------------------------- */
.route__scroller { position: relative; }
.route__stage {
  position: sticky;
  top: var(--header-h);
  min-height: calc(100svh - var(--header-h));
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 5vh, 4rem);
}

.route__map { position: relative; }
.route__svg { width: 100%; height: auto; overflow: visible; }

.island {
  fill: rgba(247, 247, 242, .05);
  stroke: rgba(247, 247, 242, .22);
  stroke-width: 1.4;
}
.island-glow { fill: url(#routeGlow); opacity: .5; }

.route-line-bg {
  fill: none;
  stroke: rgba(247, 247, 242, .18);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
}
.route-line {
  fill: none;
  stroke: url(#routeStroke);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: var(--route-len);
  stroke-dashoffset: calc(var(--route-len) * (1 - var(--route-progress, 0)));
}

.pin { cursor: pointer; }
.pin__hit { fill: transparent; }
.pin__ring {
  fill: none;
  stroke: var(--turq);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.pin__dot {
  fill: var(--deep);
  stroke: rgba(247, 247, 242, .55);
  stroke-width: 2;
  transition: fill var(--dur-fast) var(--ease-out), stroke var(--dur-fast) var(--ease-out);
}
.pin__label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  fill: var(--white-45);
  transition: fill var(--dur-fast) var(--ease-out);
}
.pin.is-active .pin__dot { fill: var(--lime); stroke: var(--lime); }
.pin.is-active .pin__label { fill: var(--lime); }
.pin.is-active .pin__ring { opacity: 1; animation: salta-pulse 1.9s var(--ease-out) infinite; }
.pin:hover .pin__dot { stroke: var(--turq); }

@keyframes salta-pulse {
  0%   { scale: .6; opacity: .9; }
  70%  { scale: 2.1; opacity: 0; }
  100% { scale: 2.1; opacity: 0; }
}

/* --- destination panel ------------------------------------------------- */
.route__panel { position: relative; display: grid; gap: 1.4rem; }
.route__slides { position: relative; aspect-ratio: 1 / 1; }
.route__slide {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  opacity: 0;
  scale: 1.04;
  transition: opacity .55s var(--ease-out), scale .8s var(--ease-out);
  pointer-events: none;
}
.route__slide.is-active { opacity: 1; scale: 1; pointer-events: auto; }
.route__slide img { width: 100%; height: 100%; object-fit: cover; }

/* All four blocks share one grid cell, so the box is exactly as tall as the
   longest of them — no guessed min-height to overflow. */
.route__texts { display: grid; }
.route__text {
  grid-area: 1 / 1;
  display: grid;
  gap: .6rem;
  align-content: start;
  opacity: 0;
  translate: 0 14px;
  transition: opacity .45s var(--ease-out), translate .55s var(--ease-out);
  pointer-events: none;
}
.route__text.is-active { opacity: 1; translate: 0 0; pointer-events: auto; }
.route__text h3 {
  font-size: var(--t-big);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.route__text p { color: var(--white-70); max-width: 40ch; }
.route__text .num { color: var(--lime); }

.route__progress {
  margin-top: .4rem;
  display: flex;
  gap: .5rem;
  align-items: center;
}
.route__progress li {
  height: 2px;
  flex: 1;
  background: var(--white-14);
  border-radius: 2px;
  overflow: hidden;
}
.route__progress li::after {
  content: '';
  display: block;
  height: 100%;
  background: var(--lime);
  scale: 0 1;
  transform-origin: left;
  transition: scale .4s var(--ease-out);
}
.route__progress li.is-done::after { scale: 1 1; }

/* --- mobile timeline ---------------------------------------------------- */
.route__timeline { display: none; }

@media (max-width: 900px) {
  .route__scroller { height: auto !important; }
  .route__stage { display: none; }
  .route__timeline {
    display: grid;
    gap: clamp(1.6rem, 5vw, 2.4rem);
    padding-bottom: var(--sect-y);
    position: relative;
  }
  .route__timeline::before {
    content: '';
    position: absolute;
    left: 9px; top: .8rem; bottom: 3rem;
    width: 2px;
    background: linear-gradient(var(--turq), var(--lime));
    opacity: .35;
    border-radius: 2px;
  }
  .route-stop {
    position: relative;
    display: grid;
    gap: .85rem;
    padding-left: 2.4rem;
  }
  .route-stop::before {
    content: '';
    position: absolute;
    left: 3px; top: .45rem;
    width: 14px; aspect-ratio: 1;
    border-radius: 50%;
    background: var(--deep);
    border: 2px solid var(--lime);
  }
  .route-stop .frame { aspect-ratio: 16 / 10; }
  .route-stop h3 {
    font-size: clamp(1.5rem, 7vw, 2.1rem);
    line-height: .98;
    letter-spacing: -.02em;
    text-transform: uppercase;
  }
  .route-stop p { color: var(--white-70); }
  .route-stop .num { color: var(--lime); }
  .route__map-mini { margin-bottom: .5rem; opacity: .75; }
}