/* The opening lines, centred above the loader's three dashes. Above the site's
   own black cover (z-99) so they read from the first frame. */
.po-intro {
  position: fixed;
  left: 50%;
  bottom: calc(50% + 34px);        /* the dashes sit on the centre line */
  z-index: 100;
  width: min(92vw, 960px);
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  font-family: sans, sans-serif;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 1, 1), transform 0.9s cubic-bezier(0.4, 0, 1, 1), filter 0.7s;
}
.po-intro__line {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.04em;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.po-intro__line + .po-intro__line { margin-top: 0.35em; }
/* each word rises from below its own baseline: the mask clips it until it is up */
.po-intro__mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.08em 0.02em 0.14em;   /* room for descenders and the flare's glow */
  margin: -0.08em -0.02em -0.14em;
}
.po-intro__word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.05, 0.7, 0.1, 1);
}
.po-intro__word.is-in { transform: none; }
/* the name: arrives in place, letters flickering as they decode */
.po-intro__name { transform: none; opacity: 0; transition: opacity 0.15s; }
.po-intro__name.is-in { opacity: 1; }
.po-intro__mask--name { overflow: visible; }  /* it does not rise, and the flare's glow must not be cropped */
.po-intro__char { display: inline-block; text-align: center; white-space: pre; overflow: visible; }
.po-intro__name.is-decoding .po-intro__char:not(.is-locked) { color: #6ee2ff; opacity: 0.7; }
/* once resolved: a cyan flare that settles back to white */
@keyframes po-intro-flare {
  0%   { color: #6ee2ff; text-shadow: 0 0 18px rgba(110, 226, 255, 0.9), 0 0 42px rgba(110, 226, 255, 0.5); }
  100% { color: #fff; text-shadow: 0 0 0 rgba(110, 226, 255, 0); }
}
.po-intro__name.is-flare { animation: po-intro-flare 1.1s cubic-bezier(0.4, 0, 0.2, 1) both; }
/* once the second line starts it leads; the first steps back */
.po-intro.is-second .po-intro__line:first-child { opacity: 0.45; }
/* the cards fly out through the text: it grows toward the viewer and dissolves */
.po-intro.is-out {
  opacity: 0;
  transform: translateX(-50%) scale(1.08);
  filter: blur(6px);
}
@media (prefers-reduced-motion: reduce) {
  .po-intro, .po-intro__line { transition: opacity 0.6s linear; }
  .po-intro__word { transform: none; opacity: 0; transition: opacity 0.6s linear; }
  .po-intro__word.is-in { opacity: 1; }
  .po-intro__name.is-flare { animation: none; }
  .po-intro.is-out { transform: translateX(-50%); filter: none; }
}