/* Corridor flyover (2026-09-27). Pairs with js/corridor-flyover.js. */
.flyover {
  position: relative; margin: 0; overflow: hidden;
  height: min(82vh, 780px); min-height: 520px;
  background: #081A1F center / cover no-repeat;
  color: var(--fog);
}
.flyover-map { position: absolute; inset: 0; }
.flyover-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 600ms ease; }
.flyover.is-ready .flyover-poster { opacity: 0; pointer-events: none; }
.flyover-shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(8,26,31,0.55) 0%, rgba(8,26,31,0) 22%, rgba(8,26,31,0) 60%, rgba(8,26,31,0.85) 100%);
}
.flyover-caption {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 64px;
  max-width: var(--max-width); margin: 0 auto; padding: 0 24px; pointer-events: none;
}
.flyover-place { font-size: 15px; color: var(--glacier); margin-bottom: 6px; }
.flyover-line {
  margin: 0; max-width: 30ch; font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; line-height: 1.15;
  font-variation-settings: 'wdth' 78; color: var(--fog); text-shadow: 0 1px 14px rgba(8,26,31,0.8);
}
.flyover-bar {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 18px;
  max-width: var(--max-width); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.flyover-ticks { display: flex; gap: 6px; }
.flyover-tick { width: 36px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.flyover-tick::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 3px; background: rgba(232,237,234,0.35); }
.flyover-tick.is-done::before { background: rgba(232,237,234,0.75); }
.flyover-tick.is-active::before { background: var(--buoy); }
.flyover-tick:focus-visible { outline: 2px solid var(--buoy); outline-offset: 2px; }
.flyover-toggle, .flyover-start {
  min-height: 44px; padding: 0 16px; border: 1px solid rgba(232,237,234,0.6); border-radius: 2px;
  background: rgba(8,26,31,0.5); color: var(--fog); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.flyover-toggle:hover, .flyover-start:hover { border-color: var(--fog); }
.flyover-toggle:focus-visible, .flyover-start:focus-visible { outline: 2px solid var(--buoy); outline-offset: 2px; }
.flyover-start { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--buoy); color: var(--deep); border-color: var(--buoy); }
.flyover.is-loading .flyover-line::after { content: ''; }
.flyover.is-failed .flyover-caption, .flyover.is-failed .flyover-bar { display: none; }
.flyover-note { margin: 12px 0 0; font-size: 14px; color: var(--medium); }

/* map attribution on dark */
.flyover .maplibregl-ctrl-attrib { background: rgba(8,26,31,0.6); color: var(--glacier); font-size: 12px; }
.flyover .maplibregl-ctrl-attrib a { color: var(--glacier); }
.flyover .maplibregl-ctrl-attrib-button { filter: invert(1); }
.flyover .maplibregl-ctrl-top-right { z-index: 3; }
.flyover .maplibregl-cooperative-gesture-screen { font-family: inherit; }

/* markers */
.fly-marker { pointer-events: none; font-family: 'Archivo', system-ui, sans-serif; }
/* MapLibre sets opacity on the marker itself for terrain occlusion, so reveal the children */
.fly-marker > * { opacity: 0; transition: opacity 500ms ease; }
.fly-marker.is-on > * { opacity: 1; }
.fly-place span { font-size: 14px; color: var(--glacier); opacity: 0.7; letter-spacing: 0.02em; white-space: nowrap; text-shadow: 0 1px 6px #081A1F; }

.fly-input { display: flex; align-items: center; gap: 8px; }
.fly-input i { width: 10px; height: 10px; border-radius: 50%; background: var(--glacier); box-shadow: 0 0 0 3px rgba(191,217,227,0.25); }
.fly-input span { font-size: 14px; font-weight: 600; color: var(--glacier); white-space: nowrap; text-shadow: 0 1px 6px #081A1F; }

.fly-plant { display: flex; align-items: center; gap: 10px; }
.fly-plant i { width: 18px; height: 18px; border-radius: 50%; background: var(--buoy); box-shadow: 0 0 0 6px rgba(242,183,5,0.25), 0 0 24px 6px rgba(242,183,5,0.55); }
.fly-plant span { display: block; font-size: 14px; color: var(--fog); white-space: nowrap; text-shadow: 0 1px 8px #081A1F; }
.fly-plant b { display: block; font-size: 18px; font-weight: 800; font-variation-settings: 'wdth' 78; }
.fly-plant-future i { background: transparent; border: 3px solid var(--buoy); box-shadow: none; }

.fly-customer { width: 12px; height: 12px; }
.fly-customer i { position: absolute; inset: 0; border-radius: 50%; background: var(--buoy); }
.fly-hub i { inset: -3px; }
.fly-label { position: absolute; white-space: nowrap; text-shadow: 0 1px 6px #081A1F; line-height: 1.25; }
.fly-label b { display: block; font-size: 14px; font-weight: 700; color: var(--fog); }
.fly-label em { display: block; font-style: normal; font-size: 14px; color: var(--glacier); }
.fly-label span { display: block; font-size: 14px; font-weight: 700; color: var(--buoy); }
.fly-label-top { top: 18px; left: 50%; transform: translateX(-50%); text-align: center; }
.fly-label-bottom { bottom: 18px; left: 50%; transform: translateX(-50%); text-align: center; }
.fly-label-left { left: 20px; top: 50%; transform: translateY(-50%); }
.fly-label-right { right: 20px; top: 50%; transform: translateY(-50%); text-align: right; }

.fly-vehicle i { display: block; background: #fff; box-shadow: 0 0 0 2px #081A1F, 0 0 0 3.5px var(--buoy), 0 0 16px 5px rgba(242,183,5,0.6); }
.fly-barge i { width: 24px; height: 11px; border-radius: 6px 3px 3px 6px; }
.fly-train i { width: 34px; height: 8px; border-radius: 2px; background: repeating-linear-gradient(90deg, #fff 0 10px, #BFD9E3 10px 12px); }
.fly-truck i { width: 16px; height: 9px; border-radius: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .fly-customer.is-on i::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--buoy);
    animation: fly-ring 2.4s ease-out infinite;
  }
  @keyframes fly-ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }
}

@media (max-width: 700px) {
  .flyover { height: 78vh; min-height: 480px; }
  .flyover-caption { bottom: 70px; padding: 0 16px; }
  .flyover-bar { padding: 0 16px; }
  .flyover-tick { width: 28px; }
  .fly-label em { display: none; }
  .fly-place span { font-size: 14px; }
}

/* full-bleed inside a chapter */
.chapter:has(.flyover) { overflow-x: clip; }
.chapter-visual .flyover { width: 100vw; margin-left: calc(50% - 50vw); }
.chapter-visual .flyover-note { max-width: var(--max-width); }

/* wide shots: drop the detail lines and the crowded inlet labels */
.flyover.is-wide .fly-label em { display: none; }
.flyover.is-wide .fly-minor .fly-label, .flyover.is-wide .fly-minor-place, .flyover.is-wide .fly-input span { display: none; }
.fly-plant-flip { flex-direction: row-reverse; text-align: right; }

@media (max-width: 700px) {
  /* phones: in wide shots keep only the plant, the hub, YVR and Crofton labelled */
  .flyover.is-wide .fly-customer:not(.fly-key) .fly-label { display: none; }
  .flyover.is-wide .fly-minor-place, .flyover.is-wide .fly-input span { display: none; }
  .flyover .fly-plant span { font-size: 14px; }
  .flyover.is-wide .fly-plant span { font-size: 0; }
  .flyover.is-wide .fly-plant b { font-size: 16px; }
}

/* mode key */
.flyover-key { display: flex; gap: 18px; margin-left: auto; opacity: 0; transition: opacity 400ms ease; font-size: 14px; color: var(--glacier); }
.flyover.show-key .flyover-key { opacity: 1; }
.flyover-key span { display: inline-flex; align-items: center; gap: 8px; }
.flyover-key span::before { content: ''; display: inline-block; width: 26px; background: var(--buoy); border-radius: 2px; }
.flyover-key .k-barge::before { height: 3px; }
.flyover-key .k-rail::before { height: 5px; background: linear-gradient(180deg, var(--buoy) 0 38%, #081A1F 38% 62%, var(--buoy) 62%); }
.flyover-key .k-truck::before { height: 2px; }
@media (max-width: 700px) {
  .flyover-bar { flex-wrap: wrap; row-gap: 8px; }
  .flyover-key { order: -1; width: 100%; margin-left: 0; gap: 14px; }
  .flyover-key span::before { width: 18px; }
  .flyover-caption { bottom: 112px; }
  .flyover-tick { width: 24px; }
  .flyover-ticks { gap: 5px; }
  .flyover-line { font-size: 21px; }
}