/* Opening sequence (intro.js): dots become words, words glide into the hero,
   the wordmark rises, then blocks cut from project covers clear the screen. */

#pw-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #f0f0f0;
  overflow: hidden;
  pointer-events: auto;
}
html:not(.pw-intro-on) #pw-intro { display: none; }
/* remembered "invert color" theme (set in <head> before first paint): the intro opens on dark paper */
html[data-theme=dark] #pw-intro { background: #0f0f0f; }

#pw-intro .pw-i-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
}
#pw-intro .pw-i-text {
  position: absolute;
  margin: 0;
  white-space: normal;
}
#pw-intro .pw-i-word {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}
#pw-intro .pw-i-logo {
  position: absolute;
  background: currentColor;
  -webkit-mask: var(--logo) top left / 100% auto no-repeat;
  mask: var(--logo) top left / 100% auto no-repeat;
  clip-path: inset(100% 0 0 0);
}
#pw-intro .pw-i-fade { opacity: 0; }
#pw-intro canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* while the intro runs, the hero text sits in its finished state underneath,
   so the hand-off shows exactly what the intro landed on */
html.pw-intro-on #hero .anim-text,
html.pw-intro-on #hero .anim-text *,
html.pw-intro-on #hero .scroll-caption,
html.pw-intro-on #hero .scroll-caption * {
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  opacity: 1 !important;
}