/* A brief opening scene. The portfolio is always present underneath. */
.intro-screen { display: none; }
html.intro-pending { overflow: hidden; }
html.intro-pending .entrance { animation-play-state: paused; }
html.intro-pending .intro-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0b1728;
  color: var(--text);
  transform: translate3d(0, 0, 0);
  border-radius: 0;
  transition: transform 720ms cubic-bezier(.76, 0, .21, 1), border-radius 720ms cubic-bezier(.76, 0, .21, 1);
}
.intro-screen::before {
  content: "";
  position: absolute;
  width: min(86vw, 920px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(97, 149, 218, .15), transparent 65%);
  pointer-events: none;
}
.intro-copy { position: relative; width: 100%; text-align: center; font-size: clamp(64px, 11vw, 156px); font-weight: 600; letter-spacing: -.075em; line-height: 1.05; }
.intro-copy > span { display: block; white-space: nowrap; transition: opacity 350ms ease, transform 500ms cubic-bezier(.2,.7,.2,1); }
.intro-period { color: var(--accent); }
.intro-hello { opacity: 1; transform: translate3d(0, 0, 0); }
.intro-alain { position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 24px, 0); }
html.intro-stage-2 .intro-hello { opacity: 0; transform: translate3d(0, -24px, 0); }
html.intro-stage-2 .intro-alain { opacity: 1; transform: translate3d(0, 0, 0); }
.intro-skip { position: absolute; right: clamp(24px, 5vw, 74px); bottom: max(28px, env(safe-area-inset-bottom)); padding: 10px; border: 0; background: transparent; color: #b8c9df; font-size: 12px; letter-spacing: .06em; }
.intro-skip:hover { color: #fff; }
html.intro-exit .intro-screen { transform: translate3d(0, -102%, 0); border-radius: 0 0 48px 48px; }
@media (max-width: 560px) {
  .intro-copy { font-size: clamp(55px, 15vw, 86px); }
  .intro-skip { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html.intro-pending { overflow: auto; }
  html.intro-pending .intro-screen { display: none; }
}
html[data-motion="reduced"].intro-pending { overflow: auto; }
html[data-motion="reduced"].intro-pending .intro-screen { display: none; }