/* =========================================================
   Itinerary: scroll-drawn downwind route
   Uses the site tokens from styles.css (gold, navy, on-dark).
   ========================================================= */
.itin {
  --itin-bg: #0B1628;          /* deep night-sea, one step darker than --navy */
  --itin-line: var(--gold, #FCCC28);
  --itin-ghost: rgba(245, 243, 238, .14);
  --itin-text: var(--on-dark, #F5F3EE);
  --itin-muted: #A9B4C7;       /* 8.4:1 on --itin-bg */
  --itin-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --marker: 18px;

  position: relative;
  background: var(--itin-bg);
  color: var(--itin-text);
  padding-block: var(--space-7, 7rem);
  overflow: hidden;
}
.itin :focus-visible { outline-color: var(--itin-line); }

.itin-head { margin-bottom: clamp(3rem, 8vw, 7rem); }
.itin-title {
  font-family: var(--font-display, "Bebas Neue", sans-serif); font-weight: 400; letter-spacing: .01em; line-height: .92;
  font-size: var(--fs-display-xl, 6rem);
  color: #fff; max-width: 12ch;
}
.itin-lead { margin-top: var(--space-3, 1.5rem); font-size: var(--fs-md, 1.2rem); color: var(--itin-muted); }
.itin-lead > span:first-child { display: block; max-width: 44ch; }
/* "Welcome to your own kite safari": its own line, in the display font and gold, led by a short gold rule like the route line */
.itin-hl {
  display: flex; align-items: center; gap: .85rem; margin-top: var(--space-2, 1rem);
  font-family: var(--font-display, "Bebas Neue", sans-serif); font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1; letter-spacing: .02em;
  color: var(--itin-line); max-width: none;
}
.itin-hl::before { content: ""; flex: none; width: 2.75rem; height: 2px; border-radius: 2px; background: var(--itin-line); }

/* ---------- Track + SVG route ---------- */
.itin-track {
  position: relative;
  max-width: var(--max, 1320px); margin-inline: auto; padding-inline: var(--gutter, 1.5rem);
}
.itin-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 0;
}
.itin-path, .itin-path-ghost { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.itin-path { stroke: var(--itin-line); stroke-width: 2; }
.itin-path-ghost { stroke: var(--itin-ghost); stroke-width: 1.5; stroke-dasharray: 2 8; }

/* ---------- Stops ---------- */
.itin-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6rem, 14vw, 13rem); }
.itin-stop {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-3, 1.5rem); align-items: start;
}
.itin-info { position: relative; padding-left: 2.75rem; }
.itin-stop[data-side="left"]  .itin-info  { grid-column: 1 / span 4; grid-row: 1; }
.itin-stop[data-side="left"]  .itin-media { grid-column: 6 / -1;     grid-row: 1; }
.itin-stop[data-side="right"] .itin-info  { grid-column: 8 / -1;     grid-row: 1; margin-top: clamp(2rem, 6vw, 6rem); }
.itin-stop[data-side="right"] .itin-media { grid-column: 1 / span 7; grid-row: 1; }

.itin-marker {
  position: absolute; left: 0; top: .1rem;
  width: var(--marker); height: var(--marker); border-radius: 50%;
  background: var(--itin-bg); border: 2px solid var(--itin-line);
  box-shadow: 0 0 0 6px var(--itin-bg);
}
.itin-marker::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--itin-line);
  transform: scale(1); transition: transform 400ms var(--ease, ease);
}
.itin-stop--end .itin-marker { --marker: 24px; }

.itin-coords { font-family: var(--itin-mono); font-size: .8125rem; letter-spacing: .02em; color: var(--itin-line); line-height: 1.4; }
.itin-step { margin-top: var(--space-2, 1rem); font-size: var(--fs-sm, .875rem); color: var(--itin-muted); font-weight: 600; }
.itin-name {
  margin-top: .25rem;
  font-family: var(--font-display, "Bebas Neue", sans-serif); font-weight: 400; letter-spacing: .01em;
  font-size: var(--fs-display, 4rem); color: #fff; line-height: .92;
}
.itin-desc { margin-top: var(--space-2, 1rem); color: var(--itin-muted); font-size: var(--fs-md, 1.2rem); line-height: 1.55; max-width: 34ch; }
.itin-next { margin-top: var(--space-3, 1.5rem); font-family: var(--itin-mono); font-size: .8125rem; color: var(--itin-text); opacity: .8; }

