/* ============================================================
   Section 02 — Connectivity
   Sticky-pinned scroll-driven scene transitions
   World → Maldives chain → Shaviyani region → Airport detail
   ============================================================ */

.connectivity {
  position: relative;
  background: var(--ocean-deep);
  color: var(--cream);
  /* Pinned scroll length — 5 scenes × 60vh.
     Per-scene transition ≈ 40vh of scroll, advancing one scene per
     typical mouse-wheel burst rather than requiring multiple. */
  height: 300vh;
}

.connectivity__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.connectivity__header {
  position: absolute;
  top: clamp(80px, 12vh, 120px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  text-align: center;
  width: max-content;
  max-width: calc(100% - 48px);
}

.connectivity__eyebrow {
  display: block;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 18px;
  font-weight: 500;
}

.connectivity__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 92px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--cream);
  line-height: 1.05;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

.connectivity__viewport {
  position: relative;
  flex: 1;
  width: 100%;
}

/* Each scene fills the viewport, starts hidden, fades in via JS */
.conn-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: clamp(20px, 4vh, 40px);
  padding: clamp(160px, 20vh, 220px) clamp(24px, 6vw, 72px) clamp(80px, 10vh, 120px);
  opacity: 0;
  transition: opacity 700ms var(--ease-emerge);
  pointer-events: none;
}

.conn-scene.is-active {
  opacity: 1;
  pointer-events: auto;
}

.conn-svg {
  width: 100%;
  max-width: 720px;
  height: auto;
  flex: 0 1 auto;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.35));
}

.conn-globe-svg {
  width: 100%;
  max-width: 640px;
  height: auto;
  flex: 0 1 auto;
}

.conn-routes-svg {
  width: 100%;
  max-width: 1180px;
  height: auto;
  flex: 0 1 auto;
}

.routes-pulse-halo, .globe-pulse-halo {
  transform-origin: center;
  transform-box: fill-box;
  animation: pulseHalo 2400ms infinite ease-in-out;
}

.globe-pulse-ring {
  transform-origin: center;
  transform-box: fill-box;
  animation: svgRingPulse 2800ms infinite ease-in-out;
}

@keyframes svgRingPulse {
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%      { transform: scale(1.6); opacity: 0; }
}

.globe-pulse-dot {
  transform-origin: center;
  transform-box: fill-box;
  animation: dotPulse 2400ms infinite ease-in-out;
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.4); }
}

.conn-scene--atoll-detail .conn-svg { max-width: 540px; }

/* Atoll detail — uses the cleaned reference image as canvas, with airport
   callouts overlaid on the edges of the stage. */
