.constellation-quote {
  position: absolute;

  left: 64.5%;
  top: 42.5%;

  z-index: 5;

  transform: translateX(-50%);

  width: max-content;
  max-width: 34vw;

  color: rgba(225, 238, 252, 0.78);

  font-family:
    "Bodoni 72",
    Didot,
    Baskerville,
    "Iowan Old Style",
    Georgia,
    serif;

  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.025em;

  text-align: left;
  text-transform: lowercase;

  text-shadow:
    0 0 6px rgba(100, 165, 225, 0.20),
    0 1px 4px rgba(0, 0, 0, 0.55);

  pointer-events: none;

  opacity: 1;
  transition: opacity 450ms ease;
}

.quote-line {
  display: block;
  min-height: 1.55em;
}


.landing.constellation-active .constellation-quote {
  opacity: 0;
}


@media (max-width: 800px) {
  .constellation-quote {
    font-size: 12px;
    max-width: 42vw;
  }
}

.quote-line-3 {
  text-align: right;
  padding-top: 3px;
  padding-right: 4px;
  font-size: 0.92em;
}

.quote-line-3 {
  display: block;
  width: 100%;
  box-sizing: border-box;

  text-align: right;

  padding-top: 3px;
  padding-right: 4px;

  font-size: 0.92em;
}

/* Subtle starlight glow behind quote */
.constellation-quote {
  color: rgba(235, 244, 255, 0.88);

  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.55),
    0 0 7px rgba(175, 215, 255, 0.38),
    0 0 15px rgba(80, 145, 220, 0.20),
    0 1px 4px rgba(0, 0, 0, 0.72);
}

/* Irregular starlight twinkle */
@keyframes quoteStarlightTwinkle {
  0%, 100% {
    color: rgba(235, 244, 255, 0.84);
    text-shadow:
      0 0 2px rgba(255, 255, 255, 0.42),
      0 0 7px rgba(175, 215, 255, 0.28),
      0 0 14px rgba(80, 145, 220, 0.14),
      0 1px 4px rgba(0, 0, 0, 0.72);
  }

  13% {
    color: rgba(245, 250, 255, 0.94);
    text-shadow:
      0 0 3px rgba(255, 255, 255, 0.72),
      0 0 9px rgba(190, 225, 255, 0.48),
      0 0 18px rgba(95, 160, 235, 0.25),
      0 1px 4px rgba(0, 0, 0, 0.72);
  }

  27% {
    color: rgba(230, 241, 253, 0.80);
    text-shadow:
      0 0 2px rgba(255, 255, 255, 0.35),
      0 0 6px rgba(160, 205, 250, 0.22),
      0 1px 4px rgba(0, 0, 0, 0.72);
  }

  46% {
    color: rgba(238, 247, 255, 0.88);
    text-shadow:
      0 0 2px rgba(255, 255, 255, 0.50),
      0 0 8px rgba(175, 220, 255, 0.34),
      0 0 16px rgba(75, 145, 225, 0.18),
      0 1px 4px rgba(0, 0, 0, 0.72);
  }

  53% {
    color: rgba(250, 253, 255, 0.98);
    text-shadow:
      0 0 4px rgba(255, 255, 255, 0.82),
      0 0 11px rgba(200, 235, 255, 0.58),
      0 0 22px rgba(100, 175, 245, 0.30),
      0 1px 4px rgba(0, 0, 0, 0.72);
  }

  71% {
    color: rgba(228, 240, 253, 0.79);
    text-shadow:
      0 0 2px rgba(255, 255, 255, 0.30),
      0 0 6px rgba(155, 200, 245, 0.20),
      0 1px 4px rgba(0, 0, 0, 0.72);
  }

  86% {
    color: rgba(243, 249, 255, 0.92);
    text-shadow:
      0 0 3px rgba(255, 255, 255, 0.62),
      0 0 9px rgba(185, 225, 255, 0.42),
      0 0 18px rgba(85, 155, 235, 0.22),
      0 1px 4px rgba(0, 0, 0, 0.72);
  }
}

.constellation-quote {
  animation: quoteStarlightTwinkle 6.7s ease-in-out infinite;
}