/* Pop speech balloons inherit the active planet palette from .relay. */
.intro-bubbles {
  position: absolute;
  z-index: 60;
  left: clamp(20px, 2.5vw, 40px);
  top: 28px;
  width: clamp(280px, 25vw, 350px);
  height: 176px;
  color: var(--app-ink);
  font-family: SpaceApps, sans-serif;
  pointer-events: none;
}
.intro-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  isolation: isolate;
  border: 2px solid var(--planet-border);
  border-radius: 37px 45px 32px 43px;
  background: var(--planet-surface);
  box-shadow: 4px 5px 0 var(--planet-border);
  animation: intro-bubble-drift 7s ease-in-out infinite;
  pointer-events: none;
}
.intro-bubble-title {
  left: 0;
  top: 0;
  width: 226px;
  min-height: 68px;
  padding: 16px 22px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}
.intro-bubble-welcome {
  left: 28px;
  top: 80px;
  width: 282px;
  min-height: 78px;
  padding: 15px 25px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  border-radius: 40px 29px 44px 32px;
  background: var(--planet-surface-highlight);
  animation-delay: -3.5s;
}
.intro-bubble-welcome span { max-width: 230px; }
.intro-bubble::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: -11px;
  width: 16px;
  height: 16px;
  background: inherit;
  border-right: 2px solid var(--planet-border);
  border-bottom: 2px solid var(--planet-border);
  transform: skewY(-27deg) rotate(39deg);
}
.intro-bubble-speck {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 20px;
  left: 255px;
  border: 2px solid var(--planet-border);
  border-radius: 50%;
  background: var(--planet-surface);
  box-shadow: 2px 2px 0 var(--planet-border);
  pointer-events: none;
  animation: intro-bubble-drift 9s ease-in-out -2s infinite;
}
.intro-bubble-speck.second {
  width: 9px;
  height: 9px;
  top: 63px;
  left: 280px;
  background: var(--planet-surface-highlight);
}
@keyframes intro-bubble-drift {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}
@media (min-width:701px) and (max-width:1100px) and (min-aspect-ratio:7/5) {
  .intro-bubbles { width: 274px; left: 20px; }
  .intro-bubble-title { width: 202px; font-size: 19px; }
  .intro-bubble-welcome { left: 20px; width: 248px; font-size: 15px; }
  .intro-bubble-speck { left: 235px; }
  .intro-bubble-speck.second { left: 262px; }
}
/* Compact screens keep a measured header band below the NASA logo.
   Its shorter height reclaims the removed selector's space. */
@media (max-width:700px), (max-aspect-ratio:7/5) {
  :root { --intro-bubbles-space: 134px; }
  .intro-bubbles {
    left: 16px;
    top: var(--intro-bubbles-top, 150px);
    width: min(340px, calc(100vw - 32px));
    height: 144px;
  }
  .intro-bubble-title { width: 202px; min-height: 52px; padding: 12px 18px; font-size: 19px; }
  .intro-bubble-welcome { top: 63px; left: 24px; width: min(280px, calc(100vw - 56px)); min-height: 64px; padding: 12px 20px; font-size: 15px; }
  .intro-bubble-welcome span { max-width: 224px; }
  .intro-bubble-speck { left: 229px; top: 12px; width: 17px; height: 17px; }
  .intro-bubble-speck.second { left: 260px; top: 43px; }
  .jupiter, .city-story, .city-stage, .cue-city, .moon, .cue-intro { margin-top: var(--intro-bubbles-space); }
}
@media (max-width:700px) {
  .mobile-partners-layout .relay { height: calc(var(--mobile-relay-height) + var(--mobile-partners-space) + var(--intro-bubbles-space)); }
}
@media (min-width:701px) and (max-aspect-ratio:7/5) {
  .relay { height: calc(540svh + min(100vw, 72svh) + var(--intro-bubbles-space)); }
  .relay:has(.event-countdown) { height: calc(540svh + min(100vw, 72svh) + 447px + var(--intro-bubbles-space)); }
}
@media (prefers-reduced-motion:reduce) {
  .intro-bubble, .intro-bubble-speck { animation: none; }
}