@font-face {
  font-family: 'Nasalization';
  src: url('//fonts/nasalization-rg.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

#launchmap {
  width: 100%;
  height: 600px;
  position: relative;
  background: #bae6fd; /* Lightest blue water */
  overflow: hidden;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  
  /* The Camera */
  perspective: 1000px; 
}

#launchmap svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Crucial: Passes 3D space down to children */
  transform-style: preserve-3d; 
}

.titlecard {
  width: 100%;
  background: black;
  display: flex;
  height: 100vh;
}

.title-holder {
  flex-grow: 1;
  align-content: center;
}

.group-holder {
  flex-grow: 1;
  display: flex;
  align-content: center;
}
.group-holder img {
  margin: auto;
  max-height: 75%;
  max-width: 50%;
}

.group-holder .title {
  text-align: left;
  margin-inline: 2em;
}

.title {
  margin: auto;
  text-align: center;
}

.title h1 {
  font-size: 50pt;
  font-family: 'Nasalization Rg', sans-serif !important;
  font-weight: normal !important;
  font-style: normal;
}
section {
  max-width: 40em;
  margin: auto;
}

.plot {
  margin: auto;
}

/*Intro Storytelling*/
.intro-story {
  padding: 10px;
}
#intro-p1 {

}

#intro-p2 {
  text-align: end;
}

#demo-div {
  display: flex;
  justify-content: center; /* This handles the centering */
  align-items: center;
  width: 100%;
  max-width: 1200px;       /* Give it a wide ceiling */
  margin: 0 auto;
  gap: 10px;
}

#demo {
  flex: 1;                 /* Take up exactly 50% */
  display: flex;
  justify-content: flex-end; /* Push the SVG drawing toward the center seam */
  margin: 0;               /* Remove the 'auto' margin! */
}

#demo-text {
  flex: 1;                 /* Take up exactly 50% */
  margin: 0;
  text-align: left;
  border-left: 5px solid #3c31c1;
}
.group-holder .title {
  font-size: 24px;
  font-weight: 500;

  font-family: 'nasalization', sans-serif !important;


  /*margin-top: 20px;*/
  /*text-align: center;*/

  /*align-self: flex-start;*/
}

/* The World: Tilted back to lie on the desk */
.world-plane {
  transform-style: preserve-3d;
  transform-origin: center center;
  transform: rotateX(55deg) rotateZ(-10deg) scale(0.95);
  transition: transform 1s ease-in-out;
}

/* The Bars: Counter-rotated to stand up */
.bar-wrapper {
  transform-style: preserve-3d;
  pointer-events: none; /* Let clicks pass to the map */
}

/* Make the LEO timeline full-bleed, not constrained by .center */
#leo-timeline.center {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Ensure the SVG can fill the full-bleed container */
#leo-timeline svg {
  display: block;
}

/* Friction-point annotation popup */
.leo-popup {
  position: absolute;
  top: 18%;
  right: 5%;
  max-width: 260px;
  background: rgba(8, 18, 42, 0.92);
  border: 1px solid rgba(120, 181, 255, 0.38);
  border-radius: 10px;
  padding: 14px 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 10;
  backdrop-filter: blur(6px);
}

.leo-popup__title {
  font-size: 14px;
  font-weight: 700;
  color: #ff9a76;
  margin-bottom: 7px;
  letter-spacing: 0.04em;
}

.leo-popup__body {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(220, 235, 255, 0.88);
}

* {
  font-family: 'nasalization', sans-serif !important;
}