/* Home ---------------------------------------------------------------- */

.intro{
  margin-top:auto;align-self:center;text-align:center;
  max-width:860px;padding-bottom:clamp(48px,11vh,130px);
}
.intro-heading{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(34px,4.6vw,62px);line-height:1.1;letter-spacing:-.01em;
  margin-bottom:18px;min-height:1.2em;
  text-shadow:0 2px 30px rgba(2,4,10,.9);
}
.intro-heading .name{font-style:normal;font-weight:600}
.caret{
  display:inline-block;width:2px;margin-left:2px;
  font-style:normal;font-weight:400;
  color:var(--gold);-webkit-text-fill-color:var(--gold);
  animation:blink 1.05s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.intro-blurb{
  font-size:clamp(14px,1.5vw,16.5px);font-weight:300;line-height:1.8;
  color:var(--dim);max-width:56ch;margin:0 auto;
  text-shadow:0 2px 20px rgba(2,4,10,.9);
  opacity:0;transform:translateY(14px);
  transition:opacity 1.4s var(--ease),transform 1.4s var(--ease);
}
.intro-blurb.is-visible{opacity:1;transform:translateY(0)}

/* Destination labels are positioned by script under each constellation. */
.constellation-label{
  position:fixed;left:0;top:0;z-index:5;
  font-family:var(--sans);font-size:12px;font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--star);text-decoration:none;white-space:nowrap;
  text-shadow:0 0 14px rgba(159,210,239,.5);
  opacity:0;transition:opacity .9s,color .4s,text-shadow .4s;
}
.constellation-label.is-ready{opacity:.55}
.constellation-label.is-ready.is-active{opacity:1}
.constellation-label.is-active{
  color:var(--gold);text-shadow:0 0 16px rgba(245,201,123,.55);
}
.constellation-label:focus-visible{outline:1px solid var(--cyan);outline-offset:6px}

/* While flying towards a constellation everything else steps aside. */
body.is-warping .overlay,
body.is-warping .constellation-label{opacity:0;transition:opacity .5s}

@media (max-width:720px){
  .constellation-label{font-size:10px;letter-spacing:.3em}
}

/* Day mode ------------------------------------------------------------- */
[data-theme="light"] .intro-heading{text-shadow:0 2px 22px rgba(255,255,255,.9)}
[data-theme="light"] .intro-blurb{text-shadow:0 1px 14px rgba(255,255,255,.9)}
/* Over bright water the labels need their own little raft. */
[data-theme="light"] .constellation-label{
  color:var(--star);text-shadow:none;
  padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(4px);
  box-shadow:0 4px 18px rgba(18,53,75,.12);
}
[data-theme="light"] .constellation-label.is-active{
  color:var(--gold);background:rgba(255,255,255,.82);
}
[data-theme="light"] .intro-heading{
  text-shadow:0 1px 14px rgba(255,255,255,.95),0 0 34px rgba(255,255,255,.85);
}
[data-theme="light"] .intro-blurb{
  color:rgba(18,53,75,.86);
  text-shadow:0 1px 12px rgba(255,255,255,.95),0 0 26px rgba(255,255,255,.8);
}