.conn-atoll-stage {
  position: relative;
  width: 100%;
  height: clamp(420px, 60vh, 600px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.conn-atoll-image {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  filter: drop-shadow(0 12px 36px rgba(0,0,0,0.5));
  opacity: 0.55;
}

/* v2 — new edited image with built-in Maldives inset on the right.
   Image is 1665×1136 (aspect 1.466). Stage uses flex: cards on the left,
   image with overlays on the right. Image preserves its natural aspect. */
.conn-atoll-stage--v2 {
  height: auto;
  min-height: clamp(520px, 78vh, 760px);
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 0;
  position: relative;
}

.conn-atoll-airport-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 180px;
  flex: 0 0 180px;
}

.conn-atoll-airport-stack .conn-atoll-airport {
  position: static;
  width: 100%;
  max-width: 100%;
}

.conn-atoll-image-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* Stage sizes to the image so pins/inset are anchored to image,
   not the wider flex parent. Fixes pin drift across aspect ratios. */
.conn-atoll-image-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.conn-atoll-image--v2 {
  display: block;
  max-width: 100%;
  max-height: clamp(520px, 78vh, 760px);
  width: auto;
  height: auto;
  opacity: 0.95;
}

/* Muted version — fades the underlying place names so they read as
   secondary detail behind the Shaviyani Atoll heading and our pins. */
.conn-atoll-image--muted {
  opacity: 0.55;
  filter: contrast(0.85) brightness(0.95);
}

/* "Shaviyani Atoll" overlay heading on the atoll map */
.conn-atoll-heading {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 4;
}

.conn-atoll-heading__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: 0.02em;
  color: var(--cream);
  line-height: 1;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

.conn-atoll-heading__sub {
  display: block;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* Ring-only Nalandhoo highlight — large gold circle, no fill, pulsing.
   Sits over the actual island position. */
.conn-atoll-pin--ring-only .conn-atoll-pin__ring {
  width: 90px;
  height: 90px;
  border: 1.2px solid var(--gold);
  background: transparent;
  margin-top: -45px;
  margin-left: -45px;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 32px rgba(201, 182, 138, 0.25);
}

.conn-atoll-pin__ring-pulse {
  position: absolute;
  width: 90px;
  height: 90px;
  margin-top: -45px;
  margin-left: -45px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  animation: nalandhooRingPulse 2800ms infinite ease-out;
  pointer-events: none;
}

@keyframes nalandhooRingPulse {
  0%   { transform: scale(0.95); opacity: 0.6; }
  100% { transform: scale(1.5);  opacity: 0; }
}

/* Milandhoo airport pin — small plane icon, label below */
.conn-atoll-pin--airport {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  width: 180px !important;
  height: auto !important;
  /* Pull the pin so the icon (not the top edge) sits at the marked lat/lon */
  transform: translate(-50%, -50%);
}

.conn-atoll-pin__airport-icon {
  width: 22px;
  height: 22px;
  color: var(--gold);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
}

.conn-atoll-pin__airport-label {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(4, 20, 28, 0.7);
  padding: 4px 9px;
  white-space: nowrap;
  border: 0.5px solid rgba(201, 182, 138, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Nalandhoo position on atoll-only.png (1465×1136 — atoll detail with
   country inset stripped). Nalandhoo island sits at approx (916, 940)
   in original pixel space → 62.5% / 83% on the cropped canvas. */
.conn-atoll-pin--nalandhoo-v2 {
  top: 83%;
  left: 62.5%;
}

/* ─────────────────────────────────────────────
   Inset airports — pulsing dots over the small
   Maldives map on the right side of the image.
   Inset spans approximately x: 86%-100%, y: 0-100%.
   Within the inset (260px wide × 1136px tall), atolls are
   stacked vertically. Approximate y positions:
   - HAQ (HDh):    8%
   - Sh (yellow):  16%
   - NMF (Noonu): 22%
   - VIA (Malé):  52%
   ───────────────────────────────────────────── */
.conn-inset-airport {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.conn-inset-airport__pulse {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(184, 150, 94, 0.25);
  border: 0.5px solid rgba(184, 150, 94, 0.5);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulseHalo 2400ms infinite ease-in-out;
}

.conn-inset-airport__dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 1.5px var(--cream);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.conn-inset-airport__label {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--cream);
  white-space: nowrap;
}

/* Inset positions are relative to the image-wrap, anchored to the inset
   region on the right side of the rendered image. */
.conn-inset-airport--haq { top: 8%;  right: 4%; left: auto; }
.conn-inset-airport--nmf { top: 22%; right: 4%; left: auto; }
.conn-inset-airport--via { top: 52%; right: 4%; left: auto; }

/* SVG plane animation overlay — sits on the inset, planes converge on Shaviyani */
.conn-inset-planes {
  position: absolute;
  top: 0;
  right: 0;
  width: 14%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

/* Lines from airports to Nalandhoo, drawn in SVG over the image */
.conn-atoll-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.conn-atoll-pin {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Nalandhoo position on the rotated reference image (1060x800):
   Nalandhoo at approximately (605, 135) = 57% / 17% */
.conn-atoll-pin--nalandhoo {
  top: 17%;
  left: 57%;
}

.conn-atoll-pin__ring {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ringPulse 2800ms infinite ease-in-out;
}

.conn-atoll-pin__halo {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(184, 150, 94, 0.3);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulseHalo 2400ms infinite ease-in-out;
}

.conn-atoll-pin__core {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2.5px var(--cream);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.conn-atoll-pin__label {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
}

.conn-atoll-pin__label::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 18px;
  height: 0.5px;
  background: var(--gold);
}

.conn-atoll-pin__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--cream);
  line-height: 1;
}

.conn-atoll-pin__sub {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 6px;
}

.conn-atoll-airport {
  position: absolute;
  background: rgba(11, 46, 64, 0.85);
  border: 0.5px solid rgba(184, 150, 94, 0.4);
  padding: 12px 16px;
  max-width: 220px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.conn-atoll-airport__name {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 4px;
}

.conn-atoll-airport__atoll {
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lagoon-pale);
  margin-bottom: 6px;
}

.conn-atoll-airport__time {
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.conn-atoll-airport--milandhoo {
  border-style: dashed;
}

.conn-atoll-airport--via {
  background: rgba(11, 46, 64, 0.92);
  border-color: rgba(244, 237, 224, 0.25);
}

/* Pin positions on atoll-only.png (1465×1136 — country inset stripped).
   Re-aligned with the visible labels in the PNG:
   - Nalandhoo island sits at ≈ left 60%, top 84% (the larger landmass
     to the right of Milandhoo).
   - Milandhoo island sits at ≈ left 53%, top 87% (smaller, west of Nalandhoo). */
.conn-atoll-pin--nalandhoo-v2 { top: 84%; left: 60%; }
.conn-atoll-pin--milandhoo-v2 { top: 87%; left: 53%; }

.conn-atoll-pin__halo--small {
  width: 16px !important;
  height: 16px !important;
}

.conn-atoll-pin__core--small {
  width: 6px !important;
  height: 6px !important;
  background: var(--lagoon-pale) !important;
}

.conn-atoll-pin__label--small {
  left: 18px !important;
}

.conn-atoll-pin__label--small::before {
  width: 10px !important;
}

.conn-atoll-pin__title-sm {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--lagoon-pale);
}

/* ─────────────────────────────────────────────
   Country inset card — separate right-hand column,
   sibling of .conn-atoll-image-wrap. Sits to the right
   of the atoll detail without overlapping it.
   ───────────────────────────────────────────── */
.conn-country-inset {
  position: relative;
  flex: 0 0 clamp(80px, 9vw, 110px);
  width: clamp(80px, 9vw, 110px);
  align-self: stretch;
  padding: 14px 8px 12px;
  background: rgba(4, 20, 28, 0.4);
  border: 0.5px solid rgba(244, 237, 224, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.conn-country-inset__head,
.conn-country-inset__foot {
  font-family: var(--font-sans);
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, 0.7);
  text-align: center;
  width: 100%;
}

.conn-country-inset__foot {
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.24em;
}

.conn-country-inset__body {
  position: relative;
  width: 100%;
  height: clamp(160px, 22vh, 220px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.conn-country-inset__map {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(1.05);
}

/* Gold band horizontally across the Shaviyani latitude.
   Maldives runs ~7°N to ~0.5°S; Shaviyani is at ~6.4°N
   → roughly 18% down from the top of the country outline. */
.conn-country-inset__band {
  position: absolute;
  left: 0;
  right: 0;
  top: 17%;
  height: 8%;
  background: rgba(201, 182, 138, 0.22);
  border-top: 1px solid rgba(201, 182, 138, 0.55);
  border-bottom: 1px solid rgba(201, 182, 138, 0.55);
  pointer-events: none;
}

.conn-country-inset__pin {
  position: absolute;
  top: 21%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  border: 1.5px solid var(--cream);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 rgba(201, 182, 138, 0.55);
  animation: insetPinPulse 2400ms infinite ease-in-out;
}

@keyframes insetPinPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 182, 138, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(201, 182, 138, 0); }
}

@media (max-width: 900px) {
  .conn-atoll-stage--v2 {
    flex-direction: column;
  }
  .conn-atoll-airport-stack {
    width: 100%;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .conn-atoll-airport-stack .conn-atoll-airport {
    flex: 1 1 calc(50% - 5px);
    min-width: 140px;
  }
}

@media (max-width: 800px) {
  .conn-atoll-airport {
    max-width: 160px;
    padding: 8px 10px;
  }
  .conn-atoll-airport__name { font-size: 10px; }
  .conn-atoll-airport__time { font-size: 9px; }

  .conn-country-inset {
    flex: 0 0 70px;
    width: 70px;
    padding: 10px 6px 8px;
  }
  .conn-country-inset__head,
  .conn-country-inset__foot {
    font-size: 7px;
    letter-spacing: 0.22em;
  }
  .conn-country-inset__body {
    height: 140px;
  }
}

@media (max-width: 560px) {
  .conn-country-inset { display: none; }
}

/* Maldives map scene — image-based, explodes out of the canvas as scene activates */
.conn-scene--maldives-map { padding-top: clamp(160px, 20vh, 220px); }

.conn-maldives-stage {
  position: relative;
  width: 100%;
  height: clamp(380px, 52vh, 540px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.conn-maldives-wrap {
  position: relative;
  display: inline-block;
  height: 100%;
  transform: scale(0.78);
  transform-origin: 50% 18%;
  transition: transform 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.45));
}

.conn-scene--maldives-map.is-active .conn-maldives-wrap {
  transform: scale(1.25);
}

.conn-maldives-img {
  height: 100%;
  width: auto;
  display: block;
}

.conn-maldives-pin {
  position: absolute;
  top: 17%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.conn-maldives-pin__ring {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: ringPulse 2800ms infinite ease-in-out;
  opacity: 0.85;
}

@keyframes ringPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  50%      { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.conn-maldives-pin__halo {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(184, 150, 94, 0.25);
  border: 0.5px solid rgba(184, 150, 94, 0.55);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulseHalo 2400ms infinite ease-in-out;
}

.conn-maldives-pin__core {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 1.5px var(--cream);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Velana / Malé second pin further south on the map */
.conn-maldives-pin--velana {
  top: 45%;
}

.conn-maldives-pin--velana .conn-maldives-pin__halo {
  width: 24px;
  height: 24px;
  background: rgba(244, 237, 224, 0.18);
  border-color: rgba(244, 237, 224, 0.4);
}

.conn-maldives-pin--velana .conn-maldives-pin__core {
  background: var(--cream);
  box-shadow: 0 0 0 1.5px var(--gold);
}

/* Velana label sits to the RIGHT of the pin (Maldives chain runs N–S,
   pinning to the left would push the label over the country shape). */
.conn-maldives-pin__label--velana {
  left: 28px;
  padding: 6px 10px;
  background: rgba(11, 46, 64, 0.72);
  border: 0.5px solid rgba(244, 237, 224, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.conn-maldives-pin__label--velana::before {
  width: 16px;
  background: var(--cream);
}

/* Pin label sits attached to the pin itself with a connecting line. */
.conn-maldives-pin__label {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 700ms ease-out 1100ms;
  pointer-events: none;
}

.conn-maldives-pin__label::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 14px;
  height: 0.5px;
  background: var(--gold);
}

.conn-scene--maldives-map.is-active .conn-maldives-pin__label {
  opacity: 1;
}

.conn-maldives-pin__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--cream);
  letter-spacing: 0.02em;
  line-height: 1;
}

.conn-maldives-pin__sub {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 6px;
}

.conn-maldives-pin__label--velana .conn-maldives-pin__title {
  font-size: 15px;
  color: rgba(244, 237, 224, 0.85);
}

.conn-maldives-pin__label--velana .conn-maldives-pin__sub {
  color: rgba(244, 237, 224, 0.55);
}

/* Continent landmasses on routes scene — keep them subtle, decorative */
.conn-landmass path {
  transition: fill-opacity 600ms ease-out, stroke-opacity 600ms ease-out;
}

.conn-scene__caption {
  text-align: center;
  max-width: 760px;
  flex: 0 0 auto;
}

.conn-scene__caption--wide {
  max-width: 920px;
}

.conn-caption__lede {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--cream);
  line-height: 1.3;
  margin-bottom: 14px;
}

.conn-caption__sub {
  font-size: clamp(13px, 1.05vw, 14px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.65;
  color: rgba(244, 237, 224, 0.7);
  max-width: 56ch;
  margin: 0 auto;
}

.conn-caption__sub--wide {
  max-width: 78ch;
}

.conn-caption__lede--single {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .conn-caption__lede--single { white-space: normal; }
}

.conn-caption__bold {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cream);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .conn-caption__bold { white-space: normal; }
}

/* Globe scene — slow continuous rotation pulse on the pin */
.conn-scene--globe .conn-globe__pin circle:first-child {
  animation: pulseHalo 3000ms infinite ease-in-out;
  transform-origin: center;
  transform-box: fill-box;
}

.conn-scene--globe .conn-globe__pin circle:nth-child(2) {
  animation: pulseHalo 3000ms 600ms infinite ease-in-out;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes pulseHalo {
  0%, 100% { opacity: 0.18; transform: scale(0.85); }
  50%      { opacity: 0.45; transform: scale(1.15); }
}

/* Country chain scene — active atoll pulses */
.conn-scene--country .conn-atoll--active circle:first-child {
  transform-origin: center;
  transform-box: fill-box;
  animation: pulseHalo 2400ms infinite ease-in-out;
}

/* Airport pin micro-animation */
.conn-airport circle:first-of-type {
  transform-origin: center;
  transform-box: fill-box;
  animation: gentlePulse 2400ms infinite ease-in-out;
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* Airports scene — card grid */
.conn-scene--airports {
  align-items: stretch;
  justify-content: flex-start;
  /* Push cards well below the Paradise found heading */
  padding-top: clamp(380px, 46vh, 520px);
}

.conn-airports__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

.conn-card {
  background: rgba(244, 237, 224, 0.04);
  border: 0.5px solid rgba(244, 237, 224, 0.16);
  padding: clamp(20px, 2.4vw, 32px);
  position: relative;
  transition: border-color 300ms var(--ease-emerge), background-color 300ms var(--ease-emerge);
}

.conn-card:hover {
  background: rgba(244, 237, 224, 0.06);
  border-color: rgba(244, 237, 224, 0.28);
}

.conn-card--featured {
  border-color: rgba(184, 150, 94, 0.5);
  background: rgba(184, 150, 94, 0.06);
}

.conn-card--upcoming {
  border-style: dashed;
  border-color: rgba(168, 201, 197, 0.4);
}

.conn-card__eyebrow {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 10px;
}

.conn-card--upcoming .conn-card__eyebrow { color: var(--lagoon-pale); }

.conn-card__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--cream);
  margin-bottom: 4px;
  line-height: 1.15;
}

.conn-card__code {
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, 0.5);
  margin-bottom: 16px;
}

.conn-card__facts {
  list-style: none;
  padding: 0;
  margin: 0;
}

.conn-card__facts li {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(244, 237, 224, 0.78);
  padding: 6px 0 6px 14px;
  position: relative;
  border-top: 0.5px solid rgba(244, 237, 224, 0.08);
}

.conn-card__facts li:first-child { border-top: none; }

.conn-card__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 0.5px;
  background: var(--gold);
}

/* Progress indicator — bottom of viewport */
.connectivity__progress {
  position: absolute;
  bottom: clamp(28px, 4vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(280px, 60vw, 520px);
  z-index: 5;
}

.conn-progress__track {
  height: 1px;
  background: rgba(244, 237, 224, 0.15);
  position: relative;
  overflow: hidden;
}

.conn-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--sand);
  transition: width 200ms linear;
}

.conn-progress__steps {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}

.conn-progress__step {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, 0.55);
  transition: color 300ms var(--ease-emerge);
  cursor: pointer;
  padding: 8px 10px;
  user-select: none;
}

.conn-progress__step:hover {
  color: var(--cream);
}

.conn-progress__step.is-current {
  color: var(--gold);
}

/* Mobile */
@media (max-width: 720px) {
  .conn-airports__grid { grid-template-columns: 1fr; }
  .connectivity__title { font-size: clamp(28px, 8vw, 40px); }
  .conn-caption__lede { font-size: clamp(18px, 5vw, 22px); }
  .connectivity__header { top: clamp(60px, 8vh, 80px); }
}

@media (prefers-reduced-motion: r