/* ---------- Photos: mixed sizes and heights so it reads organic ---------- */
.itin-media { display: flex; align-items: flex-start; gap: var(--space-3, 1.5rem); }
.itin-stop[data-side="right"] .itin-media { flex-direction: row-reverse; justify-content: flex-start; }
.itin-photo { margin: 0; border-radius: 14px; overflow: hidden; background: #13233F; flex: none; }
.itin-photo img { width: 100%; height: 100%; object-fit: cover; }
.itin-photo video { display: block; width: 100%; height: 100%; object-fit: cover; }
.itin-photo--wide { width: 64%; aspect-ratio: 3 / 2; }
.itin-photo--mid  { width: 54%; aspect-ratio: 4 / 3; }
.itin-photo--tall { width: 32%; aspect-ratio: 3 / 4; }
.itin-photo--small { width: 36%; aspect-ratio: 4 / 3; }
.itin-photo--drop { margin-top: clamp(4rem, 12vw, 11rem); }
.itin-photo--rise { margin-top: clamp(-3rem, -4vw, -1rem); }
.itin-stop--end .itin-photo--wide { width: 82%; }

/* ---------- Line drawings: one faint landmark per stop ---------- */
.itin-info, .itin-media { position: relative; z-index: 1; }
.itin-art {
  position: absolute; z-index: -1; left: 2.75rem; bottom: -150px;
  width: min(340px, 100%); height: auto;
  fill: none; stroke: var(--itin-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: .24; pointer-events: none;
}

/* ---------- Animated state (only when JS + motion are allowed) ---------- */
.itin.is-animated .itin-photo { opacity: 0; transform: translateY(40px) scale(.94); }
.itin.is-animated .itin-info > :not(.itin-marker):not(.itin-art) { opacity: 0; transform: translateY(16px); }
.itin.is-animated .itin-marker::after { transform: scale(0); }
.itin.is-animated .itin-stop.is-reached .itin-marker::after { transform: scale(1); }

/* ---------- Mobile: vertical path on the left, photos stacked ---------- */
@media (max-width: 760px) {
  .itin-stops { gap: 4.5rem; }
  .itin-stop { display: block; }
  .itin-stop[data-side="right"] .itin-info { margin-top: 0; }
  .itin-info { padding-left: 2.25rem; }
  .itin-media,
  .itin-stop[data-side="right"] .itin-media {
    flex-direction: column; align-items: stretch; gap: var(--space-2, 1rem);
    margin-top: var(--space-4, 2rem); padding-left: 2.25rem;
  }
  .itin-photo--wide, .itin-photo--mid, .itin-stop--end .itin-photo--wide { width: 100%; }
  .itin-photo--tall { width: 72%; }
  .itin-stop[data-side="right"] .itin-photo--tall { align-self: flex-end; }
  .itin-photo--drop, .itin-photo--rise { margin-top: 0; }
  .itin-art { position: static; display: block; margin-top: var(--space-3, 1.5rem); width: min(300px, 85%); opacity: .2; }
  .itin-photo--small { width: 72%; }
}

@media (prefers-reduced-motion: reduce) {
  .itin.is-animated .itin-photo,
  .itin.is-animated .itin-info > :not(.itin-marker):not(.itin-art) { opacity: 1; transform: none; }
  .itin.is-animated .itin-marker::after { transform: scale(1); }
}

/* ---------- Moving film strip under the itinerary ---------- */
.reel { margin-top: var(--space-3, 1.5rem); overflow: hidden; overflow: clip; }   /* clip: the wide track can never be scrolled sideways */
.reel-track {
  --tile: clamp(260px, 30vw, 460px);
  /* start with the 3rd clip (the first kiting one) centred on screen; one full set later it is back in the same place */
  --start: calc(50vw - 2.5 * var(--tile) - 2 * .75rem);
  display: flex; gap: .75rem; width: max-content;
  transform: translateX(var(--start));
  animation: reel-slide 110s linear infinite;
  animation-play-state: paused;     /* main.js starts it when the strip is on screen */
}
.reel.is-running .reel-track { animation-play-state: running; }
.reel.is-running:hover .reel-track { animation-play-state: paused; }
.reel-tile { flex: none; width: var(--tile); aspect-ratio: 16 / 9; margin: 0; border-radius: 14px; overflow: hidden; background: var(--dune-deep); }
.reel-tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* move by exactly one set (half the track plus half a gap), then start over */
@keyframes reel-slide {
  from { transform: translateX(var(--start)); }
  to   { transform: translateX(calc(var(--start) - 50% - .375rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .reel { overflow-x: auto; }
  .reel-track { animation: none; }
}