html,
body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow: hidden;
  font-family: system-ui, Segoe UI, Inter, Arial;
  color: #0e1b2b;
  background: linear-gradient(180deg, #bfe3ff 0%, #d7efff 40%, #f7fbff 100%);
}

/* Horizontal snap scroller */
.hsnap {
  height: 100svh;
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-flow: row nowrap;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.hsnap-child {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-width: 100vw;
  height: 100svh;
  display: flex;
  align-items: center;
}

.panel {
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.wrap {
  max-width: 1700px;
  margin: 0 auto;
  padding: 24px;
  width: 100%;
}

.vcenter {
  text-align: center;
}

.two-col {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: center;
}

.side h2 {
  margin: .25rem 0;
}

.muted {
  color: #1e3a5f;
}

.hero h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  margin: 0 0 8px;
}

.hero .lede {
  color: #0f172a;
}

.vis-canvas {
  height: 70svh;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 12px 40px rgba(30, 60, 90, 0.12);
}

/* Bottom timeline progress */
#timeline {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px 14px;
  z-index: 9999;
}

.timeline-wrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  height: 52px;
}

.track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, 0.25);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
}

.tick {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  top: 50%;
  background: #0f172a;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  opacity: 0.7;
}

.tick.active {
  background: #60a5fa;
  opacity: 1;
}

.labels {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 14px);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #0f172a;
  opacity: 0.9;
}

.plane {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -77.5%);
  width: 66px;
  height: 33px;
  /* 1.5x larger */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
  transition: left 350ms ease-out;
}

/* -------- Global Connections layout tweaks (section #v1) -------- */

/* Hide the left text column in the Global Connections section */
#v1 header.side {
  display: none;
}

/* Use flex instead of 2-column grid so the vis can be centered & large */
#v1 .two-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Make the globe visualization take ~70% of the screen */
#v1 .vis-canvas {
  width: 100vw;
  /* 70% of viewport width */
  height: 80vh;
  /* 70% of viewport height */
  margin: 0 auto;
  /* center within the wrap */
}


/* Example: Global Connections panel (v1) */
#v2 header.side {
  display: none;
}

#v2 .two-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

#v2 .vis-canvas {
  width: 90vw;
  /* make it wider */
  height: 82vh;
  /* make it taller */
  margin: 0 auto;
}



/* Hide the left text column for the Calendar */
#v5 header.side {
  display: none;
}

/* Use flex so the calendar canvas is centered & large */
#v5 .two-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Make the calendar visualization take most of the screen */
#v5 .vis-canvas {
  width: 90vw;
  /* try 100vw if you want edge-to-edge */
  height: 80vh;
  /* leaves room for the bottom timeline bar */
  margin: 0 auto;
}

/* Fleet Podium section */
#v3 .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#v3 .vis-canvas {
  width: 95vw;
  height: 80vh;
  margin: 0 auto;
}

.nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9998;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.10);
  /* subtle dark bubble */
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  color: #1f2933;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 150ms ease-out,
    transform 150ms ease-out,
    opacity 150ms ease-out;
}

.nav-arrow:hover {
  background: rgba(15, 23, 42, 0.18);
  transform: translateY(-50%) scale(1.05);
}

.nav-arrow:active {
  transform: translateY(-50%) scale(0.97);
}

.nav-arrow--left {
  left: 18px;
}

.nav-arrow--right {
  right: 18px;
}

/* Hidden state when at ends */
.nav-arrow--hidden {
  opacity: 0;
  pointer-events: none;
}


.transition-title h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 0.75rem;
  text-align: center;
}

.transition-body {
  max-width: 900px;
  font-size: 1rem;
  line-height: 1.6;
  color: #0f172a;
  margin-top: 0.5rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.transition-sources {
  margin-top: 2.2rem;
  text-align: center;
  opacity: 0.85;
}

.transition-sources h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.transition-sources a {
  color: #1e3a8a;
  /* deep blue link */
  text-decoration: none;
  font-weight: 500;
}

.transition-sources a:hover {
  text-decoration: underline;
}

/* Larger, consistent titles */
.transition-title h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 700;
  line-height: 1.25;
}

/* Larger, clearer paragraph text */
.transition-body {
  max-width: 900px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.7;
  color: #0f172a;
  text-align: center;
  margin: 0.75rem auto;
}

/* Space above sources block */
.transition-sources {
  margin-top: 2.5rem;
  text-align: center;
  opacity: 0.9;
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
}

.transition-sources h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
}

/* Slight top padding so transitions feel like slides */
.panel .wrap {
  padding-top: 3rem;
  padding-bottom: 3rem;
}